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

May 23, 2013
Tweet

Transcript

  1. Past, Present, Future May 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. None
  40. • 2.5 years of development • 6531 lines of code

    • 2304 commits from 129 people • 4656 followers, 835 forks • issues: 117 open, 1583 closed • pull requests: 24 open, 584 closed
  41. leafletjs.com/plugins.html 63 plugins

  42. Leaflet.markercluster

  43. None
  44. Leaflet.draw

  45. simplicity

  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. 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
  48. 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
  49. 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
  50. convention over configuration

  51. code: simple outside, simple inside

  52. None
  53. 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;
  54. this code is so smart, I won't contribute — others

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

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

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

  59. fast responsive lightweight

  60. None
  61. The Future

  62. upcoming features: removing features!

  63. simplicity

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

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

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

  67. None