Layers and interactivity with Leaflet
Loading…
Reload document 
Open in new tab Slide 1: Introduction to Layers
Explanation:
Layers in Leaflet are geographic objects added to a map. There are two main types:
- Tile layers: These are used as a background for the map (e.g. OpenStreetMap).
- Vector layers: These are used to add geographic elements such as points, lines or polygons.
Slide 2: Adding a tile layer
Explanation:
Tile layers display the background image of the map. The example shows how to add an OpenStreetMap layer via the L.tileLayer() method.
Example code:
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);Tiles allow you to view the map background while displaying other geographic elements.
Slide 3 : Adding polygons and polylines
Explanation :
Polygons and polylines are used to add geometric shapes to the map. Polylines are used to draw lines (e.g. routes), while polygons are used to draw areas (e.g. parks, buildings).
Example of a polyline:
L.polyline([[48.8566, 2.3522], [48.8569, 2.3525]]).addTo(map);Example of a polygon:
L.polygon([[48.8566, 2.3522], [48.8569, 2.3525], [48.8571, 2.3520]]).addTo(map);These elements can be used to define areas of geographical interest.
Slide 4: Popups and tooltips
Explanation:
Markers are used to place points on the map, and can be associated with popups or tooltips. Popups display detailed information when the user clicks on a marker, while tooltips display temporary information when the user hovers over the marker.
Popup example:
L.marker([48.8566, 2.3522]).addTo(map) .bindPopup("Welcome to Paris!") .openPopup();Tooltip example:
L.marker([48.8566, 2.3522]).addTo(map) .bindTooltip("Paris", { permanent: true, direction: 'top' }) . openTooltip();Slide 5: LayerGroups
Explanation:
LayerGroups are used to organize several geographic elements under a single group. This makes it easier to display or hide several objects on the map in a single operation.
Code example:
var markers = L.layerGroup([marker1, marker2, marker3]).addTo(map);Here, markers are added to a group, making it easier to manage geographic elements on the map.
Slide 6: Layer Control
Explanation:
Layer Control allows the user to choose which layers to show or hide on the map. This includes the ability to activate different tile layers or vector elements such as markers or polygons. Layer control is a key feature for interactive maps.
Example code:
var baseMaps = { "OpenStreetMap": osmLayer, "Satellite": satelliteLayer};var overlayMaps = { "Markers": markersLayer};L.control.layers(baseMaps, overlayMaps).addTo(map);This allows the user to switch between different display layers.
Slide 7: Adding a GeoJSON layer
Explanation:
GeoJSON is a data format commonly used to display geographic objects. Leaflet makes it easy to load GeoJSON data and display it as points, lines or polygons.
Example code:
L.geoJSON(geojsonData).addTo(map);This allows external geographic data to be superimposed directly on the map.
Slide 8: User events
Explanation:
Leaflet lets you manage user events such as clicking, hovering or dragging on the map. These events can be associated with specific actions, such as displaying information or performing calculations.
Example of a click event on the map:
map.on('click', function(e) { alert("You have clicked on the map at " + e.latlng);});This adds interactivity to the map and allows users to interact directly with geographic elements.
Exercise Session 2- Layer management and interaction in Leaflet
Objective:
Create a map with several types of vector layers, organize them in a group, add popups and tooltips, and manage user events.
File to be created: exercise-layers.html
In a text editor, copy and paste the following code and save the file with the name exercise-layers.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:
Suggested changes:
- Add another GeoJSON polygon with a different style.
- Customize tooltips (add useful info).
- Modify layer.on(‘click’) to change color on click or add a visual effect.
View the result in a new tab.
