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
   

   View Slide

2. View Slide

3. View Slide

4. February 2005
   June 2006
   June 2009
   May 2011
   Google Maps API
   OpenLayers
   Google Maps API v3
   

   View Slide

5. View Slide

6. The Story
   

   View Slide

7. View Slide

8. View Slide

9. April 2008
   

   View Slide

10. View Slide

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

    View Slide

12. lets build on top
    of OpenLayers„
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. basic map API requirements
    •tiles (xyz mercator)
    •markers
    •popups
    •polylines and polygons
    

    View Slide

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
    

    View Slide

19. View Slide

20. View Slide

21. Web Maps Lite
    

    View Slide

22. OK, lets see our new
    awesome OL-based API...
    „
    OMG why is it SO FAST?!
    

    View Slide

23. View Slide

24. one-man effort
    closed source
    other projects
    two years later...
    

    View Slide

25. View Slide

26. hey Vlad, I reverse-engineered
    your API to fix this nasty bug,
    here's the patch...„
    

    View Slide

27. open source
    lets do it!
    September 2010
    

    View Slide

28. Web Maps Lite
    

    View Slide

29. bit.ly/leaflet-2yrs
    

    View Slide

30. The Present
    

    View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

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
    

    View Slide

41. leafletjs.com/plugins.html
    63 plugins
    

    View Slide

42. Leaflet.markercluster
    

    View Slide

43. View Slide

44. Leaflet.draw
    

    View Slide

45. simplicity
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

50. convention over
    configuration
    

    View Slide

51. code:
    simple outside,
    simple inside
    

    View Slide

52. View Slide

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;
    

    View Slide

54. this code is so smart, I won't contribute
    — others would laugh at my lousy JS
    and I'd certainly break something
    „
    

    View Slide

55. Open Source
    

    View Slide

56. View Slide

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

    View Slide

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

    View Slide

59. fast
    responsive
    lightweight
    

    View Slide

60. View Slide

61. The Future
    

    View Slide

62. upcoming features:
    removing features!
    

    View Slide

63. simplicity
    

    View Slide

64. Leaflet plans for future
    •making things simpler
    •refactoring for flexibility
    •improving performance
    •improving usability
    •improving plugin infrastructure
    •better website, more tutorials
    

    View Slide

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
    

    View Slide

66. Thanks!
    Questions?
    Vladimir Agafonkin
    agafonkin@gmail.com
    

    View Slide

67. View Slide