Créer des cartes à l'aide de Leaflet
ERROR
00:00
00:00

TUTO Créer des cartes à l'aide de Leaflet

Codeconcept
19,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Introduction
Chapitre 2
Markers, layers et popups
Chapitre 3
Markers personnalisés
Chapitre 4
Ajouter un cercle et le contrôler depuis un curseur extérieur
Chapitre 5
Trouver une adresse à partir de coordonnées GPS

Plan détaillé du cours

Chapitre 1 : Introduction
13m15s
 
Leçon 1Pourquoi utiliser Leaflet plutôt que Google Maps ?
Leçon 2Créer notre première carte leaflet
Chapitre 2 : Markers, layers et popups
27m17s
 
Leçon 1Ajouter des markers
Leçon 2Utiliser d'autres layers
Leçon 3Afficher les nouvelles coordonnées dans la page html
Leçon 4Créer une popup
Chapitre 3 : Markers personnalisés
10m01s
 
Leçon 1Associer une icône personnalisée à un marker
Leçon 2Positionner une popup sur notre marker personnalisé
Chapitre 4 : Ajouter un cercle et le contrôler depuis un curseur extérieur
13m26s
 
Leçon 1Ajouter un cercle sur notre carte
Leçon 2Brancher un range element sur le cercle de notre carte
Chapitre 5 : Trouver une adresse à partir de coordonnées GPS
24m33s
 
Leçon 1Utiliser le service de geocoding
Leçon 2Afficher l'adresse
Leçon 3Ecouter des événements émis par une carte
Leçon 4Ajouter et supprimer des listeners sur une map

Aperçus

Avis des apprenants

Détail des avis
8
Apprenants
2
Commentaires
4,5/5
Note moyenne
5/5
1
4/5
1
3/5
0
2/5
0
1/5
0
Ogoxe Ogoxe
Ogoxe Ogoxe
Publié le 28/03/2020
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.
Jean-Pierre Bernard
Jean-Pierre Bernard
Publié le 18/10/2019
Bon tuto avec des cas bien concrès

Vos questions sur le cours

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.

Attendez ! 🤗

Accédez à plus de 1330 tutos gratuits

Notre politique de protection des données