web mapping with vector data. is it the future ? 2012
DESCRIPTION
Presentation done at GeoSummit 2012Description of the challenges of vector rendering client side with geospatial dataTRANSCRIPT
Geosummit
Web mapping with vector data. Is it the future ?
Cédric Moullet geo.admin.ch / swisstopo
Web
Raster or vector?
NOW ?
…millions of tiles….
How do we do that now ?
1. Prepare data 2. Define symbology 3. Generate tiles 4. Publish tiles 5. Render tiles
Do you need interactions ?
… workaround required …
Workaround 1: Server roundtrip
Hover in the map
What can I find at this mouse position ?
Let me ask the database
Here is it A point object has been found
Nice highlight !
Workaround 2: binary mask
You can know that there is « something » Mouse interaction possible
Workaround 3: UTF Grid
MapBox demonstrator
UTFGrid provides a standard, scalable way of encoding data for hundreds or thousands of features alongside your map tiles.
!######$$$$%%% %%%% % ! !#######$$$$%%% %%%! !!##### $$$%%% %%%! !###### $$$$%%% %% %%%! !!!#### $$$$$%%%% %%%%! ! !###### $$$$$$%%%%%%%%%%! ! !!##### $$$$$$$%%%%%%%%%! !!!!!#### $$$$$$%%%%%%%%%%! !!!!!#### $$$$$$%%%%%%%%%%! !!!!!#### $$$$$%%%%%%%%%%%! !!!!!#####% $$ %%%%%%%%%%%! !!!!!### # %%%%%%%%%%%%! !!! ##### ''''%%%%%%%%%%%%! ! ### ('%%%%%%%%%%%%! ) ### # ( ((%%%%%%%%%%%%! )) ## (((((%%%%%%%%%%%%! )) # ****(+%%%%%%%%%%%! ) %**++++%%%%%%%%%! , , ------*+++++%%%%%%%%%!. ,,,,,------+++++++%%%%%%%%!.. /,,,,,,------++++++%%%%%%%%%!. //,,,,,,------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!
Every character is associated to a feature and its attribute information
Vectors are not rendered
Server roundtrip: slow Binary mask & UTF: problem with feature overlay – no vector information
Any chance to render vectors
client side ?
Vector in Web: worflow 1. Vector Data
2. Prepare Data
3. Publish Data
4. Render Data
Data stored in a database or in files
Simplify and generalize data Transform in appropriate format
Service to deliver data
View data In browser
Technology Data
Internet Libraries
Technology <canvas> is an HTML element which can be used to draw graphics via scripting (usually JavaScript). Part of HTML5 specs.
WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D graphics within any compatible web browser without the use of plug-ins. Extend canvas capabilities
Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated).
Vector Markup Language (VML) is a deprecated XML language used to produce vector graphics.
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
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
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
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
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
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
Data & Internet
The user can only see what is on the screen Bandwidth is limited
Data
Always 1280 * 960 pixels (or a bit more or a bit less)
Screen
Data Vector Datasets
12 ko
5 Mo
50 Mo
7 Go
Size from 0 to infinite (or a bit less)
Internet
12 ko
5 Mo
50 Mo
7 Go
Bandwidth: 5 MB/s
0.002 s
1 s
10 s
1400 s
Data
Zoom level dependent strategy
Strategy - Transfer only visible data (relative size bigger than one pixel, clustering for points) - Simplify geometry depending on zoom level (depending on pixel size)
Data
Optimization - Transfer data in binary format (« as » an image, for example) - Reduce coordinate information size by using relative coordinates - Use binary mask
Rendering WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D graphics within any compatible web 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)
Vector in Web: worflow 1. Vector Data
2. Prepare Data
3. Publish Data
4. Render Data
Data stored in a database or in files
Simplify and generalize data Transform in appropriate format
Service to deliver data
View data In browser
Screen paradigm
No standard WebGL
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
Thank you for your attention
cedricmoullet map.geo.admin.ch
Cédric Moullet Head of FSDI Web Infrastructure swisstopo - COSIG [email protected]