Download - Web maps
![Page 1: Web maps](https://reader035.vdocument.in/reader035/viewer/2022081404/5598258b1a28abe5488b473e/html5/thumbnails/1.jpg)
WEB MAPSTILING &
LAYERING
![Page 2: Web maps](https://reader035.vdocument.in/reader035/viewer/2022081404/5598258b1a28abe5488b473e/html5/thumbnails/2.jpg)
Background
• Maps as fundamental as
<video>?
• Growth in mobile → more maps?
• Apple entering map space
![Page 3: Web maps](https://reader035.vdocument.in/reader035/viewer/2022081404/5598258b1a28abe5488b473e/html5/thumbnails/3.jpg)
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
![Page 4: Web maps](https://reader035.vdocument.in/reader035/viewer/2022081404/5598258b1a28abe5488b473e/html5/thumbnails/4.jpg)
Disaster relief
![Page 5: Web maps](https://reader035.vdocument.in/reader035/viewer/2022081404/5598258b1a28abe5488b473e/html5/thumbnails/5.jpg)
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
![Page 6: Web maps](https://reader035.vdocument.in/reader035/viewer/2022081404/5598258b1a28abe5488b473e/html5/thumbnails/6.jpg)
Source: https://www.w3.org/2011/Talks/kddi-201111.pdf
![Page 7: Web maps](https://reader035.vdocument.in/reader035/viewer/2022081404/5598258b1a28abe5488b473e/html5/thumbnails/7.jpg)
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
![Page 8: Web maps](https://reader035.vdocument.in/reader035/viewer/2022081404/5598258b1a28abe5488b473e/html5/thumbnails/8.jpg)
Tiling and layering
• Hyperlinks
Source: http://www.w3.org/Submission/2011/SUBM-SVGTL-20110607/#Tiling
![Page 9: Web maps](https://reader035.vdocument.in/reader035/viewer/2022081404/5598258b1a28abe5488b473e/html5/thumbnails/9.jpg)
Cascading containers
Source: http://www.w3.org/Submission/2011/SUBM-SVGTL-20110607/#Tiling
![Page 10: Web maps](https://reader035.vdocument.in/reader035/viewer/2022081404/5598258b1a28abe5488b473e/html5/thumbnails/10.jpg)
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>
![Page 11: Web maps](https://reader035.vdocument.in/reader035/viewer/2022081404/5598258b1a28abe5488b473e/html5/thumbnails/11.jpg)
<globalCoordinateSystem>
<globalCoordinateSystem
srsName="http://purl.org/crs/84"
transform="matrix(15.3631,0.0,0.0,-18.6994,-1889.2916,849.9202)"/>
![Page 12: Web maps](https://reader035.vdocument.in/reader035/viewer/2022081404/5598258b1a28abe5488b473e/html5/thumbnails/12.jpg)
Layering
Source: http://www.w3.org/Submission/2011/SUBM-SVGTL-20110607/#Layering
![Page 13: Web maps](https://reader035.vdocument.in/reader035/viewer/2022081404/5598258b1a28abe5488b473e/html5/thumbnails/13.jpg)
Min & max zoom
<svg>
<circle cy="100" cy="100" visibleMinZoom="100" visibleMaxZoom="200"/>
</svg>
![Page 14: Web maps](https://reader035.vdocument.in/reader035/viewer/2022081404/5598258b1a28abe5488b473e/html5/thumbnails/14.jpg)
Applicability beyond maps
• Medical imagery?
• Large images in general
(c.f. SVG 1.2F's multires proposal)
• Building blueprints?
• Games?
![Page 15: Web maps](https://reader035.vdocument.in/reader035/viewer/2022081404/5598258b1a28abe5488b473e/html5/thumbnails/15.jpg)
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
![Page 16: Web maps](https://reader035.vdocument.in/reader035/viewer/2022081404/5598258b1a28abe5488b473e/html5/thumbnails/16.jpg)
UI features
• Built-in map controls ×
• Programming-less geolocation ×
• SVG views with geographic coords ?
• Media frag? xywh=degree:lng,lat,w,h ?
![Page 17: Web maps](https://reader035.vdocument.in/reader035/viewer/2022081404/5598258b1a28abe5488b473e/html5/thumbnails/17.jpg)
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
![Page 18: Web maps](https://reader035.vdocument.in/reader035/viewer/2022081404/5598258b1a28abe5488b473e/html5/thumbnails/18.jpg)
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
![Page 19: Web maps](https://reader035.vdocument.in/reader035/viewer/2022081404/5598258b1a28abe5488b473e/html5/thumbnails/19.jpg)
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