Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Leaflet, WebGL & the Future of Web Mapping

Leaflet, WebGL & the Future of Web Mapping

Used by thousands of developers for online interactive maps, Leaflet may be the most popular FOSS4G library ever created. But with exciting new trends like WebGL and client-side vector maps, and new mapping libraries providing functionality similar to Leaflet, some people believe that its days are numbered.

But is Leaflet really going away anytime soon? Can it live in harmony with cutting-edge technologies? How will the web mapping landscape look in the near future? And what are the next big challenges? A talk by the creator and maintainer of Leaflet and core developer of Mapbox GL JS.

Vladimir Agafonkin

March 12, 2015
Tweet

More Decks by Vladimir Agafonkin

Other Decks in Technology

Transcript

  1. Leaflet, WebGL
    and the future of
    web mapping
    Vladimir Agafonkin
    11.03.15

    View full-size slide

  2. Vladimir Agafonkin

    View full-size slide

  3. by far the most used
    open source map library

    View full-size slide

  4. creating a web map in 2008

    View full-size slide

  5. born against
    all odds

    View full-size slide

  6. no way you could do that

    View full-size slide

  7. You’re wasting time

    View full-size slide

  8. build an OPENLAYERS wrapper

    View full-size slide

  9. born as a protest
    against bloat, clutter
    and complexity

    View full-size slide

  10. top priorities:
    simplicity
    performance

    View full-size slide

  11. feature need
    complexity
    simplify

    View full-size slide

  12. 0.7
    1.0-dev
    WTF
    yay!

    View full-size slide

  13. Leaflet 1.0 trap,
    episode 1 of many:
    flyover animations

    View full-size slide

  14. arbitrary
    animation curve
    fractional zoom

    View full-size slide

  15. fractional zoom:
    map.setZoom(12.67)

    View full-size slide

  16. arbitrary
    animation curve
    multi-zoom pyramid
    tile loading

    View full-size slide

  17. fractional zoom
    rewrite half of
    Leaflet code

    View full-size slide

  18. code refactoring

    View full-size slide

  19. CSS transitions:
    very fast,
    impossible to control
    precisely, still buggy

    View full-size slide

  20. frame by frame
    animations:
    full control,
    much slower

    View full-size slide

  21. significantly degrade Leaflet
    performance,
    or introduce confusing
    limitations, fragility and
    complexity by having two
    animation systems?

    View full-size slide

  22. sometimes
    browsers
    break

    View full-size slide

  23. oh and did I
    mention
    Android?

    View full-size slide

  24. tweaking leaflet animations

    View full-size slide

  25. my map broke
    in IE7!!!

    View full-size slide

  26. tough problems,
    hard choices,
    uncertainty,
    constant stream of
    issues and support
    requests,
    lots of work

    View full-size slide

  27. feeling anxiety
    and guilt
    and pressure

    View full-size slide

  28. open
    source
    burnout

    View full-size slide

  29. vlad adds a feature to leaflet

    View full-size slide

  30. it’s a trap!

    View full-size slide

  31. Vlad
    retreats
    to his
    happy
    place

    View full-size slide

  32. • rbush
    • earcut
    • simpleheat
    • simplify-js
    • geojson-vt
    • pbf
    • geobuf
    • suncalc
    • dead-simple-grid
    • bullshit.js

    View full-size slide

  33. war in ukraine

    View full-size slide

  34. father of
    twin girls

    View full-size slide

  35. 0.7.3 — 1.0

    View full-size slide

  36. sharing the joy of
    successful refactoring

    View full-size slide

  37. animations
    & usability

    View full-size slide

  38. flyover animations

    View full-size slide

  39. much better
    tile loading
    (smoother, less flickering)

    View full-size slide

  40. much better
    panning inertia

    View full-size slide

  41. smoother zoom
    on iOS Safari

    View full-size slide

  42. popup fade out
    animation

    View full-size slide

  43. accessibility
    improvements

    View full-size slide

  44. Use SVG & Canvas
    on the same map

    View full-size slide

  45. put vectors in
    custom panes

    View full-size slide

  46. huge SVG layers
    performance boost:
    adding ~3x faster,
    takes ~2.5 less memory

    View full-size slide

  47. huge Canvas layers
    performance boost:
    partial redraws,
    faster mouse events

    View full-size slide

  48. Canvas layers
    now retina-enabled

    View full-size slide

  49. solved all problems with
    MultiPolygon & MultiPolyline:
    no longer inherited from
    FeatureGroup

    View full-size slide

  50. Polyline & Polygon
    Centroids

    View full-size slide

  51. TileLayer split into
    GridLayer & TileLayer

    View full-size slide

  52. GridLayer is the new
    TileLayer.Canvas

    View full-size slide

  53. No hardcoded
    projection hacks,
    all centralized in CRS

    View full-size slide

  54. CRS defines everything:
    how tiles wrap,
    what are the bounds,
    distance measure, etc.

    View full-size slide

  55. Proj4Leaflet FTW

    View full-size slide

  56. all layers now inherited
    from Layer class
    less code, more consistency,
    good for plugins

    View full-size slide

  57. Custom Pane
    Management

    View full-size slide

  58. ImageOverlay events

    View full-size slide

  59. other performance
    improvements

    View full-size slide

  60. much faster
    Layer construction
    (delegated DOM events and
    other optimizations)

    View full-size slide

  61. huge FeatureGroup
    performance boost
    due to better event
    propagation mechanism

    View full-size slide

  62. much better memory
    footprint for DOM &
    Leaflet events

    View full-size slide

  63. LatLng construction
    8x faster

    View full-size slide

  64. obj.off(event, listener)
    2x faster

    View full-size slide

  65. more stable:
    less freezes
    and race conditions

    View full-size slide

  66. …and many other
    bugfixes and
    improvements

    View full-size slide

  67. best of all?
    it got smaller!

    View full-size slide

  68. Uncompressed: 212.80 KB (-2910 bytes)
    Compressed: 120.17 KB (-2482 bytes)
    Gzipped: 32.79 KB (+18 bytes)
    master vs stable

    View full-size slide

  69. state of 1.0

    View full-size slide

  70. VLAD TRIES TO FINISH 1.0

    View full-size slide

  71. Leaflet’s neat,
    but Vlad, wouldn’t it be
    awesome to have
    rotation? ^___^

    View full-size slide

  72. drawing a line
    in WebGL

    View full-size slide

  73. drawing a line
    in WebGL
    is a hard problem

    View full-size slide

  74. drawing a polygon
    in WebGL

    View full-size slide

  75. github.com/mapbox/earcut

    View full-size slide

  76. drawing a polygon
    in WebGL
    is a very hard problem

    View full-size slide

  77. drawing text
    in WebGL

    View full-size slide

  78. placing labels
    in Mapbox GL

    View full-size slide

  79. holy
    f***ing
    sh*t

    View full-size slide

  80. displaying GeoJSON
    in Mapbox GL

    View full-size slide

  81. github.com/mapbox/geojson-vt

    View full-size slide

  82. vlad tries to borrow
    Mapbox GL feature for leaflet

    View full-size slide

  83. Vlad,
    how about adding a
    WebGL renderer to
    Leaflet? ^___^

    View full-size slide

  84. meant to be
    simple

    View full-size slide

  85. Leaflet will remain the
    go-to mapping library:
    dead simple,
    easy to use,
    works on all platforms, 

    tons of plugins,
    huge community,
    everyone knows it

    View full-size slide

  86. meant to be very complex,
    and push the boundaries
    of what’s possible
    Mapbox GL

    View full-size slide

  87. opposite sides
    of spectrum

    View full-size slide

  88. excited to be
    pushing both

    View full-size slide