Your SlideShare is downloading. ×
0
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

4,058

Published on

Presentation done at GeoSummit 2012 …

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,058
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
34
Comments
1
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. GeosummitWeb mapping with vector data.Is it the future ?Cédric Moulletgeo.admin.ch / swisstopo
  • 2. Web
  • 3. Raster or vector?
  • 4. NOW ? …millions of tiles….
  • 5. How do we do thatnow ? 1. Prepare data 2. Define symbology 3. Generate tiles 4. Publish tiles 5. Render tiles
  • 6. Do you needinteractions ? … 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 foundNice highlight !
  • 8. Workaround 2: binary mask You can know that there is « something » Mouse interaction possible
  • 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. Vectors are not renderedServer roundtrip: slowBinary mask & UTF: problem with feature overlay– no vector information
  • 11. Any chance to render vectors client side ?
  • 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. Technology DataInternet Libraries
  • 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. 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. 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. 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. 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. 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. 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. Data & InternetThe user can only seewhat is on the screenBandwidth is limited
  • 22. Data ScreenAlways 1280 * 960 pixels (or a bit more or a bit less)
  • 23. Data Vector Datasets 7 Go 50 Mo 5 Mo12 ko Size from 0 to infinite (or a bit less)
  • 24. Bandwidth: 5 MB/s Internet 1400 s 10 s 1s 7 Go0.002 s 50 Mo 5 Mo 12 ko
  • 25. DataZoom level dependentstrategy
  • 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. 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. 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. 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. Thank you for your attentionCédric MoulletHead of FSDI Web Infrastructureswisstopo - COSIG cedric.moullet@swisstopo.ch cedricmoullet map.geo.admin.ch

×