What makes Leaflet so successful (LocationTech Hangouts)

What makes Leaflet so successful (LocationTech Hangouts)

Leaflet, an open source JS library for mobile-friendly interactive maps, presented at LocationTech Online Hangouts by its creator, Vladimir Agafonkin on 4 Dec 2012.

6d07e6d95a43357254698ce9723350e6?s=128

Vladimir Agafonkin

December 04, 2012
Tweet

Transcript

  1. Vladimir Agafonkin 12.2012 Wednesday, 16 January 13

  2. agafonkin.com Wednesday, 16 January 13

  3. agafonkin.com Wednesday, 16 January 13

  4. agafonkin.com Wednesday, 16 January 13

  5. agafonkin.com /mourner Wednesday, 16 January 13

  6. rain.in.ua Wednesday, 16 January 13

  7. leafletjs.com Wednesday, 16 January 13

  8. Wednesday, 16 January 13

  9. February 2005 June 2006 June 2009 May 2011 Google Maps

    API OpenLayers Google Maps API v3 Wednesday, 16 January 13
  10. Wednesday, 16 January 13

  11. Wednesday, 16 January 13

  12. Wednesday, 16 January 13

  13. Wednesday, 16 January 13

  14. Wednesday, 16 January 13

  15. Wednesday, 16 January 13

  16. Wednesday, 16 January 13

  17. Wednesday, 16 January 13

  18. Wednesday, 16 January 13

  19. Wednesday, 16 January 13

  20. not just usual maps Wednesday, 16 January 13

  21. Wednesday, 16 January 13

  22. Wednesday, 16 January 13

  23. Wednesday, 16 January 13

  24. Wednesday, 16 January 13

  25. how?.. Wednesday, 16 January 13

  26. open source Wednesday, 16 January 13

  27. • 2 years of development Wednesday, 16 January 13

  28. • 2 years of development • 8143 lines of code

    Wednesday, 16 January 13
  29. • 2 years of development • 8143 lines of code

    • 1759 commits from 90 people Wednesday, 16 January 13
  30. • 2 years of development • 8143 lines of code

    • 1759 commits from 90 people • 3364 followers, 561 forks Wednesday, 16 January 13
  31. • 2 years of development • 8143 lines of code

    • 1759 commits from 90 people • 3364 followers, 561 forks • issues: 170 open, 1026 closed Wednesday, 16 January 13
  32. • 2 years of development • 8143 lines of code

    • 1759 commits from 90 people • 3364 followers, 561 forks • issues: 170 open, 1026 closed • pull requests: 40 open, 342 closed Wednesday, 16 January 13
  33. open source can be simple Wednesday, 16 January 13

  34. Wednesday, 16 January 13

  35. Wednesday, 16 January 13

  36. independence Wednesday, 16 January 13

  37. independence from data providers Wednesday, 16 January 13

  38. 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 Wednesday, 16 January 13
  39. 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 Wednesday, 16 January 13
  40. 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 Wednesday, 16 January 13
  41. 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 Wednesday, 16 January 13
  42. 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 Wednesday, 16 January 13
  43. simplicity Wednesday, 16 January 13

  44. var map = L.map('map') .setView([51.505, -0.09], 13); API: as simple

    as possible Wednesday, 16 January 13
  45. var map = L.map('map') .setView([51.505, -0.09], 13); L.tileLayer( 'http://{s}.tile.osm.org/{z}/{x}/{y}.png') .addTo(map);

    API: as simple as possible Wednesday, 16 January 13
  46. 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 Wednesday, 16 January 13
  47. code: simple outside, simple inside Wednesday, 16 January 13

  48. the poetry of code express deep meaning through simple words

    Wednesday, 16 January 13
  49. some code needs a comment? rewrite the code to be

    transparent instead Wednesday, 16 January 13
  50. backwards compatibility Wednesday, 16 January 13

  51. backwards compatibility Wednesday, 16 January 13

  52. backwards compatibility full throttle! continuous API improvement (well-documented) Wednesday, 16

    January 13
  53. modern legacy (IE 6-8) mobile (iOS, Android) browser support Wednesday,

    16 January 13
  54. modern legacy (IE 6-8) mobile (iOS, Android) browser support Wednesday,

    16 January 13
  55. modern mobile legacy (accessible) поддержка браузеров Wednesday, 16 January 13

  56. fast responsive lightweight Wednesday, 16 January 13

  57. (min, gzip) JS 27KB CSS 1.8KB PNG 3.2KB Wednesday, 16

    January 13
  58. Wednesday, 16 January 13

  59. mourner.github.com/simplify-js Wednesday, 16 January 13

  60. design matters as much as code Wednesday, 16 January 13

  61. Wednesday, 16 January 13

  62. Wednesday, 16 January 13

  63. kaizen continuous improvement Wednesday, 16 January 13

  64. Thanks! Questions? Vladimir Agafonkin agafonkin@gmail.com Wednesday, 16 January 13

  65. flickr.com/photos/96dpi/2886663273/ flickr.com/photos/pesis/4870052004/ flickr.com/photos/didmyself/5274561305/ photos used (Creative Commons) Wednesday, 16 January

    13