GeosummitWeb mapping with vector data.Is it the future ?Cédric Moulletgeo.admin.ch / swisstopo
Web
Raster or vector?
NOW ?        …millions of tiles….
How do we do thatnow ?          1. Prepare data          2. Define symbology          3. Generate tiles          4. Publis...
Do you needinteractions ?    … workaround required …
Workaround 1: Server roundtrip                   What can I find at this mouse position ?Hover in the map                 ...
Workaround 2: binary mask  You can know that there is « something »        Mouse interaction possible
Workaround 3: UTF GridUTFGrid provides a standard, scalable way of encoding data for hundreds orthousands of features alon...
Vectors are not renderedServer roundtrip: slowBinary mask & UTF: problem with feature overlay– no vector information
Any chance to render vectors                   client side ?
Vector in Web: worflow1. Vector Data   Data stored in a database or in files                                              ...
Technology       DataInternet     Libraries
Technology<canvas> is an HTML element            WebGL (Web Graphics Library) iswhich can be used to draw              a J...
OSS Libraries: LeafletWeb Site: http://leaflet.cloudmade.com/Source Code: https://github.com/CloudMade/Leaflet/Demo: http:...
OSS Libraries: PolymapsWeb Site: http://polymaps.org/Source Code: https://github.com/simplegeo/polymapsDemo: http://polyma...
OSS Libraries: Tile5Web Site: http://www.tile5.org/Source Code: https://github.com/DamonOehlman/tile5Demo: http://www.tile...
OSS Libraries: Kothic JSWeb Site: http://wiki.openstreetmap.org/wiki/Kothic_JSSource Code: https://github.com/kothic/kothi...
OSS Libraries: OpenLayersWeb Site: http://www.openlayers.org/Source Code: https://github.com/openlayers/openlayersDemo: ht...
Non OSS: GisCloudWeb Site: http://www.giscloud.com/Demo: http://www.giscloud.com/map/16594/germany-6000000-featuresVector ...
Data & InternetThe user can only seewhat is on the screenBandwidth is limited
Data        ScreenAlways 1280 * 960 pixels    (or a bit more or a bit less)
Data               Vector Datasets                                           7 Go                       50 Mo        5 Mo1...
Bandwidth: 5 MB/s        Internet                         1400 s                 10 s          1s              7 Go0.002 s...
DataZoom level dependentstrategy
DataStrategy- Transfer only visible data (relative size bigger than onepixel, clustering for points)-  Simplify geometry d...
WebGL (Web Graphics Library) is aJavaScript API for rendering interactive 3Dgraphics within any compatible web            ...
Vector in Web: worflow1. Vector Data   Data stored in a database or in files                                              ...
My 2 centsü  WebGL offers new possibilities client sideü  OSS software will soon support WebGL (Ongoingcode sprint about...
Thank you for your attentionCédric MoulletHead of FSDI Web Infrastructureswisstopo - COSIG     cedric.moullet@swisstopo.ch...
Upcoming SlideShare
Loading in...5
×

Web mapping with vector data. Is it the future ? 2012

4,193

Published on

Presentation done at GeoSummit 2012
Description of the challenges of vector rendering client side with geospatial data

Published in: Technology, Art & Photos
1 Comment
3 Likes
Statistics
Notes
  • Thanks, that is an excellent presentation !
    I also found this document, which is a nice ressource on this topic:
    http://dx.doi.org/10.1007/978-3-642-33024-7_7
    http://www.ahahah.eu/data/doc/gisscience2012_gaffuri_draft.pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
4,193
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
35
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Web mapping with vector data. Is it the future ? 2012

  1. 1. GeosummitWeb mapping with vector data.Is it the future ?Cédric Moulletgeo.admin.ch / swisstopo
  2. 2. Web
  3. 3. Raster or vector?
  4. 4. NOW ? …millions of tiles….
  5. 5. How do we do thatnow ? 1. Prepare data 2. Define symbology 3. Generate tiles 4. Publish tiles 5. Render tiles
  6. 6. Do you needinteractions ? … workaround required …
  7. 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 foundNice highlight !
  8. 8. Workaround 2: binary mask You can know that there is « something » Mouse interaction possible
  9. 9. Workaround 3: UTF GridUTFGrid provides a standard, scalable way of encoding data for hundreds orthousands 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. 10. Vectors are not renderedServer roundtrip: slowBinary mask & UTF: problem with feature overlay– no vector information
  11. 11. Any chance to render vectors client side ?
  12. 12. Vector in Web: worflow1. 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. 13. Technology DataInternet Libraries
  14. 14. Technology<canvas> is an HTML element WebGL (Web Graphics Library) iswhich can be used to draw a JavaScript API for renderinggraphics via scripting (usually interactive 3D graphics within anyJavaScript). Part of HTML5 specs. compatible web browser without the use of plug-ins. Extend canvas capabilitiesScalable Vector Graphics (SVG) is Vector Markup Language (VML) isa family of specifications of an a deprecated XML language usedXML-based file format for two- to produce vector graphics.dimensional vector graphics, bothstatic and dynamic (i.e. interactiveor animated).
  15. 15. OSS Libraries: LeafletWeb Site: http://leaflet.cloudmade.com/Source Code: https://github.com/CloudMade/Leaflet/Demo: http://leaflet.cloudmade.com/examples/geojson-example.htmlVector renderers: SVG, VML+ Modern, HTML5, CSS3+ Light+ Simplicity-  Limited-  Less flexibilityVector 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. 16. OSS Libraries: PolymapsWeb Site: http://polymaps.org/Source Code: https://github.com/simplegeo/polymapsDemo: http://polymaps.org/ex/population.htmlVector renderers: SVG+ Light-  Limited-  Less flexibility-  Buggy / no IE supportVector 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. 17. OSS Libraries: Tile5Web Site: http://www.tile5.org/Source Code: https://github.com/DamonOehlman/tile5Demo: http://www.tile5.org/demos/playground/#geojson/worldVector renderers: canvas, webGL+ Light-  Limited-  Only one maintainerVector 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. 18. OSS Libraries: Kothic JSWeb Site: http://wiki.openstreetmap.org/wiki/Kothic_JSSource Code: https://github.com/kothic/kothic-jsDemo: http://kothic.org/js/Vector renderers: canvas+ optimized tile format-  focus on OSM-  small communityVector 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. 19. OSS Libraries: OpenLayersWeb Site: http://www.openlayers.org/Source Code: https://github.com/openlayers/openlayersDemo: http://r2d2.stefanm.com/mapnik/demo.htmlVector renderers: SVG, VML, canvas+ Very complete+ Widely used+ Very good code quality+ Support all browsers-  More complex-  Partial HTML5 supportVector 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. 20. Non OSS: GisCloudWeb Site: http://www.giscloud.com/Demo: http://www.giscloud.com/map/16594/germany-6000000-featuresVector renderers: VML, canvas+ impressive performance+ SaaS+ Replace desktop viewer-  not standardized (tile format, rendering)-  bad IE supportVector rendering: almost unlimited There are of course other + and -… I present only those that seem essential to me
  21. 21. Data & InternetThe user can only seewhat is on the screenBandwidth is limited
  22. 22. Data ScreenAlways 1280 * 960 pixels (or a bit more or a bit less)
  23. 23. Data Vector Datasets 7 Go 50 Mo 5 Mo12 ko Size from 0 to infinite (or a bit less)
  24. 24. Bandwidth: 5 MB/s Internet 1400 s 10 s 1s 7 Go0.002 s 50 Mo 5 Mo 12 ko
  25. 25. DataZoom level dependentstrategy
  26. 26. DataStrategy- Transfer only visible data (relative size bigger than onepixel, clustering for points)-  Simplify geometry depending on zoom level (depending onpixel size)Optimization- Transfer data in binary format (« as » an image, forexample)-  Reduce coordinate information size by using relativecoordinates-  Use binary mask
  27. 27. WebGL (Web Graphics Library) is aJavaScript API for rendering interactive 3Dgraphics within any compatible web Renderingbrowser without the use of plug-ins.WebGL works also for 2D and for rasterDemo – Demo Client reprojection Client colorization Client rendering Client transformation Client treatmentThanks Tom Payne – Camptocamp – for the demo implementation (WebGLMaps)
  28. 28. Vector in Web: worflow1. 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. 29. My 2 centsü  WebGL offers new possibilities client sideü  OSS software will soon support WebGL (Ongoingcode 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. 30. Thank you for your attentionCédric MoulletHead of FSDI Web Infrastructureswisstopo - COSIG cedric.moullet@swisstopo.ch cedricmoullet map.geo.admin.ch
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×