Formation Leaflet – Créez vos cartes interactives sur le web (environ 12 heures)
Objectif du cours
Ce cours vous propose une initiation complète à Leaflet, la bibliothèque JavaScript libre et légère dédiée à la création de cartes interactives web. À l’issue de la formation, vous serez capable de créer, personnaliser et publier vos propres cartes dynamiques avec données géographiques, popups, couches thématiques, et bien plus encore.
Public visé
Ce cours s’adresse :
- Aux débutants en cartographie web ;
- Aux professionnels SIG souhaitant intégrer leurs données sur une carte web ;
- Aux développeurs front-end curieux d’ajouter une brique cartographique à leurs projets.
Aucune connaissance préalable en Leaflet n’est requise. Une familiarité basique avec HTML/JavaScript est un plus, mais pas obligatoire.
Durée : environ 9-12 heures (réparties en 6 séances)
Programme :
- Introduction à Leaflet en ligne
– Installation, structure de base d’une carte
– Ajout de fonds de carte (OSM, basemaps tiers) - Couches et interactivité (mise en ligne le 24 /04/2025)
– Points, polylignes, polygones
– Personnalisation, événements, interactions - Couches GeoJSON et données externes (mise en ligne le 29 /04/2025)
– Chargement de données GeoJSON
– Affichage conditionnel, symboles dynamiques - Contrôles et outils d’interface (mise en ligne le 06 /05/2025)
– Tooltips, popups, légendes, groupes de calques
– Contrôle de couches et filtres simples - Événements utilisateur et interactivité (mise en ligne le 13 /05/2025)
– Réagir aux clics, survols, sélection d’éléments
– Création d’une carte interactive simple - Mini-projet de carte web personnalisée (mise en ligne le 15 /05/2025)
– Réalisation d’un mini-projet
– Mise en ligne (GitHub Pages ou autre solution gratuite)
Résultat attendu
À la fin du cours, vous serez capable de créer une carte Leaflet fonctionnelle avec vos propres données et de la mettre en ligne pour la partager avec le monde !
Soumettez votre projet individuel – Séance 6
Dans le cadre de la dernière séance de ce module, vous aurez réalisé un projet individuel intégrant les principaux éléments étudiés (couches, styles, interactions, contrôles, etc.).
Nous vous invitons à partager votre réalisation, pour bénéficier d’un retour personnalisé et, si vous le souhaitez, figurer parmi les exemples valorisés dans nos publications futures
Comment faire ?
Publiez votre projet (code et carte) sur GitHub ou un service équivalent (la méthode sera décrite dans la séance 6), puis vous nous enverrez le lien vers votre dépôt via un formulaire mis à votre disposition.
Les projets seront examinés selon les critères suivants :
- Bonne pratique de l’API Leaflet
- Lisibilité et organisation du code
- Qualité visuelle et fonctionnelle de la carte
- Pertinence du sujet et des données choisies
Pour le déroulé du cours, vous pouvez télécharger un kit de démarrage au format zip sur ce lien.
Dézippez le contenu dans un répertoire de votre choix où vous pourrez stocker tous les fichiers de ce cours.
Méthode pédagogique du cours Leaflet
Ce cours d’initiation à Leaflet.js, bibliothèque JavaScript de cartographie interactive, est conçu pour vous accompagner progressivement dans l’apprentissage, avec une approche active, visuelle et guidée.
Chaque séance suit une structure pédagogique simple et efficace :
1. Diaporama de présentation
Chaque session débute par un diaporama synthétique exposant les notions essentielles à retenir :
- concepts illustrés avec des exemples concrets,
- extraits de code commentés,
- schémas ou captures d’écran,
- icônes et repères visuels pour faciliter la mémorisation.
L’objectif : comprendre rapidement les fonctions et les possibilités de Leaflet.
2. Texte explicatif détaillé
Chaque diapositive est accompagnée d’un texte explicatif pédagogique, qui :
- développe le contenu du diaporama,
- explique le “pourquoi” et le “comment” derrière chaque fonction,
- propose des variantes de code ou des astuces supplémentaires,
- introduit les bonnes pratiques et les erreurs fréquentes à éviter.
Ce texte est pensé comme un support de lecture autonome, à consulter avant ou après la séance.
3. Exercice pratique en fin de séance
À la fin de chaque session, vous trouverez un exercice concret à réaliser :
- application directe des notions abordées,
- scénario réaliste : carte d’un lieu, ajout de marqueurs, style dynamique, etc.
- consignes claires, avec des étapes guidées si besoin.
L’exercice est une étape essentielle pour ancrer les apprentissages et tester votre compréhension.
4. Corrigé accessible… mais après l’effort !
Un lien en fin d’article vous permet d’accéder au corrigé de l’exercice, avec :
- une solution commentée,
- du code fonctionnel à copier-coller ou adapter,
- parfois des variantes ou pistes d’amélioration.
Il est fortement recommandé de réaliser l’exercice par vous-même avant de consulter la solution.
C’est la meilleure façon de progresser en autonomie, de renforcer votre mémoire, et de vous approprier les concepts.
En résumé
Chaque séance du cours repose sur :
- un diaporama visuel pour comprendre rapidement,
- un texte explicatif clair pour approfondir,
- un exercice pratique pour expérimenter,
- un corrigé guidé pour vous corriger et aller plus loin.
Cette méthode vous permet d’apprendre Leaflet pas à pas, à votre rythme, que vous soyez débutant ou que vous ayez déjà quelques bases en HTML/JavaScript.
Prêt(e) à commencer ?
Rendez-vous dans la première séssion : Afficher une carte avec Leaflet !
