Tutoriel Leaflet: session 1

22 avril 202528 avril 2025 Atilio Francois No Comments

Initiation à Leaflet
Bienvenue dans le cours d’initiation à Leaflet.js

Créer des cartes interactives sur le Web n’a jamais été aussi simple.
Avec la bibliothèque JavaScript Leaflet, vous allez apprendre à représenter des lieux, des itinéraires, des données, et à enrichir vos cartes avec des marqueurs, des styles, des interactions et bien plus encore.

Objectif du cours

Ce cours a pour objectif de vous rendre autonome dans la création de cartes interactives, à l’aide de Leaflet.
À l’issue du programme, vous serez capable de :

Afficher une carte centrée sur un lieu,

Ajouter des marqueurs, polygones, images, etc.,

Styliser et personnaliser vos objets cartographiques,

Intégrer des interactions (clics, survols, popups),

Et même publier votre carte sur le Web.

Aucune expérience préalable avec Leaflet n’est requise. Une base en HTML/JavaScript est utile mais non obligatoire : tout est expliqué pas à pas.

Organisation du cours

Chaque séance suit une progression logique :

Un diaporama synthétique pour introduire les notions clés

Un texte explicatif qui détaille chaque point

Un exercice pratique pour appliquer ce que vous avez appris

Un corrigé accessible pour vérifier votre travail

Durée recommandée par séance : environ 1-2 heures.
Vous pouvez suivre le rythme en autonomie, à votre convenance.

Matériel nécessaire

Un navigateur Web (Chrome, Firefox…)

Un éditeur de code (Visual Studio Code, ou même un éditeur en ligne comme JSFiddle ou CodePen)

Une connexion Internet (pour charger les fonds de carte)

Télécharger ici le starter kit, à décompresser dans un répertoire de votre choix.

starter kit

1 fichier·s 0.00 KB

Télécharger

Une méthode simple et active

Ce cours met l’accent sur l’apprentissage par la pratique.
Le but n’est pas seulement de lire, mais de tester, modifier, expérimenter. Plus vous jouerez avec le code, plus vous retiendrez naturellement les concepts.

Allez! C’est parti!

En cours de chargement…

Cela prend trop de temps ?

Recharger le document

Ouvrir dans un nouvel onglet

Table of Contents

Diapo 1 :Qu’est-ce que Leaflet ?

Introduction à Leaflet

Leaflet est une librairie JavaScript open-source légère et puissante qui permet de créer des cartes interactives et dynamiques sur des pages web. C’est l’un des outils les plus populaires pour les cartes web, et il est largement utilisé pour sa simplicité et sa capacité à s’intégrer avec des sources de données géographiques diverses.

Les principales caractéristiques de Leaflet

Légèreté : Leaflet est une librairie très légère (environ 40 Ko compressés), ce qui la rend idéale pour les applications web où la performance est essentielle.

Facilité d’utilisation : Avec une syntaxe simple et claire, Leaflet est accessible même pour les débutants en JavaScript.

Extensibilité : Bien que la librairie de base offre des fonctionnalités essentielles pour les cartes interactives, Leaflet peut être étendu avec de nombreux plugins pour ajouter des fonctionnalités supplémentaires (par exemple, la gestion de couches, la géolocalisation, le dessin de formes géographiques, etc.).

Compatibilité avec d’autres formats : Leaflet peut facilement être utilisé avec des tuiles raster (images cartographiques) et des données vectorielles (GeoJSON, KML, etc.).

Pourquoi utiliser Leaflet ?

Leaflet permet de construire des cartes web qui répondent à des besoins variés, allant des simples cartes de localisation à des visualisations de données géospatiales complexes. Voici quelques exemples de cas d’utilisation de Leaflet :

Affichage de cartes interactives avec des tuiles comme OpenStreetMap, Mapbox, ou d’autres services de tuiles.

Création de cartes systèmes d’information géographique (SIG) légères pour la visualisation de données géospatiales.

Cartes de suivi en temps réel (par exemple, pour suivre des véhicules ou des personnes).

Applications de géolocalisation, pour afficher des positions sur des cartes.

Cartes utilisées dans des applications de tourisme, où des points d’intérêt ou des itinéraires sont indiqués.

Diapo 2: Composants de base

1. La carte (`L.map`)

C’est le conteneur principal de votre application cartographique.

let map = L.map('map').setView([48.8566, 2.3522], 13);  // Paris avec un zoom de 13

2. Les fonds de carte (tiles / tuiles)

Ce sont des images découpées en petites tuiles (256×256 px) chargées en fonction du niveau de zoom et de la position.

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; OpenStreetMap contributors'
}).addTo(map);

3. Les marqueurs (`L.marker`)

Ils indiquent une position précise sur la carte (souvent avec une icône ou un symbole).

L.marker([48.8566, 2.3522]).addTo(map)
  .bindPopup('Paris').openPopup();

4. Les formes vectorielles

Leaflet permet de dessiner :

Polygones (L.polygon)

Polylignes (L.polyline)

Cercles (L.circle)

Rectangles (L.rectangle)

Exemple :

L.polygon([
  [48.85, 2.35],
  [48.85, 2.37],
  [48.87, 2.37]
]).addTo(map);

5. Les popups et tooltips

Pour afficher des informations en survol ou au clic.

marker.bindPopup("Voici un popup");
marker.bindTooltip("Un petit tooltip", {permanent: true});

6. Le contrôle des calques (`L.control.layers`)

Pour basculer entre plusieurs fonds de carte ou couches d’information.

let baseMaps = {
  "OSM": osmLayer,
  "Satellite": satelliteLayer
};

let overlayMaps = {
  "Réseaux": networkLayer
};

L.control.layers(baseMaps, overlayMaps).addTo(map);

7. Les événements

Chaque élément (carte, marqueur, polygone…) peut écouter des événements : clics, survols, zoom, etc.

map.on('click', function(e) {
  alert("Coordonnées : " + e.latlng);
});

8. Les couches GeoJSON

Pour afficher des données vectorielles dynamiques (souvent issues de bases de données ou fichiers).

L.geoJSON(geojsonData).addTo(map);

9. Les plugins

Leaflet a une grande communauté. Vous pouvez ajouter des fonctions comme la recherche, les clusters, les mesures, etc., via des plugins.

Exemples :

Leaflet.draw (dessin interactif)

Leaflet.markercluster

Leaflet.fullscreen

Diapo 3: Exemple de carte leaflet

Exemple basique d’utilisation de Leaflet

Explication : Cette diapositive décompose l’étape d’initialisation d’une carte avec Leaflet. L’exemple de code montre comment :

Initialiser la carte avec L.map(‘id’).

Positionner la carte au centre avec setView(), en définissant les coordonnées géographiques (latitude, longitude) et le niveau de zoom.

Ajouter une couche de tuiles avec L.tileLayer(), en utilisant des tuiles gratuites d’OpenStreetMap.

L’objectif est de comprendre comment définir les paramètres de base pour afficher une carte Leaflet.

Voici un exemple simple pour initialiser une carte Leaflet et ajouter un marqueur :

exemple_leaflet.html

<!DOCTYPE html>

<html>

<head>

<title>Exemple Leaflet</title>

<style>

#map { height: 400px; }

</style>

</head>

<body>

<h3>Ma première carte avec Leaflet</h3>

var map = L.map(‘map’).setView([48.8566, 2.3522], 13); // Coordonnées de Paris

// Ajout d’une couche de tuiles

L.tileLayer(‘https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’, {

attribution: ‘© <a href= »https://www.openstreetmap.org/copyright »>OpenStreetMap</a> contributors’

}).addTo(map);

// Ajout d’un marqueur

L.marker([48.8566, 2.3522]).addTo(map)

.bindPopup(« <b>Paris</b><br>La capitale de la France »)

.openPopup();

</script>

</body>

</html>

Ce code crée une carte centrée sur Paris, avec un marqueur qui affiche un popup contenant un texte descriptif. Les utilisateurs peuvent zoomer, déplacer la carte, et interagir avec cette carte.

Voir la carte dans un nouvel onglet.

Diapo 4: Ajouter un marqueur et un popup

Explication : Cette diapositive montre comment ajouter un marqueur à la carte. Le marqueur représente un point géographique, et une fois qu’il est ajouté, une popup peut être associée pour afficher des informations lorsque l’utilisateur clique sur ce marqueur. Le code L.marker().addTo(map) est utilisé pour créer un marqueur, et bindPopup() pour lier une fenêtre contextuelle contenant un message.

Diapo 5: Personnaliser un marqueur avec une icône

Explication : Les marqueurs dans Leaflet peuvent être personnalisés avec des icônes pour les rendre plus visuels et représentatifs. Cette diapositive montre comment utiliser la classe L.icon() pour créer une icône personnalisée, puis l’appliquer au marqueur via l’option icon. Cela permet de personnaliser l’apparence du marqueur en fonction du contexte de l’application (par exemple, un marqueur représentant une station-service ou un hôtel avec des icônes spécifiques).

Diapo 6 : Ajouter plusieurs marqueurs à une carte

Explication : Lorsque plusieurs points d’intérêt doivent être ajoutés à la carte, cette diapositive explique comment procéder. On peut créer plusieurs marqueurs, chacun avec des coordonnées spécifiques, puis les ajouter à la carte. Un exemple de code montre la création d’un tableau de coordonnées, puis la boucle forEach() pour ajouter les marqueurs à la carte. Cela permet d’ajouter des centaines ou des milliers de points sans surcharge de code.

Diapo 7 : Structure de base d’une page leaflet

Résumé des éléments clés :

Un <div id="map"> pour contenir la carte.

Le CSS obligatoire pour définir la taille du conteneur.

Les liens vers les fichiers Leaflet (CSS + JS).

Un script JavaScript pour :
- créer la carte,
- ajouter un fond de carte,
- éventuellement ajouter des couches, marqueurs, popups, etc.

<!DOCTYPE html>
<html>
<head>

<title>Ma première carte Leaflet</title>

<style>       
Définition de la carte
</style>
</head>
<body>   
<h1>Carte interactive avec Leaflet</h1>

… Les éléments de la carte
</script>
</body>
</html>

EXERCICE PRATIQUE

Exercice – Séance 1 : Ma première carte interactive

Objectif :

Créer une carte interactive centrée sur votre ville avec trois points d’intérêt que vous choisissez (lieux touristiques, lieux personnels, etc.).

Étapes à suivre :

Créer un fichier index.html
Ce fichier contiendra le code de votre carte.

Ajouter les ressources Leaflet
Dans la balise head, collez ce code pour charger la bibliothèque Leaflet :
- <link rel= »stylesheet » href= »https://unpkg.com/leaflet@1.9.4/dist/leaflet.css » /> <script src= »https://unpkg.com/leaflet@1.9.4/dist/leaflet.js »></script>

Préparer une zone d’affichage pour la carte
Dans le body , ajoutez une div avec un identifiant map et donnez-lui une hauteur dans une balise
- <div id= »map » style= »height: 400px; »></div>

Initialiser la carte
Dans une balise script
- // Crée une carte centrée sur votre ville (par exemple Paris) var map = L.map(‘map’).setView([48.8566, 2.3522], 13); // Ajoute une couche de fond (OpenStreetMap) L.tileLayer(‘https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’, { attribution: ‘© OpenStreetMap contributors’ }).addTo(map);

Ajouter 3 marqueurs personnalisés
Placez trois points sur votre carte avec des bulles d’information :
- L.marker([48.8584, 2.2945]).addTo(map).bindPopup(« Tour Eiffel »); L.marker([48.8606, 2.3376]).addTo(map).bindPopup(« Louvre »); L.marker([48.8738, 2.2950]).addTo(map).bindPopup(« Arc de Triomphe »);

Bonus :

Ajoutez une interaction pour afficher les coordonnées quand on clique sur la carte :

map.on(‘click’, function(e) {

alert(« Coordonnées : » + e.latlng);

});

Résultat attendu :

Une carte s’affiche au centre de votre navigateur, zoomée sur votre ville, avec trois marqueurs. En cliquant sur chaque marqueur, une info-bulle s’ouvre. Un clic n’importe où sur la carte affiche les coordonnées du point.

Voir le résultat pour Paris dans un nouvel onglet

Voir le résultat pour l’Ile Rodrigues dans un nouvel onglet.

<-Programme et méthode

->Session 2 : Couches et interactivité

Si cet article vous a intéressé et que vous pensez qu'il pourrait bénéficier à d'autres personnes, n'hésitez pas à le partager sur vos réseaux sociaux en utilisant les boutons ci-dessous. Votre partage est apprécié !