Leaflet, WebGL & the Future of Web Mapping

Used by thousands of developers for online interactive maps, Leaflet may be the most popular FOSS4G library ever created. But with exciting new trends like WebGL and client-side vector maps, and new mapping libraries providing functionality similar to Leaflet, some people believe that its days are numbered.

But is Leaflet really going away anytime soon? Can it live in harmony with cutting-edge technologies? How will the web mapping landscape look in the near future? And what are the next big challenges? A talk by the creator and maintainer of Leaflet and core developer of Mapbox GL JS.

Transcript

1. Leaflet, WebGL and the future of web mapping Vladimir Agafonkin 11.03.15
3. Vladimir Agafonkin
4. by far the most used open source map library
16. creating a web map in 2008
17. born against all odds
18. no way you could do that
19. You’re wasting time
20. build an OPENLAYERS wrapper
21. born as a protest against bloat, clutter and complexity
22. top priorities: simplicity performance
23. feature need complexity simplify
24. 1.0
28. 0.7 1.0-dev WTF yay!
30. Leaflet 1.0 trap, episode 1 of many: flyover animations
32. arbitrary animation curve fractional zoom
33. fractional zoom: map.setZoom(12.67)
34. arbitrary animation curve multi-zoom pyramid tile loading
36. fractional zoom rewrite half of Leaflet code
37. code refactoring
38. CSS transitions: very fast, impossible to control precisely, still buggy
39. frame by frame animations: full control, much slower
40. significantly degrade Leaflet performance, or introduce confusing limitations, fragility and complexity by having two animation systems?
41. sometimes browsers break
43. sorry guys
44. oh and did I mention Android?
45. tweaking leaflet animations
46. my map broke in IE7!!!
47. tough problems, hard choices, uncertainty, constant stream of issues and support requests, lots of work
48. feeling anxiety and guilt and pressure
50. open source burnout
51. vlad adds a feature to leaflet
52. it’s a trap!
53. Vlad retreats to his happy place
54. RBush
55. • rbush • earcut • simpleheat • simplify-js • geojson-vt • pbf • geobuf • suncalc • dead-simple-grid • bullshit.js
56. war in ukraine
57. father of twin girls
60. 0.7.3 — 1.0
61. sharing the joy of successful refactoring
62. animations & usability
63. flyover animations
64. much better tile loading (smoother, less flickering)
65. much better panning inertia
66. smoother zoom on iOS Safari
67. popup fade out animation
68. accessibility improvements
69. vectors 2.0
70. Use SVG & Canvas on the same map
71. put vectors in custom panes
72. huge SVG layers performance boost: adding ~3x faster, takes ~2.5 less memory
73. huge Canvas layers performance boost: partial redraws, faster mouse events
74. Canvas layers now retina-enabled
75. solved all problems with MultiPolygon & MultiPolyline: no longer inherited from FeatureGroup
76. Polyline & Polygon Centroids
77. TileLayer
78. TileLayer split into GridLayer & TileLayer
79. GridLayer is the new TileLayer.Canvas
80. Projections
81. No hardcoded projection hacks, all centralized in CRS
82. CRS defines everything: how tiles wrap, what are the bounds, distance measure, etc.
83. Proj4Leaflet FTW
84. Layers
85. all layers now inherited from Layer class less code, more consistency, good for plugins
86. Custom Pane Management
87. ImageOverlay events
88. other performance improvements
89. much faster Layer construction (delegated DOM events and other optimizations)
90. huge FeatureGroup performance boost due to better event propagation mechanism
91. much better memory footprint for DOM & Leaflet events
92. LatLng construction 8x faster
93. obj.off(event, listener) 2x faster
94. more stable: less freezes and race conditions
95. …and many other bugfixes and improvements
96. best of all? it got smaller!
97. Uncompressed: 212.80 KB (-2910 bytes) Compressed: 120.17 KB (-2482 bytes) Gzipped: 32.79 KB (+18 bytes) master vs stable
98. state of 1.0
100. 1.0 beta
101. VLAD TRIES TO FINISH 1.0
102. Leaflet’s neat, but Vlad, wouldn’t it be awesome to have rotation? ^___^
104. Mapbox GL
111. drawing a line in WebGL
115. drawing a line in WebGL is a hard problem
116. drawing a polygon in WebGL
117. github.com/mapbox/earcut
118. drawing a polygon in WebGL is a very hard problem
119. drawing text in WebGL
122. placing labels in Mapbox GL
126. holy f***ing sh*t
127. displaying GeoJSON in Mapbox GL
129. github.com/mapbox/geojson-vt
130. vlad tries to borrow Mapbox GL feature for leaflet
131. Vlad, how about adding a WebGL renderer to Leaflet? ^___^
133. meant to be simple
134. Leaflet will remain the go-to mapping library: dead simple, easy to use, works on all platforms, 
 tons of plugins, huge community, everyone knows it
135. meant to be very complex, and push the boundaries of what’s possible Mapbox GL
136. opposite sides of spectrum
137. excited to be pushing both