Embed Size (px)
Citation preview
Open Source Web Mapping FrameworksTime for going vector?
Jachym Cepicky1
1Geosense s.r.o. http://geosense.cz
GIS Ostrava 2014
TOC
1 Open Source Web Mapping Frameworks
2 Comparing OS Mapping libraries
3 Results
4 Discussion
TOC
1 Open Source Web Mapping Frameworks
2 Comparing OS Mapping libraries
3 Results
4 Discussion
OpenLayers http://openlayers.orgLeaflet http://leafletjs.orgOpenLayers 3 http://ol3js.org
OpenLayers
since 2005, Metacartasince 2007, OSGeo project7 021 commits made by 103 contributors126 179 lines of codeBSD license
Leaflet
since 2010, Vladimir Agafonkin3 041 commits made by 164 contributors6 466 lines of codeBSD license
OpenLayers 3
since 2012number of commits: hard to eastimate (originaly based onOL2)101 594 lines of codeBSD license
TOC
1 Open Source Web Mapping Frameworks
2 Comparing OS Mapping libraries
3 Results
4 Discussion
OpenLayer 2 Leaflet OpenLayers 3Size1 1000 kB 91 kB 291 kBBackend none none closure libraryBuild system custom custom closure
1Size may vary, depending on features used. Those are sizes used forpurpose of this presentation. The numbers are just ilustrative, no heavyoptimalization was done.
TOC
1 Open Source Web Mapping Frameworks
2 Comparing OS Mapping libraries
3 Results
4 Discussion
Testing environment
Hardware: 8GB RAM, 4-Core Intel(R) Core(TM) i5-3210MCPU @ 2.50GHzBrowser: Chromium 31.0.1650.63Operating system: Ubuntu 13.10, 64bit
Testing environment
Hardware: 8GB RAM, 4-Core Intel(R) Core(TM) i5-3210MCPU @ 2.50GHzBrowser: Chromium 31.0.1650.63Operating system: Ubuntu 13.10, 64bit
Testing environment
Hardware: 8GB RAM, 4-Core Intel(R) Core(TM) i5-3210MCPU @ 2.50GHzBrowser: Chromium 31.0.1650.63Operating system: Ubuntu 13.10, 64bit
Tasks
1 Render features2
2 Pan3
3 Two tryes n×1000 features and n×10 000 features
2Just rendering. Data loading and parsing is done before mesurementwas started
3No zoom provided. About 50% of screen bounding box was shift
Tasks
1 Render features2
2 Pan3
3 Two tryes n×1000 features and n×10 000 features
2Just rendering. Data loading and parsing is done before mesurementwas started
3No zoom provided. About 50% of screen bounding box was shift
Tasks
1 Render features2
2 Pan3
3 Two tryes n×1000 features and n×10 000 features
2Just rendering. Data loading and parsing is done before mesurementwas started
3No zoom provided. About 50% of screen bounding box was shift
Data
OpenStreetMap data, Czech republic, 14.373, 49.147, 14.822,49.440
1 Points ∼= 5 000, ∼=35 000
2 Lines ∼= 1 700, ∼= 10 0003 Polygons ∼= 8 000, ∼=
50 0004 Transformed into SRS of
the map
Data
OpenStreetMap data, Czech republic, 14.373, 49.147, 14.822,49.440
1 Points ∼= 5 000, ∼=35 000
2 Lines ∼= 1 700, ∼= 10 0003 Polygons ∼= 8 000, ∼=
50 0004 Transformed into SRS of
the map
Data
OpenStreetMap data, Czech republic, 14.373, 49.147, 14.822,49.440
1 Points ∼= 5 000, ∼=35 000
2 Lines ∼= 1 700, ∼= 10 0003 Polygons ∼= 8 000, ∼=
50 0004 Transformed into SRS of
the map
Data
OpenStreetMap data, Czech republic, 14.373, 49.147, 14.822,49.440
1 Points ∼= 5 000, ∼=35 000
2 Lines ∼= 1 700, ∼= 10 0003 Polygons ∼= 8 000, ∼=
50 0004 Transformed into SRS of
the map
Disclamer
DisclamerNumbers shown in this presentation are specific for usedhardware, operating system, browser, position of stars and sunand other external conditions.
They are not meant to be taken as they are. They are here forillustration purpose, to demonstrate relative differencesbetween various rendering techniques and libraries.
Icons versus no-style
No-style versus image icons
points rendering
Leaflet-DOM
OL2-DOM
OL2-Icons-DOM
OL2-Canvas
OL2-Icons-Canvas
OL3-Canvas
OL3-Canvas-Icons
OL3-Api-branch
OL3-Api-branch-Icons
5k 5.63 1.50 2.10 2.20 1.60 3.70 2.80 0.14 0.1335k 60.00 8.80 7.70 12.50 8.70 19.30 9.00 0.70 0.70
points rendering [s]
points panning
Leaflet-DOM
OL2-DOM
OL2-Icons-DOM
OL2-Canvas
OL2-Icons-Canvas
OL3-Canvas
OL3-Canvas-Icons
OL3-Api-branch
OL3-Api-branch-Icons
5k 0.80 0.10 0.11 1.00 0.81 0.15 0.15 0.09 0.0935k 2.30 2.80 1.10 10.00 6.46 0.59 0.16 0.45 0.46
points panning [s]
polygon rendering
Leaflet-Canvas OL2-DOM OL2-Canvas OL3-Canvas OL3-Api-Branch
8k 0.90 3.19 2.64 0.16 0.5850k 4.10 21.80 12.93 18.00 2.81
polygon rendering [s]
lines rendering
Leaflet-Canvas OL2-DOM OL2-Canvas OL3-Canvas OL3-Api-branch
1.7k 0.27 0.77 0.65 0.41 0.1210k 1.48 6.24 3.14 3.60 0.43
lines rendering [s]
lines panning
Leaflet-Canvas OL2-DOM OL2-Canvas OL3-Canvas OL3-Api-branch
1.7k 0.15 0.12 0.45 0.18 0.0310k 0.78 0.20 2.52 0.11 0.20
lines panning [s]
polygon panning
Leaflet-Canvas OL2-DOM OL2-Canvas OL3-Canvas OL3-Api-branch
8k 1.00 0.18 1.74 0.11 0.1950k 1.94 0.42 10.57 0.12 0.70
polygon panning [s]
Result
1 OpenLayers 3 Api Branch2 Leaflet 0.8-dev3 OpenLayers 2 Canvas
Result
1 OpenLayers 3 Api Branch2 Leaflet 0.8-dev3 OpenLayers 2 Canvas
Result
1 OpenLayers 3 Api Branch2 Leaflet 0.8-dev3 OpenLayers 2 Canvas
TOC
1 Open Source Web Mapping Frameworks
2 Comparing OS Mapping libraries
3 Results
4 Discussion
DOM vs. CanvasImage point icons versus no-style pointsCode / Speed ratioParsingBright future: WebGL
DOM vs. CanvasImage point icons versus no-style pointsCode / Speed ratioParsingBright future: WebGL
DOM vs. CanvasImage point icons versus no-style pointsCode / Speed ratioParsingBright future: WebGL
DOM vs. CanvasImage point icons versus no-style pointsCode / Speed ratioParsingBright future: WebGL
DOM vs. CanvasImage point icons versus no-style pointsCode / Speed ratioParsingBright future: WebGL
DOM versus Canvas
DOM
Canvas
Optimalizations
Data indexingGeneralizationClusteringOptimal rendering engine (DOM (SVG — VML) vs. Canvasvs. WebGL)Hardware improvements, browser improvements
Optimalizations
Data indexingGeneralizationClusteringOptimal rendering engine (DOM (SVG — VML) vs. Canvasvs. WebGL)Hardware improvements, browser improvements
Optimalizations
Data indexingGeneralizationClusteringOptimal rendering engine (DOM (SVG — VML) vs. Canvasvs. WebGL)Hardware improvements, browser improvements
Optimalizations
Data indexingGeneralizationClusteringOptimal rendering engine (DOM (SVG — VML) vs. Canvasvs. WebGL)Hardware improvements, browser improvements
Optimalizations
Data indexingGeneralizationClusteringOptimal rendering engine (DOM (SVG — VML) vs. Canvasvs. WebGL)Hardware improvements, browser improvements
