Couches et Interactivité avec Leaflet
En cours de chargement…
Recharger le document 
Ouvrir dans un nouvel onglet Diapo 1: Introduction aux couches (Layers)
Explication : Les couches dans Leaflet sont des objets géographiques que l’on ajoute à une carte. Il existe principalement deux types :
Couches de tuiles : Ces couches servent de fond pour la carte (par exemple, OpenStreetMap).
Couches vectorielles : Elles sont utilisées pour ajouter des éléments géographiques tels que des points, des lignes ou des polygones.
Diapo 2: Ajouter une couche de tuiles
Explication : Les couches de tuiles affichent l’image de fond de la carte. L’exemple montre comment ajouter une couche OpenStreetMap via la méthode L.tileLayer().
Exemple de code :
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);Les tuiles permettent de visualiser le fond de la carte tout en affichant d’autres éléments géographiques.
Diapo 3 : Ajouter des polygones et des polylignes
Explication : Les polygones et polylignes sont utilisés pour ajouter des formes géométriques sur la carte. Les polylignes permettent de tracer des lignes (par exemple, des itinéraires), tandis que les polygones sont utilisés pour dessiner des zones (ex. : parcs, bâtiments).
Exemple de polyligne :
L.polyline([[48.8566, 2.3522], [48.8569, 2.3525]]).addTo(map); Exemple de polygone :
L.polygon([[48.8566, 2.3522], [48.8569, 2.3525], [48.8571, 2.3520]]).addTo(map); Ces éléments peuvent être utilisés pour définir des zones d’intérêt géographique.
Diapo 4 : Popups et tooltips
Explication : Les marqueurs sont utilisés pour placer des points sur la carte, et ils peuvent être associés à des popups ou tooltips. Les popups affichent des informations détaillées lorsque l’utilisateur clique sur un marqueur, tandis que les tooltips affichent des informations temporaires au survol du marqueur.
Exemple de popup :
L.marker([48.8566, 2.3522]).addTo(map) .bindPopup("Bienvenue à Paris!") .openPopup(); Exemple de tooltip :
L.marker([48.8566, 2.3522]).addTo(map) .bindTooltip("Paris", { permanent: true, direction: 'top' }) .openTooltip();Diapo 5 : Groupes de calques (LayerGroup)
Explication : Les groupes de calques sont utilisés pour organiser plusieurs éléments géographiques sous un même groupe. Cela permet de gérer plus facilement l’affichage ou le masquage de plusieurs objets sur la carte en une seule opération.
Exemple de code :
var markers = L.layerGroup([marker1, marker2, marker3]).addTo(map);Ici, les marqueurs sont ajoutés à un groupe, ce qui facilite la gestion des éléments géographiques sur la carte.
Diapo 6 : Contrôle des couches (Layer Control)
Explication : Le contrôle des couches permet à l’utilisateur de choisir quelles couches afficher ou masquer sur la carte. Cela inclut la possibilité d’activer des couches de tuiles différentes ou des éléments vectoriels comme des marqueurs ou des polygones. Le contrôle des couches est une fonctionnalité clé pour les cartes interactives.
Exemple de code :
var baseMaps = { "OpenStreetMap": osmLayer, "Satellite": satelliteLayer};var overlayMaps = { "Marqueurs": markersLayer};L.control.layers(baseMaps, overlayMaps).addTo(map); Cela permet à l’utilisateur de basculer entre différentes couches d’affichage.
Diapo 7 : Ajouter une couche GeoJSON
Explication : Le GeoJSON est un format de données couramment utilisé pour afficher des objets géographiques. Leaflet permet de charger facilement des données GeoJSON et de les afficher sous forme de points, lignes ou polygones.
Exemple de code :
L.geoJSON(geojsonData).addTo(map);Cela permet de superposer des données géographiques externes directement sur la carte.
Diapo 8 : Événements utilisateur
Explication : Leaflet permet de gérer des événements utilisateur tels que le clic, le survol ou le glissement sur la carte. Ces événements peuvent être associés à des actions spécifiques, comme afficher des informations ou effectuer des calculs.
Exemple d’événement click sur la carte :
map.on('click', function(e) { alert("Vous avez cliqué sur la carte à " + e.latlng);});Cela ajoute de l’interactivité à la carte et permet aux utilisateurs d’interagir directement avec les éléments géographiques.
Exercice Séance 2– Gestion des couches et interactions dans Leaflet
Objectif :
Créer une carte avec plusieurs types de couches vectorielles, les organiser dans un groupe, y ajouter des popups, des tooltips, et gérer des événements utilisateur.
Fichier à créer : exercice-couches.html
Dans un éditeur de texte, copiez-collez le code suivant et enregistrez le fichier avec le nom exercice-couches.html.
<!DOCTYPE html><html><head> <title>Exercice Couches Leaflet</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> <style> #map { height: 500px; width: 100%; } </style></head><body> <h2>Gestion des couches et interactions</h2> <div id="map"></div> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> <script> var map = L.map('map').setView([-20.2, 57.5], 10); // Fond de carte var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); var toner = L.tileLayer('https://stamen-tiles.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png', { attribution: '© Stamen' }); // ➤ Polygone : zone var zone = L.polygon([ [-20.24, 57.48], [-20.26, 57.50], [-20.25, 57.52], [-20.23, 57.50] ], { color: 'green', fillOpacity: 0.4 }).bindPopup("Zone naturelle").bindTooltip("Zone verte"); // ➤ Polyligne : trajet var ligne = L.polyline([ [-20.17, 57.51], [-20.20, 57.54], [-20.22, 57.52] ], { color: 'blue', weight: 4 }).bindPopup("Trajet principal"); // ➤ Cercle var cercle = L.circle([-20.19, 57.48], { radius: 2000, color: 'red', fillOpacity: 0.3 }).bindPopup("Rayon de 2 km").bindTooltip("Zone d’influence"); // ➤ Couche GeoJSON var geojsonData = { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "nom": "Zone agricole" }, "geometry": { "type": "Polygon", "coordinates": [[[57.52, -20.24], [57.54, -20.24], [57.54, -20.22], [57.52, -20.22], [57.52, -20.24]]] } }] }; var geojsonLayer = L.geoJSON(geojsonData, { style: { color: "orange", weight: 2, fillOpacity: 0.5 }, onEachFeature: function (feature, layer) { layer.bindPopup("Nom : " + feature.properties.nom); layer.on("click", function () { console.log("Clic sur " + feature.properties.nom); map.fitBounds(layer.getBounds()); }); } }); // ➤ Groupes de couches var couchesVecteurs = L.layerGroup([zone, ligne, cercle]); var couchesGeoJSON = L.layerGroup([geojsonLayer]); // ➤ Contrôle des calques var fond = { "OpenStreetMap": osm, "Toner Lite": toner }; var donnees = { "Objets vectoriels": couchesVecteurs, "GeoJSON Zones": couchesGeoJSON }; L.control.layers(fond, donnees).addTo(map); // Ajout par défaut couchesVecteurs.addTo(map); couchesGeoJSON.addTo(map); </script></body></html>Instructions :
Modifications suggérées :
- Ajoutez un autre polygone GeoJSON avec un style différent.
- Personnalisez les tooltips (ajoutez des infos utiles).
- Modifiez le
layer.on('click')pour changer la couleur au clic ou ajouter un effet visuel.
Voir le résultat dans un nouvel onglet.
