Upload
moullet
View
3.894
Download
2
Tags:
Embed Size (px)
DESCRIPTION
Presentation done at GeoSummit 2012Description of the challenges of vector rendering client side with geospatial data
Citation preview
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]