Manipuler une carte OpenStreetMap avec Leaflet JS
ERROR
00:00
00:00

TUTO Manipuler une carte OpenStreetMap avec Leaflet JS

Carl Brison
12,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce tuto, nous allons apprendre à manipuler une cartographie en utilisant la librairie JavaScript Leaflet.

Leaflet est une bibliothèque JavaScript libre qui vous permet d'ajouter de l'interactivité sur une carte. Nous allons l'utiliser avec OpenStreetMap, logiciel de cartographie qui propose des cartes opensource.

Ces 2 services vous permettront de voir comment ajouter une carte sur votre site et comment manipuler cette carte en y ajoutant de l'interactivité.
 

Au programme de ce tuto comment manipuler une carte OpenStreetMap avec Leaflet JS 

  • Nous allons apprendre à éditer une carte,
  • Lui donner une taille,
  • Gérer les Zooms,
  • Nous apprendrons à manipuler des marqueurs. Nous installerons un puis plusieurs marqueurs sur la carte (nous personnaliserons également les marqueurs),
  • Nous en profiterons pour installer une popup sur les marqueurs, il s'agit de point d'informations que l'on couple aux marqueurs.

A la fin de ce tuto en vidéo, vous saurez comment éditer et manipuler très facilement une carte OpenStreetMap en utilisant la librairie JavaScript Leaflet.

Je mets à votre disposition, l'ensemble des codes utilisés dans ce tutoriel.
Je reste disponible dans le salon d'entraide pour répondre à vos questions. 
Un QCM est également disponible en fin de formation pour valider vos compétences.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Installation du plugin
Chapitre 2
Manipulation de la carte
Chapitre 3
Plusieurs marqueurs
Chapitre 4
Personnalisation du marqueur
Chapitre 5
Ajout de nouvelles infos sur la carte
Chapitre 6
Conclusion

Plan détaillé du cours

Chapitre 1 : Installation du plugin
14m04s
 
Leçon 1Présentation
Leçon 2Installation des scripts de base
Leçon 3Installation de la couche de fond
Leçon 4Installation de la couche de la carte
Chapitre 2 : Manipulation de la carte
08m45s
 
Leçon 1Définition des Zooms
Leçon 2Changer de carte
Leçon 3Installer un marqueur
Leçon 4Installer un popup
Chapitre 3 : Plusieurs marqueurs
08m16s
 
Leçon 1Mise en place de plusieurs marqueurs
Leçon 2Rendre les marqueurs dynamiques
Chapitre 4 : Personnalisation du marqueur
05m37s
 
Leçon 1Mise en place d'un marqueur personnalisé
Leçon 2Déplacement du popup
Chapitre 5 : Ajout de nouvelles infos sur la carte
08m14s
 
Leçon 1Ajout d'un cercle
Leçon 2Ajout d'un polygone
Chapitre 6 : Conclusion
01m33s
 
Leçon 1Conclusion

Avis des apprenants

Détail des avis
17
Apprenants
1
Commentaire
5/5
Note moyenne
5/5
1
4/5
0
3/5
0
2/5
0
1/5
0
David Ansoumane Haba
David Ansoumane Haba
Publié le 20/08/2020
Merci pour le cours.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire ;-)

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 ?

débutant

Attendez ! 🤗

Accédez à plus de 1351 tutos gratuits

Notre politique de protection des données