WEB MAPSTILING &

LAYERING

Background

• Maps as fundamental as

<video>?

• Growth in mobile → more maps?

• Apple entering map space

What’s the problem?

• Current systems are closed

• Limited facility for:

• Offline access

• Ad-hoc sharing

• Mash-up data

• Web should be:

• “de-centralized, simple, cooperative”

• “autonomous, distributed, cooperative”

• Need for open approach

• KML just annotation within maps (POI)

• GML is XML Schema based, non-trivial

Disaster relief

What’s the problem?

• Current systems are closed

• Limited facility for:

• Offline access

• Ad-hoc sharing

• Mash-up data

• Web should be:

• “de-centralized, simple, cooperative”

• “autonomous, distributed, cooperative”

• Need for open approach

• KML just annotation within maps (POI)

• GML is XML Schema based, non-trivial

Source: https://www.w3.org/2011/Talks/kddi-201111.pdf

What is needed for maps in SVG?

• Tiling and layering

• Non-scaling stroke

• Shared paths

• Fixed-size objects

• Non-linear transformations

• UI features

• API features

Tiling and layering

• Hyperlinks

Source: http://www.w3.org/Submission/2011/SUBM-SVGTL-20110607/#Tiling

Cascading containers

Source: http://www.w3.org/Submission/2011/SUBM-SVGTL-20110607/#Tiling

Container file

<svg xmlns="http://www.w3.org/2000/svg" viewBox="20 110 120 85">

<globalCoordinateSystem

srsName="http://purl.org/crs/84"

transform="matrix(15.3631,0.0,0.0,-18.6994,-1889.2916,849.9202)"/>

<animation x="0" y="0" width="100" height="70" xlink:href="0_0.svg"/>

<animation x="100" y="0" width="100" height="70" xlink:href="1_0.svg"/>

<animation x="200" y="0" width="100" height="70" xlink:href="2_0.svg"/>

<animation x="0" y="70" width="100" height="70" xlink:href="0_1.svg"/>

<animation x="100" y="70" width="100" height="70" xlink:href="1_1.svg"/>

<animation x="200" y="70" width="100" height="70" xlink:href="2_1.svg"/>

<animation x="0" y="140" width="100" height="70" xlink:href="0_2.svg"/>

<animation x="100" y="140" width="100" height="70" xlink:href="1_2.svg"/>

<animation x="200" y="140" width="100" height="70" xlink:href="2_2.svg"/>

</svg>

<globalCoordinateSystem>

<globalCoordinateSystem

srsName="http://purl.org/crs/84"

transform="matrix(15.3631,0.0,0.0,-18.6994,-1889.2916,849.9202)"/>

Layering

Source: http://www.w3.org/Submission/2011/SUBM-SVGTL-20110607/#Layering

Min & max zoom

<svg>

<circle cy="100" cy="100" visibleMinZoom="100" visibleMaxZoom="200"/>

</svg>

Applicability beyond maps

• Medical imagery?

• Large images in general

(c.f. SVG 1.2F's multires proposal)

• Building blueprints?

• Games?

What is needed for maps in SVG?

• Tiling and layering

• Non-scaling stroke ✓

• Shared paths – SVG 2?

• Fixed-size objects – transform-ref? SVG 2?

• Non-linear transformations ×

• UI features

• API features

UI features

• Built-in map controls ×

• Programming-less geolocation ×

• SVG views with geographic coords ?

• Media frag? xywh=degree:lng,lat,w,h ?

API features

• API for smooth transition action of

zooming, panning, rotating

• Transformation functions between global/geospatial

coordinate systems and user/viewport coordinate systems

• DOM access API for cascading SVG documents

• i.e. SVGTileElement.contentDocument/contentWindow

Resources

• Spec: http://ww.w3.org/Submission/2011/SUBM-SVGTL-

20110607/

• Offline Web Applications for Disaster Relief -

http://www.w3.org/2011/web-apps-ws/papers/KDDI.html

• Presentations by Takagi-san:

• https://www.w3.org/2011/Talks/kddi-201111.pdf

• http://www.slideshare.net/totipalmate/proposal-of-svg-map-

8157601

Mozilla position

• Map UIs are very complex• E.g. positioning of labels, integration with WebGL etc.

• Hard to imagine a subset that is implementable in all browsers and still competitive with existing map services

• Better to agree on standard markup and create at least one open source Web app to display it.• i.e. client-side but not browser-native

• Tiling is generally useful beyond maps• Suggest <iframe> for SVG

• Combined with load-on-demand facility and zoom-level control