1. Open Source Web Mapping Frameworks
Time for going vector?
ˇ
´
Jachym Cepick´ 1
y
1 Geosense
s.r.o. http://geosense.cz
GIS Ostrava 2014

2. TOC
1
Open Source Web Mapping Frameworks
2
Comparing OS Mapping libraries
3
Results
4
Discussion

3. TOC
1
Open Source Web Mapping Frameworks
2
Comparing OS Mapping libraries
3
Results
4
Discussion

4. OpenLayers http://openlayers.org
Leaflet http://leafletjs.org
OpenLayers 3 http://ol3js.org

5. OpenLayers
since 2005, Metacarta
since 2007, OSGeo project
7 021 commits made by 103 contributors
126 179 lines of code
BSD license

6. Leaflet
since 2010, Vladimir Agafonkin
3 041 commits made by 164 contributors
6 466 lines of code
BSD license

7. OpenLayers 3
since 2012
number of commits: hard to eastimate (originaly based on
OL2)
101 594 lines of code
BSD license

8. TOC
1
Open Source Web Mapping Frameworks
2
Comparing OS Mapping libraries
3
Results
4
Discussion

9. OpenLayer 2
Size1
Backend
Build system
1
Leaflet
OpenLayers 3
1000 kB
none
custom
91 kB
none
custom
291 kB
closure library
closure
Size may vary, depending on features used. Those are sizes used for
purpose of this presentation. The numbers are just ilustrative, no heavy
optimalization was done.

10. TOC
1
Open Source Web Mapping Frameworks
2
Comparing OS Mapping libraries
3
Results
4
Discussion

11. Testing environment
Hardware: 8GB RAM, 4-Core Intel(R) Core(TM) i5-3210M
CPU @ 2.50GHz
Browser: Chromium 31.0.1650.63
Operating system: Ubuntu 13.10, 64bit

12. Testing environment
Hardware: 8GB RAM, 4-Core Intel(R) Core(TM) i5-3210M
CPU @ 2.50GHz
Browser: Chromium 31.0.1650.63
Operating system: Ubuntu 13.10, 64bit

13. Testing environment
Hardware: 8GB RAM, 4-Core Intel(R) Core(TM) i5-3210M
CPU @ 2.50GHz
Browser: Chromium 31.0.1650.63
Operating system: Ubuntu 13.10, 64bit

14. Tasks
1
Render features2
2
Pan3
3
Two tryes n×1000 features and n×10 000 features
2
Just rendering. Data loading and parsing is done before mesurement
was started
3
No zoom provided. About 50% of screen bounding box was shift

15. Tasks
1
Render features2
2
Pan3
3
Two tryes n×1000 features and n×10 000 features
2
Just rendering. Data loading and parsing is done before mesurement
was started
3
No zoom provided. About 50% of screen bounding box was shift

16. Tasks
1
Render features2
2
Pan3
3
Two tryes n×1000 features and n×10 000 features
2
Just rendering. Data loading and parsing is done before mesurement
was started
3
No zoom provided. About 50% of screen bounding box was shift

17. Data
OpenStreetMap data, Czech republic, 14.373, 49.147, 14.822,
49.440
1
2
3
4
Points ∼ 5 000, ∼
=
=
35 000
Lines ∼ 1 700, ∼ 10 000
=
=
Polygons ∼ 8 000, ∼
=
=
50 000
Transformed into SRS of
the map

18. Data
OpenStreetMap data, Czech republic, 14.373, 49.147, 14.822,
49.440
1
2
3
4
Points ∼ 5 000, ∼
=
=
35 000
Lines ∼ 1 700, ∼ 10 000
=
=
Polygons ∼ 8 000, ∼
=
=
50 000
Transformed into SRS of
the map

19. Data
OpenStreetMap data, Czech republic, 14.373, 49.147, 14.822,
49.440
1
2
3
4
Points ∼ 5 000, ∼
=
=
35 000
Lines ∼ 1 700, ∼ 10 000
=
=
Polygons ∼ 8 000, ∼
=
=
50 000
Transformed into SRS of
the map

20. Data
OpenStreetMap data, Czech republic, 14.373, 49.147, 14.822,
49.440
1
2
3
4
Points ∼ 5 000, ∼
=
=
35 000
Lines ∼ 1 700, ∼ 10 000
=
=
Polygons ∼ 8 000, ∼
=
=
50 000
Transformed into SRS of
the map

21. Disclamer
Disclamer
Numbers shown in this presentation are specific for used
hardware, operating system, browser, position of stars and sun
and other external conditions.
They are not meant to be taken as they are. They are here for
illustration purpose, to demonstrate relative differences
between various rendering techniques and libraries.

22. Icons versus no-style
No-style versus image icons

23. points rendering
LeafletDOM
5k
35k
OL2DOM
OL2IconsDOM
OL2Canvas
OL2IconsCanvas
5.63
60.00
1.50
8.80
2.10
7.70
2.20
1.60
12.50
8.70
points rendering [s]
OL3Canvas
OL3CanvasIcons
OL3Apibranch
3.70
19.30
2.80
9.00
0.14
0.70
OL3ApibranchIcons
0.13
0.70

24. points panning
LeafletDOM
5k
35k
OL2DOM
OL2IconsDOM
OL2Canvas
OL2IconsCanvas
0.80
2.30
0.10
2.80
0.11
1.10
1.00
0.81
10.00
6.46
points panning [s]
OL3Canvas
OL3CanvasIcons
OL3Apibranch
0.15
0.59
0.15
0.16
0.09
0.45
OL3ApibranchIcons
0.09
0.46

25. polygon rendering
Leaflet-Canvas
8k
50k
OL2-DOM
0.90
4.10
3.19
21.80
OL2-Canvas
2.64
12.93
polygon rendering [s]
OL3-Canvas
0.16
18.00
OL3-ApiBranch
0.58
2.81

26. lines rendering
Leaflet-Canvas
1.7k
10k
OL2-DOM
0.27
1.48
0.77
6.24
OL2-Canvas
0.65
3.14
lines rendering [s]
OL3-Canvas
0.41
3.60
OL3-Apibranch
0.12
0.43

27. lines panning
Leaflet-Canvas
1.7k
10k
OL2-DOM
0.15
0.78
0.12
0.20
OL2-Canvas
0.45
2.52
lines panning [s]
OL3-Canvas
0.18
0.11
OL3-Apibranch
0.03
0.20

28. polygon panning
Leaflet-Canvas
8k
50k
OL2-DOM
1.00
1.94
0.18
0.42
OL2-Canvas
1.74
10.57
polygon panning [s]
OL3-Canvas
0.11
0.12
OL3-Apibranch
0.19
0.70

29. Result
1
OpenLayers 3 Api Branch
2
Leaflet 0.8-dev
3
OpenLayers 2 Canvas

30. Result
1
OpenLayers 3 Api Branch
2
Leaflet 0.8-dev
3
OpenLayers 2 Canvas

31. Result
1
OpenLayers 3 Api Branch
2
Leaflet 0.8-dev
3
OpenLayers 2 Canvas

32. TOC
1
Open Source Web Mapping Frameworks
2
Comparing OS Mapping libraries
3
Results
4
Discussion

33. DOM vs. Canvas
Image point icons versus no-style points
Code / Speed ratio
Parsing
Bright future: WebGL

34. DOM vs. Canvas
Image point icons versus no-style points
Code / Speed ratio
Parsing
Bright future: WebGL

35. DOM vs. Canvas
Image point icons versus no-style points
Code / Speed ratio
Parsing
Bright future: WebGL

36. DOM vs. Canvas
Image point icons versus no-style points
Code / Speed ratio
Parsing
Bright future: WebGL

37. DOM vs. Canvas
Image point icons versus no-style points
Code / Speed ratio
Parsing
Bright future: WebGL

38. DOM versus Canvas
DOM
Canvas

39. Optimalizations
Data indexing
Generalization
Clustering
Optimal rendering engine (DOM (SVG — VML) vs. Canvas
vs. WebGL)
Hardware improvements, browser improvements

40. Optimalizations
Data indexing
Generalization
Clustering
Optimal rendering engine (DOM (SVG — VML) vs. Canvas
vs. WebGL)
Hardware improvements, browser improvements

41. Optimalizations
Data indexing
Generalization
Clustering
Optimal rendering engine (DOM (SVG — VML) vs. Canvas
vs. WebGL)
Hardware improvements, browser improvements

42. Optimalizations
Data indexing
Generalization
Clustering
Optimal rendering engine (DOM (SVG — VML) vs. Canvas
vs. WebGL)
Hardware improvements, browser improvements

43. Optimalizations
Data indexing
Generalization
Clustering
Optimal rendering engine (DOM (SVG — VML) vs. Canvas
vs. WebGL)
Hardware improvements, browser improvements

44. Happy web mapping!
jachym.cepicky@gmail.com jachym.cepicky@geosense.cz
http://les-ejk.cz http://geosense.cz
@jachymc