Depuis que Google Maps impose de saisir un numéro de carte bleue afin d'utiliser son (remarquable) service, cela a motivé certains développeurs à aller découvrir des concurrents. En tête de ceux-ci, la librairie Leaflet, open source et gratuite.
Ainsi, si vous souhaitez afficher des cartes interactives sur un site web, cette formation en vidéo est faite pour vous.
Nous mélangerons théorie et cas pratique.
Au programme de ce tuto Leaflet
Découvrez dans cette formation Leaflet en ligne qui va à l'essentiel comment :
- créer une carte,
- ajouter un marqueur,
- utiliser un des nombreux layers disponibles,
- écouter des events,
- afficher des popups.
Puis, une fois que vous aurez acquis ces compétences essentielles, nous élèverons le niveau en ajoutant des fonctionnalités fréquemment demandées :
- ajouter des marqueurs personnalisés,
- ajouter un cercle sur une carte autour d'une région,
- interagir à l'aide d'un curseur en dehors de votre carte sur le cercle de votre carte.
Enfin, nous ajouterons encore de nouvelles fonctionnalités moins demandées, mais indispensable dans certaines applications :
- utiliser un service de geocoding permettant d'afficher une adresse à partir de coordonnées GPS,
- écouter des événements émis par une carte,
- ajouter et supprimer des listeners sur une map,
Tout cela sans plus avoir à payer de frais de licence (pour rappel, leaflet est totalement gratuit et opensource).
Les fichiers sources sont fournis avec le cours.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur le tuto.
Bonne découverte de Leaflet !
Table des matières de cette formation JavaScript (durée : 1h28m)
-
Introduction
- Pourquoi utiliser Leaflet plutôt que Google Maps ? gratuit 00:01:02
- Créer notre première carte leaflet 00:12:13
-
Markers, layers et popups
- Ajouter des markers 00:08:00
- Utiliser d'autres layers 00:05:35
- Afficher les nouvelles coordonnées dans la page html 00:10:16
- Créer une popup 00:03:26
-
Markers personnalisés
- Associer une icône personnalisée à un marker 00:07:39
- Positionner une popup sur notre marker personnalisé 00:02:22
-
Ajouter un cercle et le contrôler depuis un curseur extérieur
- Ajouter un cercle sur notre carte 00:07:24
- Brancher un range element sur le cercle de notre carte 00:06:02
-
Trouver une adresse à partir de coordonnées GPS
- Utiliser le service de geocoding 00:10:00
- Afficher l'adresse 00:03:08
- Ecouter des événements émis par une carte 00:02:15
- Ajouter et supprimer des listeners sur une map 00:09:10
- Fichiers sourcestélécharger
- Certificat
Formateur : Codeconcept
-
Va à l'essentiel, explications claires par l'exemple, mais formation trop courte, on aimerait faire le tour de toutes les possibilités qu'offre Leaflet.
-
Bon tuto avec des cas bien concrès
-
Avec quelle version de logiciel ce tuto est-il compatible ?JavaScript
-
Quel est le niveau requis pour suivre ce tuto ?intermédiaire
-
Bonjour, est-ce que ce tuto explique aussi comment personnaliser l'apparence graphique (couleurs ou thème) des cartes pour l'adapter visuellement à son site ?Bonjour, ce tuto montre comment changer de layer (en utilisant une des nombreuses layers créées par la communauté) et donc de modifier l'apparence d'une carte. En revanche, il n'apprend pas à créer sa propre layer totalement custom.
note moyenne
avis laissés