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 May 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
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
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
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
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
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