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

GeosummitWeb mapping with vector data.Is it the future ?Cédric Moulletgeo.admin.ch / swisstopo

Raster or vector?

NOW ? …millions of tiles….

How do we do thatnow ? 1. Prepare data 2. Define symbology 3. Generate tiles 4. Publish tiles 5. Render tiles

Do you needinteractions ? … workaround required …

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 !

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 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

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 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

Technology DataInternet Libraries

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).

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

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

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

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

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

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

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 Mo12 ko Size from 0 to infinite (or a bit less)

Bandwidth: 5 MB/s Internet 1400 s 10 s 1s 7 Go0.002 s 50 Mo 5 Mo 12 ko

DataZoom level dependentstrategy

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

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)

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

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

Thank you for your attentionCédric MoulletHead of FSDI Web Infrastructureswisstopo - COSIG cedric.moullet@swisstopo.ch cedricmoullet map.geo.admin.ch

http://mj89sp3sau2k7lj1eg3k40hkeppguj6j-a-sites-opensocial.googleusercontent.com	448
https://twitter.com	13
http://us-w1.rockmelt.com	1
http://map.geo.admin.ch&_=1353341484629 HTTP	1
http://map.geo.admin.ch&_=1353341603561 HTTP	1
https://si0.twimg.com	1
http://www.linkedin.com	1

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

by Moullet on Jun 20, 2012

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 466

Statistics

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