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.
Table des matières de cette formation JavaScript (durée : 46m29s)
-
Installation du plugin
- Présentation gratuit 00:02:34
- Installation des scripts de base gratuit 00:02:54
- Installation de la couche de fond 00:05:33
- Installation de la couche de la carte 00:03:03
-
Manipulation de la carte
- Définition des Zooms gratuit 00:02:49
- Changer de carte 00:01:34
- Installer un marqueur 00:01:27
- Installer un popup 00:02:55
-
Plusieurs marqueurs
- Mise en place de plusieurs marqueurs 00:05:46
- Rendre les marqueurs dynamiques 00:02:30
-
Personnalisation du marqueur
- Mise en place d'un marqueur personnalisé 00:04:00
- Déplacement du popup 00:01:37
-
Ajout de nouvelles infos sur la carte
- Ajout d'un cercle 00:05:52
- Ajout d'un polygone 00:02:22
-
Conclusion
- Conclusion 00:01:33
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Merci pour le cours.
-
Avec quelle version de logiciel ce tuto est-il compatible ?JavaScript
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissé