Leaflet - it's time to leave Google Maps

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 #DevoxxFR Guillaume Soldera @gsoldera
2. Développeur SERLI @gsoldera #React #JavaScript #Play #Scala #PWA #Elastic #Leaflet Guillaume Soldera #DevoxxFR
3. Les cartes sur le web #DevoxxFR • Localiser un lieu et ses alentours • Visualiser des éléments autour d’un point • Data Visualization • Réflexe : Google Maps... Guillaume Soldera @gsoldera
4. Les cartes sur le web #DevoxxFR Guillaume Soldera @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 #DevoxxFR Guillaume Soldera @gsoldera
6. Les cartes sur le web 1 niveau de zoom = 1 ensemble de tuiles 0 / 0 / 0 1 / 0 / 1 1 / 1 / 1 1 / 0 / 0 1 / 1 / 0 Zoom 0 Zoom 1 #DevoxxFR Guillaume Soldera @gsoldera
7. Les cartes sur le web A chaque niveau de zoom, le nombre de tuiles augmente de façon exponentielle 00 Zoom 0 Zoom 1 #DevoxxFR Zoom 2 00 10 01 11 00 10 01 11 31 20 30 21 22 02 12 32 33 23 13 03 Guillaume Soldera @gsoldera
8. Disclaimer #DevoxxFR La terre n’est pas plate ! —Wikipedia
9. Leaflet • https://leafletjs.com/ • Lib JS Open-Source • Créée en 2011 par Vladimir Agafonkin (Mapbox) • Version actuelle : 1.4.0 (Décembre 2018) #DevoxxFR Guillaume Soldera @gsoldera
10. Leaflet • Mobile friendly (léger : 38Kb) ◦ Interactions fluides • Facilement personnalisable ◦ POO ⇒ héritage de classes existantes • Simple et facile à utiliser #DevoxxFR Guillaume Soldera @gsoldera
11. Leaflet - Démo #DevoxxFR "L’important, ce ne sont pas les cartes, c’est ce que vous en faites" —Winamax Guillaume Soldera @gsoldera
12. Leaflet • Grand choix de layers • Features essentielles ◦ Layer / Overlays ◦ Ajout de n’importe quel polygon ◦ Marker / Popup / Tooltip ... ◦ Facilement stylisable #DevoxxFR Guillaume Soldera @gsoldera
13. Leaflet - Plugins Clustering #DevoxxFR Guillaume Soldera @gsoldera
14. Leaflet - Plugins Heatmap #DevoxxFR Guillaume Soldera @gsoldera
15. Leaflet - Plugins TimeDimension #DevoxxFR Guillaume Soldera @gsoldera
16. Leaflet - Plugins Routing #DevoxxFR Guillaume Soldera @gsoldera
17. Leaflet - Users #DevoxxFR Guillaume Soldera @gsoldera
18. Merci ! #DevoxxFR https://github.com/guillaumesoldera/Devoxx-Leaflet/tree/devoxx-france https://leaflet.com Guillaume Soldera @gsoldera