Successfully reported this slideshow.
Open Source Web Mapping Frameworks
Time for going vector?

ˇ
´
Jachym Cepick´ 1
y
1 Geosense

s.r.o. http://geosense.cz

G...
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.org
Leaflet http://leafletjs.org
OpenLayers 3 http://ol3js.org
OpenLayers

since 2005, Metacarta
since 2007, OSGeo project
7 021 commits made by 103 contributors
126 179 lines of code
B...
Leaflet

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

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

1

Open Source Web Mapping Frameworks

2

Comparing OS Mapping libraries

3

Results

4

Discussion
OpenLayer 2
Size1
Backend
Build system

1

Leaflet

OpenLayers 3

1000 kB
none
custom

91 kB
none
custom

291 kB
closure li...
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-3210M
CPU @ 2.50GHz
Browser: Chromium 31.0.1650.63
Ope...
Testing environment

Hardware: 8GB RAM, 4-Core Intel(R) Core(TM) i5-3210M
CPU @ 2.50GHz
Browser: Chromium 31.0.1650.63
Ope...
Testing environment

Hardware: 8GB RAM, 4-Core Intel(R) Core(TM) i5-3210M
CPU @ 2.50GHz
Browser: Chromium 31.0.1650.63
Ope...
Tasks

1

Render features2

2

Pan3

3

Two tryes n×1000 features and n×10 000 features

2

Just rendering. Data loading a...
Tasks

1

Render features2

2

Pan3

3

Two tryes n×1000 features and n×10 000 features

2

Just rendering. Data loading a...
Tasks

1

Render features2

2

Pan3

3

Two tryes n×1000 features and n×10 000 features

2

Just rendering. Data loading a...
Data

OpenStreetMap data, Czech republic, 14.373, 49.147, 14.822,
49.440
1

2
3

4

Points ∼ 5 000, ∼
=
=
35 000
Lines ∼ 1...
Data

OpenStreetMap data, Czech republic, 14.373, 49.147, 14.822,
49.440
1

2
3

4

Points ∼ 5 000, ∼
=
=
35 000
Lines ∼ 1...
Data

OpenStreetMap data, Czech republic, 14.373, 49.147, 14.822,
49.440
1

2
3

4

Points ∼ 5 000, ∼
=
=
35 000
Lines ∼ 1...
Data

OpenStreetMap data, Czech republic, 14.373, 49.147, 14.822,
49.440
1

2
3

4

Points ∼ 5 000, ∼
=
=
35 000
Lines ∼ 1...
Disclamer

Disclamer
Numbers shown in this presentation are specific for used
hardware, operating system, browser, position...
Icons versus no-style

No-style versus image icons
points rendering

LeafletDOM

5k
35k

OL2DOM

OL2IconsDOM

OL2Canvas

OL2IconsCanvas

5.63
60.00

1.50
8.80

2.10
7.70

2.2...
points panning

LeafletDOM

5k
35k

OL2DOM

OL2IconsDOM

OL2Canvas

OL2IconsCanvas

0.80
2.30

0.10
2.80

0.11
1.10

1.00
0...
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-...
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-Canv...
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...
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-Canva...
Result

1

OpenLayers 3 Api Branch

2

Leaflet 0.8-dev

3

OpenLayers 2 Canvas
Result

1

OpenLayers 3 Api Branch

2

Leaflet 0.8-dev

3

OpenLayers 2 Canvas
Result

1

OpenLayers 3 Api Branch

2

Leaflet 0.8-dev

3

OpenLayers 2 Canvas
TOC

1

Open Source Web Mapping Frameworks

2

Comparing OS Mapping libraries

3

Results

4

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

DOM

Canvas
Optimalizations

Data indexing
Generalization
Clustering
Optimal rendering engine (DOM (SVG — VML) vs. Canvas
vs. WebGL)
H...
Optimalizations

Data indexing
Generalization
Clustering
Optimal rendering engine (DOM (SVG — VML) vs. Canvas
vs. WebGL)
H...
Optimalizations

Data indexing
Generalization
Clustering
Optimal rendering engine (DOM (SVG — VML) vs. Canvas
vs. WebGL)
H...
Optimalizations

Data indexing
Generalization
Clustering
Optimal rendering engine (DOM (SVG — VML) vs. Canvas
vs. WebGL)
H...
Optimalizations

Data indexing
Generalization
Clustering
Optimal rendering engine (DOM (SVG — VML) vs. Canvas
vs. WebGL)
H...
Happy web mapping!
jachym.cepicky@gmail.com jachym.cepicky@geosense.cz
http://les-ejk.cz http://geosense.cz
@jachymc
Upcoming SlideShare
Loading in …5
×

Cepicky os-mapping-frameworks

487 views

Published on

Published in: Technology, Art & Photos
  • Some notes, which appeared during our conversation:

    OL3 was tested in the RAW mode, as Tom Payne notes:

    > - please do use the compiled version of ol3, rather than RAW mode:
    > compiling often provides a 25% or greater speed boost, and it would be
    > strange to compare ol3 in debug (RAW) mode to (say) Leaflet in it's final
    > built mode.

    OL3 vector-api branch, is 'living' also during pan redrawing - the data can still be modified etc, as Tom again points:

    > Almost all libraries deactivate functionality during pan. For example:
    > - ol3 master doesn't render any new tiles during pan
    > - ol3 vector-api doesn't create any new batches during pan
    > - leaflet just uses a CSS transform and doesn't do any new rendering at all
    > during pan (AFAICT)

    To library size: They were not zipped, so the numbers are not real, since almost all web servers are sending their javascripts to the clinet in zipped format:

    > Finally, when comparing library sizes, please compare the size of the gzip
    > -9 compressed code, as this is what matters.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Cepicky os-mapping-frameworks

  1. 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. 2. TOC 1 Open Source Web Mapping Frameworks 2 Comparing OS Mapping libraries 3 Results 4 Discussion
  3. 3. TOC 1 Open Source Web Mapping Frameworks 2 Comparing OS Mapping libraries 3 Results 4 Discussion
  4. 4. OpenLayers http://openlayers.org Leaflet http://leafletjs.org OpenLayers 3 http://ol3js.org
  5. 5. OpenLayers since 2005, Metacarta since 2007, OSGeo project 7 021 commits made by 103 contributors 126 179 lines of code BSD license
  6. 6. Leaflet since 2010, Vladimir Agafonkin 3 041 commits made by 164 contributors 6 466 lines of code BSD license
  7. 7. OpenLayers 3 since 2012 number of commits: hard to eastimate (originaly based on OL2) 101 594 lines of code BSD license
  8. 8. TOC 1 Open Source Web Mapping Frameworks 2 Comparing OS Mapping libraries 3 Results 4 Discussion
  9. 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. 10. TOC 1 Open Source Web Mapping Frameworks 2 Comparing OS Mapping libraries 3 Results 4 Discussion
  11. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 22. Icons versus no-style No-style versus image icons
  23. 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. 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. 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. 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. 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. 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. 29. Result 1 OpenLayers 3 Api Branch 2 Leaflet 0.8-dev 3 OpenLayers 2 Canvas
  30. 30. Result 1 OpenLayers 3 Api Branch 2 Leaflet 0.8-dev 3 OpenLayers 2 Canvas
  31. 31. Result 1 OpenLayers 3 Api Branch 2 Leaflet 0.8-dev 3 OpenLayers 2 Canvas
  32. 32. TOC 1 Open Source Web Mapping Frameworks 2 Comparing OS Mapping libraries 3 Results 4 Discussion
  33. 33. DOM vs. Canvas Image point icons versus no-style points Code / Speed ratio Parsing Bright future: WebGL
  34. 34. DOM vs. Canvas Image point icons versus no-style points Code / Speed ratio Parsing Bright future: WebGL
  35. 35. DOM vs. Canvas Image point icons versus no-style points Code / Speed ratio Parsing Bright future: WebGL
  36. 36. DOM vs. Canvas Image point icons versus no-style points Code / Speed ratio Parsing Bright future: WebGL
  37. 37. DOM vs. Canvas Image point icons versus no-style points Code / Speed ratio Parsing Bright future: WebGL
  38. 38. DOM versus Canvas DOM Canvas
  39. 39. Optimalizations Data indexing Generalization Clustering Optimal rendering engine (DOM (SVG — VML) vs. Canvas vs. WebGL) Hardware improvements, browser improvements
  40. 40. Optimalizations Data indexing Generalization Clustering Optimal rendering engine (DOM (SVG — VML) vs. Canvas vs. WebGL) Hardware improvements, browser improvements
  41. 41. Optimalizations Data indexing Generalization Clustering Optimal rendering engine (DOM (SVG — VML) vs. Canvas vs. WebGL) Hardware improvements, browser improvements
  42. 42. Optimalizations Data indexing Generalization Clustering Optimal rendering engine (DOM (SVG — VML) vs. Canvas vs. WebGL) Hardware improvements, browser improvements
  43. 43. Optimalizations Data indexing Generalization Clustering Optimal rendering engine (DOM (SVG — VML) vs. Canvas vs. WebGL) Hardware improvements, browser improvements
  44. 44. Happy web mapping! jachym.cepicky@gmail.com jachym.cepicky@geosense.cz http://les-ejk.cz http://geosense.cz @jachymc

×