Presentation done at GeoSummit 2012 Description of the challenges of vector rendering client side with geospatial data

1. Geosummit
Web mapping with vector data.
Is it the future ?
Cédric Moullet
geo.admin.ch / swisstopo

2. Web

3. Raster or vector?

4. NOW ?
…millions of tiles….

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

6. Do you need
interactions ?
… 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 found
Nice highlight !

8. Workaround 2: binary mask
You can know that there is « something »
Mouse interaction possible

9. Workaround 3: UTF Grid
UTFGrid provides a standard, scalable way of encoding data for hundreds or
thousands 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 rendered
Server roundtrip: slow
Binary mask & UTF: problem with feature overlay
– no vector information

11. Any chance to render vectors
client side ?

12. Vector in Web: worflow
1. 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 Data
Internet Libraries

14. Technology
<canvas> is an HTML element WebGL (Web Graphics Library) is
which can be used to draw a JavaScript API for rendering
graphics via scripting (usually interactive 3D graphics within any
JavaScript). Part of HTML5 specs. compatible web browser without
the use of plug-ins.
Extend canvas capabilities
Scalable Vector Graphics (SVG) is Vector Markup Language (VML) is
a family of specifications of an a deprecated XML language used
XML-based file format for two- to produce vector graphics.
dimensional vector graphics, both
static and dynamic (i.e. interactive
or animated).

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

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

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

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

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

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

21. Data & Internet
The user can only see
what is on the screen
Bandwidth is limited

22. Data
Screen
Always 1280 * 960 pixels
(or a bit more or a bit less)

23. Data
Vector Datasets
7 Go
50 Mo
5 Mo
12 ko
Size from 0 to infinite
(or a bit less)

24. Bandwidth: 5 MB/s Internet
1400 s
10 s
1s 7 Go
0.002 s 50 Mo
5 Mo
12 ko

25. Data
Zoom level dependent
strategy

26. Data
Strategy
- Transfer only visible data (relative size bigger than one
pixel, clustering for points)
- Simplify geometry depending on zoom level (depending on
pixel size)
Optimization
- Transfer data in binary format (« as » an image, for
example)
- Reduce coordinate information size by using relative
coordinates
- Use binary mask

27. WebGL (Web Graphics Library) is a
JavaScript API for rendering interactive 3D
graphics within any compatible web
Rendering
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)

28. Vector in Web: worflow
1. 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 (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

30. Thank you for your attention
Cédric Moullet
Head of FSDI Web Infrastructure
swisstopo - COSIG
cedric.moullet@swisstopo.ch
cedricmoullet map.geo.admin.ch