Leaflet: Past, Present, Future

Leaflet: Past, Present, Future

Leaflet, a JavaScript library for mobile-friendly interactive maps, has come a long way since its inception. The library started as a one-night hack and evolved over the next two years as a closed proprietary API, developed by one person, and then was finally rewritten from scratch as an open source library in 2011. Leaflet is now the most popular open source solution for publishing maps on the Web.

What’s the story behind Leaflet? How did it became so successful so quickly despite strong competition and lack of features? This talk will be presented by its lead developer and will cover lessons learned, the current state of the project and future challenges.

6d07e6d95a43357254698ce9723350e6?s=128

Vladimir Agafonkin

September 21, 2013
Tweet

Transcript

  1. Past, Present, Future September 2013 Vladimir Agafonkin

  2. None
  3. None
  4. February 2005 June 2006 June 2009 May 2011 Google Maps

    API OpenLayers Google Maps API v3
  5. None
  6. The Story

  7. None
  8. None
  9. April 2008

  10. None
  11. we need to build a full-featured API quickly „

  12. lets build on top of OpenLayers„

  13. None
  14. None
  15. None
  16. None
  17. basic map API requirements •tiles (xyz mercator) •markers •popups •polylines

    and polygons
  18. mourner: hey guys, I was thinking of building a really

    simple, lightweight OpenLayers alternative for our API... #osmdev angry_guy: nobody gives a crap about your alternative, YOU IDIOT, just build a wrapper around OL like all others or FAIL miserably
  19. None
  20. None
  21. Web Maps Lite

  22. OK, lets see our new awesome OL-based API... „ OMG

    why is it SO FAST?!
  23. None
  24. one-man effort closed source other projects two years later...

  25. None
  26. hey Vlad, I reverse-engineered your API to fix this nasty

    bug, here's the patch...„
  27. open source lets do it! September 2010

  28. Web Maps Lite

  29. bit.ly/leaflet-2yrs

  30. The Present

  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. • 3 years of development • 6800+ lines of code

    • 2600+ commits from ~150 people • 5800+ stars, 1050+ forks • issues: 160+ open, 1850+ closed • pull requests: 40 open, ~700 closed
  40. leafletjs.com/plugins.html 86 plugins

  41. Leaflet.markercluster

  42. None
  43. Leaflet.draw

  44. simplicity

  45. number of features Images Markers Popups Vectors XYZ tiles GeoJSON

    WMS Layer groups Inertial pan Scroll zoom Dblclick zoom Box zoom Keyboard nav Pinch zoom Dbltap zoom Marker drag Pan anim Zoom anim Zoom buttons Attribution Layer switcher Scale Map rotation Fractional zoom WebGL renderer TMS WMTS TileCache MapGuide MapServer KaMap KaMapCache MultiMap Google Yahoo WorldWind Virtual Earth Bing Zoomify UTFGrid OSM ArcGIS ArcIMS GML GeoRSS KML WFS WFST ArcXML Atom CQL SLD GPX OSM XML OWS Context WKT XLS XML Drawing Editing Graticule Measure Pan control Minimap Permalink Clustering
  46. number of features Images Markers Popups Vectors XYZ tiles GeoJSON

    WMS Layer groups Inertial pan Scroll zoom Dblclick zoom Box zoom Keyboard nav Pinch zoom Dbltap zoom Marker drag Pan anim Zoom anim Zoom buttons Attribution Layer switcher Scale Map rotation Fractional zoom WebGL renderer TMS WMTS TileCache MapGuide MapServer KaMap KaMapCache MultiMap Google Yahoo WorldWind Virtual Earth Bing Zoomify UTFGrid OSM ArcGIS ArcIMS GML GeoRSS KML WFS WFST ArcXML Atom CQL SLD GPX OSM XML OWS Context WKT XLS XML Drawing Editing Graticule Measure Pan control Minimap Permalink Clustering
  47. quality of features Images Markers Popups Vectors XYZ tiles GeoJSON

    WMS Layer groups Inertial pan Scroll zoom Dblclick zoom Box zoom Keyboard nav Pinch zoom Dbltap zoom Marker drag Pan anim Zoom anim Zoom buttons Attribution Layer switcher Scale + third-party plugins
  48. var map = L.map('map') .setView([51.505, -0.09], 13); L.tileLayer( 'http://{s}.tile.osm.org/{z}/{x}/{y}.png') .addTo(map);

    L.marker([51.5, -0.09]) .addTo(map) .bindPopup('Hello World!') .openPopup(); API: as simple as possible
  49. convention over configuration

  50. code: simple outside, simple inside

  51. None
  52. function interPathHelper(path1, path2, justCount) { path1 = R._path2curve(path1); path2 =

    R._path2curve(path2); var x1, y1, x2, y2, x1m, y1m, x2m, y2m, bez1, bez2, res = justCount ? 0 : []; for (var i = 0, ii = path1.length; i < ii; i++) { var pi = path1[i]; if (pi[0] == "M") { x1 = x1m = pi[1]; y1 = y1m = pi[2]; } else { if (pi[0] == "C") { bez1 = [x1, y1].concat(pi.slice(1)); x1 = bez1[6]; y1 = bez1[7]; } else { bez1 = [x1, y1, x1, y1, x1m, y1m, x1m, y1m]; x1 = x1m; y1 = y1m; } for (var j = 0, jj = path2.length; j < jj; j++) { var pj = path2[j]; if (pj[0] == "M") { x2 = x2m = pj[1]; y2 = y2m = pj[2]; } else { if (pj[0] == "C") { bez2 = [x2, y2].concat(pj.slice(1)); x2 = bez2[6]; y2 = bez2[7]; } else { bez2 = [x2, y2, x2, y2, x2m, y2m, x2m, y2m]; x2 = x2m; y2 = y2m; } var intr = interHelper(bez1, bez2, justCount); if (justCount) { res += intr; } else { for (var k = 0, kk = intr.length; k < kk; k++) { intr[k].segment1 = i; intr[k].segment2 = j;
  53. this code is so smart, I won't contribute — others

    would laugh at my lousy JS and I'd certainly break something „
  54. Open Source

  55. None
  56. it's not enough to be open you need to be

    transparent
  57. the poetry of code expressing deep meaning through simple words

  58. fast responsive lightweight

  59. None
  60. The Future

  61. upcoming features: removing features!

  62. simplicity

  63. Leaflet plans for future •making things simpler •refactoring for flexibility

    •improving performance •improving usability •improving plugin infrastructure •better website, more tutorials
  64. •get excited •build cool stuff •believe in yourself •pursue your

    dreams •push open source •listen to my band rain.in.ua Recap
  65. Thanks! Questions? Vladimir Agafonkin agafonkin@gmail.com

  66. None