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.

Transcript

1. Past, Present, Future September 2013 Vladimir Agafonkin
4. February 2005 June 2006 June 2009 May 2011 Google Maps API OpenLayers Google Maps API v3
6. The Story
9. April 2008
11. we need to build a full-featured API quickly „
12. lets build on top of OpenLayers„
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
21. Web Maps Lite
22. OK, lets see our new awesome OL-based API... „ OMG why is it SO FAST?!
24. one-man effort closed source other projects two years later...
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
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
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
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
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
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