Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

SVG Map - Tile Map Without Javascript

Taro Matsuzawa @smellman

Georepublic Japan

Topic

Introducing myself

smellman smellman2

Community

Georepublic

Maptember

I enjoy Maptember too much!

maptember

Notice...

This presentation describes some proposals to W3C.

Be careful about it! They are not standards yet.

Current Tile Maps

Current Tile Maps

Current Tile Maps on the Web are implemented using Javascript.

Problems with Javascript

Implementations with Javascript have some problems.

Javascript Engines

Sometimes Javascript programmers need to fight with small differences between each engine :-(

Goodbye Opera.

Mobile Implementations

Mobile devices don't have powerful CPU.

I lied.

apple

But too many mobile devices don't have powerful CPU.

firefoxos

iOS doesn't support JIT in applications (UIWebView).

Only Mobile Safari supports JIT.

Big JS File

It's nothing compared to loading map data, but sometimes loading big Javascript files causes memory leaks.

Tile Maps with Javascript can cause troubles, but time heals all wounds.

However we can try another approach.

SVG Map

SVG Map is a technology implementation for Tile Maps using SVG.

Lots of specifications have been developed by Satoru Takagi, who is working for KDDI (a famous mobile carrier in Japan).

History

SVG Map has a long history.

W3C SVG 1.1

SVG 1.1 includes some results of their acitivity.

SVG Tiny 1.2

They developed the "Tiling and Layering Module for SVG 1.2 Tiny" specification and submitted it as "W3C Member Submission".

SVGTL

This module uses an animation tag, but it's not useful.

So they now work on some new proposals.

New Proposals

The Tiling and Layering Module was seperated from one into two proposals, and it now uses iframe tag instead of animation tag.

The basic concept is in large parts similar to the SVG 1.2 Tiny version.

IFrame Like Syntax

IFrame Like Syntax supports

Tiling

A Root SVG Document contains tiled SVG Documents with IFrame, and each tiled SVG Document also contains tiled SVG Documents again, and so on ... (cascading documents).

tiling

Layering

The contained layers of each SVG document are displayed depending on viewbox and zoom level.

layering

The zooming function uses an extended CSS3 Media Query, defined in this proposal.

Tiling and Layering example

Root.svg

<iframe x="0" y="0" width="200" height="200"
        media="(min-zoom: 0.5) and (max-zoom: 5)"
        src="L1.svg" />
<iframe x="0" y="0" width="200" height="200"
        media="(min-zoom: 5) and (max-zoom: 15)"
        src="L2.svg" />

The zooming function works with extended CSS3 Media Queries.

This example will display either L1.svg or L2.svg depending on zoom level.

When no media attribute is declared, the layer will be always shown.

L1.svg

<iframe x="0" y="0" width="100" height="100"
        src="L1_01.svg" />
<iframe x="100" y="0" width="100" height="100"
        src="L1_02.svg" />
<iframe x="0" y="100" width="100" height="100"
        src="L1_11.svg" />
<iframe x="100" y="100" width="100" height="100"
        src="L1_12.svg" />

L1_01.svg

<image xlink:href="L1_01.png" />

L1.svg contains 4 IFrames, tiled and ordered.

L2.svg

<iframe x="0" y="0" width="100" height="100"
        src="L2_01.svg" />
<iframe x="100" y="0" width="100" height="100"
        src="L2_02.svg" />
<iframe x="0" y="100" width="100" height="100"
        src="L2_11.svg" />
<iframe x="100" y="100" width="100" height="100"
        src="L2_12.svg" />

L2.svg looks like L1.svg.

L2_01.svg

<iframe x="0" y="0" width="50" height="50"
        src="L2_01_01.svg" />
<iframe x="50" y="0" width="50" height="50"
        src="L2_01_02.svg" />
<iframe x="0" y="50" width="50" height="50"
        src="L2_01_11.svg" />
<iframe x="50" y="50" width="50" height="50"
        src="L2_01_12.svg" />

L2_01_01.svg

<image xlink:href="L2_01_01.png" />

Layer 2 contains 4 times 4 (= 16) SVG Documents.

Layer1 figure

layer1

Layer2 figure

layer2

Dynamic Loading

The browser decides, which documents to load with CSS3 Media Queries and view-port.

A loaded document will be cached in the browser.

tile

Global Coordinate System

SVG provides support for geographic coordinates.

However, we need to simplify an implementation, using a specific geographic coordinate system.

Global Coordinate System provides a function to share a coordinate system by declearing a common coordinate system between plural documents.

globalcoordinatesystem

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <GlobalCoordinateSystem id="gcs"
  transform="matrix(100,0,0,-100,0,0)"
  href="http://purl.org/crs/84"/>
 .....The actual content.....
</svg>

Attributes

This attribute specifies the global coordinates system of the SVG document. Therefor it is an identifier for a coordinate system.

This transform attribute specifies the conversion parameters from global coordinate system to user coordinate system of the document.

Transform

globalcoordinatesystem2

When transform is not declared, use transform(1,0,0,1,0,0) as a default.

Calculate Coordinate Example

<globalCoordinateSystem
  id="gcs"
  href="http://purl.org/crs/84"
  transform="matrix(3555.5555555555557,0.0,0.0,
  -3555.5555555555557,-490000.0,130125.82802869406)" />
 <g >
  <image xlink:href="http://ecn.t0.tiles.virtualearth.net/
    tiles/r133002100000.jpeg?g=849&mkt=ja-JP&shading=hill"
    preserveAspectRatio="none" x="0" y="0"
    width="312.5" height="251.002021"/>

matrix_1

script

def parse(args)
  a = args[0]
  b = args[1]
  c = args[2]
  d = args[3]
  e = args[4]
  f = args[5]
  xs = args[6]
  ys = args[7]
  ma = Matrix[[a, c],
              [b, d]]
  v = Vector[xs - e,
             ys - f]
  ret = ma.inv*v
  p ret
  p "#{ret[1]},#{ret[0]}"
end

Result

$ ruby convert_matrix.rb 3555.5555555555557 \
0.0 0.0 -3555.5555555555557 -490000.0 \
130125.82802869406 0 0
Vector[137.8125, 36.597889133070204]
"36.597889133070204,137.8125"

Browser Behavior

No browser behavior, such as drag scrolling and zooming with mouse wheel, is defined in this specification.

Browsers may provide basic behavior and other controls, such as zoom bars, that appear on a web page.

Summary

Implementation

Both, SVG Tiny 1.2 and Iframe proposal, have been implemented on many browsers.

Internet Explorer SVG Plugin

It's called svgmaptoolkit.

Supports Windows Vista (32bit), Windows XP, Windows 2000.

You can download from SVG MAP Lab.

AJAX

Animation tag version (SVG Tiny 1.2 SVGTL) is available.

Basic functions are implemented using Javascript.

It supports many modern browsers.

You can access from SVG Map developer information.

Chrominum version

Developed by KDDI partner.

It supports the IFrame proposal and GlobalCoordinateSystem.

We don't know the current status and where the patches are on internet :-(

Firefox add-on

Animation tag version (SVG Tiny 1.2 SVGTL) available.

It is based on AJAX implementation.

All code is available on Github: https://github.com/Georepublic/svgmap_addon.

Firefox Native

Iframe implementation is difficult in Firefox add-on, because Iframe in SVG is not avaliable and can't access the DOM tree. Also Firefox OS dosen't support add-on/extension.

We tried an implementation, but it currently doesn't work.

All code is also available on Github: https://github.com/Georepublic/mozilla-central.

firefox1

Demo

Plan

I will continue the native implmentation for Firefox.

I will submit an issue in bugzilla.

Thank you

Please contact me:

Link: