Leaflet - it's time to leave Google Maps - JSC 2019

Talk donné au JugSummerCamp 2019

Pour afficher une map sur le web, la plupart des développeurs pense directement à GoogleMaps. Mais il existe une vraie alternative gratuite : Leaflet.

Leaflet est une lib JavaScript open source qui offre de nombreuses possibilités, permettant des cas d'utilisation basiques comme des scénarios plus avancés. Durant cette session, je présenterai les bases de cette lib et je montrerai sa simplicité d'utilisation avec différents exemples.

Transcript

1. Leaflet - it’s time to leave GoogleMaps Guillaume Soldera - @gsoldera
2. Développeur SERLI @gsoldera #React #JavaScript #Play #Scala #PWA #Elastic #Leaflet Guillaume Soldera #JSC2019 #Leaflet @gsoldera
3. Les cartes sur le web #JSC2019 #Leaflet @gsoldera • Localiser un lieu et ses alentours • Visualiser des éléments autour d’un point • Data Visualization • Réflexe : Google Maps...
4. Les cartes sur le web #JSC2019 #Leaflet @gsoldera
5. Les cartes sur le web • Assemblage de tuiles (tiles) ◦ Tuile = simple image carrée "These tiles are typically 256x256 pixels and are placed side-by-side in order to create the illusion of a very large seamless image." —MapBox #JSC2019 #Leaflet @gsoldera
6. Les cartes sur le web 1 niveau de zoom = 1 ensemble de tuile 0 / 0 / 0 1 / 0 / 1 1 / 1 / 1 1 / 0 / 0 1 / 1 / 0 Zoom 0 Zoom 1 #JSC2019 #Leaflet @gsoldera
7. Les cartes sur le web A chaque niveau de zoom, le nombre de tuiles augmente de façon exponentielle #JSC2019 #Leaflet @gsoldera 00 Zoom 0 Zoom 1 Zoom 2 00 10 01 11 00 10 01 11 31 20 30 21 22 02 12 32 33 23 13 03
8. Leaflet • https://leafletjs.com • Lib JS Open-Source • Créée en 2011 par Vladimir Agafonkin (Mapbox) • Current version : 1.5.1 (Mai 2019) #JSC2019 #Leaflet @gsoldera
9. Leaflet • Mobile friendly (léger : 38Kb) ◦ Interactions fluides • Facilement personnalisable ◦ POO ⇒ héritage de classes existantes • Simple et facile à utiliser #JSC2019 #Leaflet @gsoldera
10. Leaflet - Démo #JSC2019 #Leaflet @gsoldera "L’important, ce ne sont pas les cartes, c’est ce que vous en faites" —Winamax
11. Leaflet • Grand choix de layers • Features essentielles ◦ Layer / Overlays ◦ Ajout de n’importe quel polygon ◦ Marker / Popup / Tooltip ... ◦ Facilement stylisable #JSC2019 #Leaflet @gsoldera
12. Leaflet - Plugins Clustering #JSC2019 #Leaflet @gsoldera
13. Leaflet - Plugins Heatmap #JSC2019 #Leaflet @gsoldera
14. Leaflet - Plugins TimeDimension #JSC2019 #Leaflet @gsoldera
15. Leaflet - Plugins Routing #JSC2019 #Leaflet @gsoldera
16. Leaflet - Users #JSC2019 #Leaflet @gsoldera
17. Merci ! #JSC2019 #Leaflet @gsoldera https://github.com/guillaumesoldera/Devoxx-Leaflet/tree/jsc-2019 https://leaflet.com