Web mapping with vector data. Is it the future ? 2012
•
5 likes•4,116 views
Presentation done at GeoSummit 2012 Description of the challenges of vector rendering client side with geospatial data
Report
Share
Web mapping with vector data. Is it the future ? 2012
- 1. Geosummit Web mapping with vector data. Is it the future ? Cédric Moullet geo.admin.ch / swisstopo
- 2. Web
- 4. NOW ? …millions of tiles….
- 5. How do we do that now ? 1. Prepare data 2. Define symbology 3. Generate tiles 4. Publish tiles 5. Render tiles
- 6. Do you need interactions ? … workaround required …
- 7. Workaround 1: Server roundtrip What can I find at this mouse position ? Hover in the map Let me ask the database Here is it A point object has been found Nice highlight !
- 8. Workaround 2: binary mask You can know that there is « something » Mouse interaction possible
- 9. Workaround 3: UTF Grid UTFGrid provides a standard, scalable way of encoding data for hundreds or thousands of features alongside your map tiles. !######$$$$%%% %%%% % ! !#######$$$$%%% %%%! !!##### $$$%%% %%%! !###### $$$$%%% %% %%% ! !!!#### $$$$$%%%% %%%% ! ! !###### $$$$$$%%%%%%%%%% ! ! !!##### $$$$$$$%%%%%%%%% ! !!!!!#### $$$$$$%%%%%%%%%% ! !!!!!#### $$$$$$%%%%%%%%%% ! !!!!!#### $$$$$%%%%%%%%%%% ! !!!!!#####% $$ %%%%%%%%%%%! !!!!!### # %%%%%%%%%%%%! !!! ##### ''''%%%%%%%%%%%% ! ! ### ('%%%%%%%%%%%% ! ) ### # ( ((%%%%%%%%%%%% )) ## (((((%%%%%%%%%%%% ! ! Every character is associated )) # ) ****(+%%%%%%%%%%% %**++++%%%%%%%%% ! ! to a feature and its attribute . , , ------*+++++%%%%%%%%% ,,,,,------+++++++%%%%%%%% ! ! information .. /,,,,,,------++++++%%%%%%%%% ! . //,,,,,,------000++000%%%%%%% ! 211,,,,,33------00000000%%%%%% ! 2221,,,,33333---00000000000%%%% ! 222222,,,,3635550000000000000%%% ! 222222,,,,6665777008900000000%%% ! 22222::66666777788889900000 %%%% ! 22222:;;;;%%=7%8888890 0 %%%%! 22222;;;; ==??%%888888 00 %%%%% ! 222222 ;; =??%%%8888 %%%%! 222 ;; ?A>>@@@ B%! CCC ;; DEE@@@ BB! MapBox demonstrator
- 10. Vectors are not rendered Server roundtrip: slow Binary mask & UTF: problem with feature overlay – no vector information
- 11. Any chance to render vectors client side ?
- 12. Vector in Web: worflow 1. Vector Data Data stored in a database or in files Simplify and generalize data 2. Prepare Data Transform in appropriate format Service to deliver data 3. Publish Data 4. Render Data View data In browser
- 13. Technology Data Internet Libraries
- 14. Technology <canvas> is an HTML element WebGL (Web Graphics Library) is which can be used to draw a JavaScript API for rendering graphics via scripting (usually interactive 3D graphics within any JavaScript). Part of HTML5 specs. compatible web browser without the use of plug-ins. Extend canvas capabilities Scalable Vector Graphics (SVG) is Vector Markup Language (VML) is a family of specifications of an a deprecated XML language used XML-based file format for two- to produce vector graphics. dimensional vector graphics, both static and dynamic (i.e. interactive or animated).
- 15. OSS Libraries: Leaflet Web Site: http://leaflet.cloudmade.com/ Source Code: https://github.com/CloudMade/Leaflet/ Demo: http://leaflet.cloudmade.com/examples/geojson-example.html Vector renderers: SVG, VML + Modern, HTML5, CSS3 + Light + Simplicity - Limited - Less flexibility Vector rendering: limited to a few hundred of vector objects There are of course other + and -… I present only those that seem essential to me
- 16. OSS Libraries: Polymaps Web Site: http://polymaps.org/ Source Code: https://github.com/simplegeo/polymaps Demo: http://polymaps.org/ex/population.html Vector renderers: SVG + Light - Limited - Less flexibility - Buggy / no IE support Vector rendering: limited to a few hundred of vector objects There are of course other + and -… I present only those that seem essential to me
- 17. OSS Libraries: Tile5 Web Site: http://www.tile5.org/ Source Code: https://github.com/DamonOehlman/tile5 Demo: http://www.tile5.org/demos/playground/#geojson/world Vector renderers: canvas, webGL + Light - Limited - Only one maintainer Vector rendering: limited to a few hundreds of vector objects There are of course other + and -… I present only those that seem essential to me
- 18. OSS Libraries: Kothic JS Web Site: http://wiki.openstreetmap.org/wiki/Kothic_JS Source Code: https://github.com/kothic/kothic-js Demo: http://kothic.org/js/ Vector renderers: canvas + optimized tile format - focus on OSM - small community Vector rendering: limited to a few hundred of vector objects There are of course other + and -… I present only those that seem essential to me
- 19. OSS Libraries: OpenLayers Web Site: http://www.openlayers.org/ Source Code: https://github.com/openlayers/openlayers Demo: http://r2d2.stefanm.com/mapnik/demo.html Vector renderers: SVG, VML, canvas + Very complete + Widely used + Very good code quality + Support all browsers - More complex - Partial HTML5 support Vector rendering: limited to a few hundred of vector objects There are of course other + and -… I present only those that seem essential to me
- 20. Non OSS: GisCloud Web Site: http://www.giscloud.com/ Demo: http://www.giscloud.com/map/16594/germany-6000000-features Vector renderers: VML, canvas + impressive performance + SaaS + Replace desktop viewer - not standardized (tile format, rendering) - bad IE support Vector rendering: almost unlimited There are of course other + and -… I present only those that seem essential to me
- 21. Data & Internet The user can only see what is on the screen Bandwidth is limited
- 22. Data Screen Always 1280 * 960 pixels (or a bit more or a bit less)
- 23. Data Vector Datasets 7 Go 50 Mo 5 Mo 12 ko Size from 0 to infinite (or a bit less)
- 24. Bandwidth: 5 MB/s Internet 1400 s 10 s 1s 7 Go 0.002 s 50 Mo 5 Mo 12 ko
- 26. Data Strategy - Transfer only visible data (relative size bigger than one pixel, clustering for points) - Simplify geometry depending on zoom level (depending on pixel size) Optimization - Transfer data in binary format (« as » an image, for example) - Reduce coordinate information size by using relative coordinates - Use binary mask
- 27. WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D graphics within any compatible web Rendering browser without the use of plug-ins. WebGL works also for 2D and for raster Demo – Demo Client reprojection Client colorization Client rendering Client transformation Client treatment Thanks Tom Payne – Camptocamp – for the demo implementation (WebGLMaps)
- 28. Vector in Web: worflow 1. Vector Data Data stored in a database or in files Simplify and generalize data 2. Prepare Data Transform in appropriate format Service to deliver data Screen 3. Publish Data paradigm 4. Render Data View data In browser No standard WebGL
- 29. My 2 cents ü WebGL offers new possibilities client side ü OSS software will soon support WebGL (Ongoing code sprint about OpenLayers Three) ü Data generalization and simplification is essential (zoom level dependent) ü Display models are treated client side (SLD) - A standardized vector tile web service is missing
- 30. Thank you for your attention Cédric Moullet Head of FSDI Web Infrastructure swisstopo - COSIG cedric.moullet@swisstopo.ch cedricmoullet map.geo.admin.ch