web mapping with vector data. is it the future ? 2012

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 cedric.moullet@swisstopo.ch