Leaflet, WebGL & the Future of Web Mapping

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.

6d07e6d95a43357254698ce9723350e6?s=128

Vladimir Agafonkin

March 12, 2015
Tweet

Transcript

  1. Leaflet, WebGL and the future of web mapping Vladimir Agafonkin

    11.03.15
  2. None
  3. Vladimir Agafonkin

  4. by far the most used open source map library

  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  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

  25. None
  26. None
  27. None
  28. 0.7 1.0-dev WTF yay!

  29. None
  30. Leaflet 1.0 trap, episode 1 of many: flyover animations

  31. None
  32. arbitrary animation curve fractional zoom

  33. fractional zoom: map.setZoom(12.67)

  34. arbitrary animation curve multi-zoom pyramid tile loading

  35. None
  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

  42. None
  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

  49. None
  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

  58. None
  59. None
  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

  99. None
  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? ^___^
  103. None
  104. Mapbox GL

  105. None
  106. None
  107. None
  108. None
  109. None
  110. None
  111. drawing a line in WebGL

  112. None
  113. None
  114. None
  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

  120. None
  121. None
  122. placing labels in Mapbox GL

  123. None
  124. None
  125. None
  126. holy f***ing sh*t

  127. displaying GeoJSON in Mapbox GL

  128. None
  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? ^___^

  132. None
  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

  138. None