Voici le premier volet d'une formation complète pour apprendre à utiliser la librairie Leaflet.
Leaflet est une bibliothèque JavaScript open source très populaire, utilisée pour créer des cartes interactives sur le web.
C'est un outil très léger, facile à utiliser et flexible, qui offre une grande variété de fonctionnalités pour la création de cartes, tout en restant simple et efficace.
Au programme de ce tuto Leaflet 1/12 - Prendre en main une carte OpenStreetMap
Nous allons apprendre à mettre en place une carte OpenStreetMap sur notre site Internet.
- Nous apprendrons à définir les longitudes et latitudes d'un lieu tel qu'une ville afin d'éditer un marqueur sur la carte, qui pointera sur cette ville.
- Nous apprendrons à personnaliser le marqueur de la carte en redéfinissant sa taille ainsi que son visuel.
- Nous verrons également comment définir plusieurs marqueurs sur la carte
- La possibilité pour l'utilisateur de faire apparaître des informations sous la forme d'un pop-up au niveau du marqueur.
- Nous verrons également comment mettre en place des niveaux de zoom personnalisés sur la carte.
- Nous terminerons ce 1er volet par un exercice pratique de validation des acquis.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Tous les fichiers de travail sont fournis !
Table des matières de cette formation JavaScript (durée : 2h01m)
-
Premiers pas avec OpenStreetMap
- Découvrir OpenStreetMap 00:06:20
- Installer la librairie leaflet 00:09:16
- Installer la couche de fond 00:10:56
- Installer la couche de carte 00:05:55
- Gérer le zoom de la carte 00:06:03
- Modifier la carte 00:02:46
- Installer la couche de marqueur 00:06:54
- Installer un popup 00:04:44
- Installer une couche de plusieurs marqueurs 00:08:24
- Dynamiser le contenu des popups 00:03:14
- Personnaliser le marqueur 00:10:58
- Déplacer les popups 00:02:19
-
Validation des acquis
- Découvrir l'exercice 00:05:12
- Mettre en place les bases 00:05:38
- Mettre en place la couche de fond et la couche de carte 00:07:55
- Mettre en place les marqueurs 00:13:39
- Afficher un marqueur personnalisé 00:08:55
-
Pour la prochaine fois
- Pour la prochaine fois 00:02:36
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Top ! très pédagogique
-
Merci Carl, pour ce 1ᵉʳ volet dédié à Leaflet. Comme à votre habitude, très bien expliqué. C'est un plaisir de vous suivre. Validé 100 % Leaflet #1/12
-
Apparemment, on s'oriente vers du (super) fullstack. Extra!
-
Que contient le fichier source ?Les codes du cours.
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés