$30 off During Our Annual Pro Sale. View Details »

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.

Vladimir Agafonkin

May 23, 2013
Tweet

More Decks by Vladimir Agafonkin

Other Decks in Technology

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
    [email protected]

    View Slide

  67. View Slide