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.

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