Capas e interactividad con Leaflet
Cargando…
Recargar el documento 
Abrir en una nueva pestaña Diapositiva 1: Introducción a las capas
Explicación:
Las capas en Leaflet son objetos geográficos que se añaden a un mapa. Existen dos tipos principales:
- Capas de mosaico: Se utilizan como fondo del mapa (por ejemplo, OpenStreetMap).
- Capas vectoriales: Se utilizan para añadir elementos geográficos como puntos, líneas o polígonos.
Diapositiva 2: Añadir una capa de mosaico
Explicación:
Las capas de mosaico muestran la imagen de fondo del mapa. El ejemplo muestra cómo añadir una capa de OpenStreetMap utilizando el método L.tileLayer().
Código de ejemplo:
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);Los mosaicos permiten ver el fondo del mapa mientras se muestran otros elementos geográficos.
Diapositiva 3 : Añadir polígonos y polilíneas
Explicación :
Los polígonos y las polilíneas se utilizan para añadir formas geométricas al mapa. Las polilíneas se utilizan para dibujar líneas (por ejemplo, rutas), mientras que los polígonos se utilizan para dibujar áreas (por ejemplo, parques, edificios).
Ejemplo de polilínea:
L.polyline([[48.8566, 2.3522], [48.8569, 2.3525]]).addTo(map);Ejemplo de polígono:
L.polygon([[48.8566, 2.3522], [48.8569, 2.3525], [48.8571, 2.3520]]).addTo(map);Estos elementos pueden utilizarse para definir áreas de interés geográfico.
Diapositiva 4 : Popups y tooltips
Explicación :
Los marcadores se utilizan para situar puntos en el mapa, y pueden asociarse a popups o tooltips. Los popups muestran información detallada cuando el usuario hace clic en un marcador, mientras que los tooltips muestran información temporal cuando el usuario pasa el ratón por encima del marcador.
Ejemplo de popup:
L.marker([48.8566, 2.3522]).addTo(map) .bindPopup("¡Bienvenido a París!") .openPopup();Ejemplo de tooltip:
L.marker([48.8566, 2.3522]).addTo(map) .bindTooltip("París", { permanent: true, direction: 'top' }) . openTooltip();Diapositiva 5 : LayerGroups
Explicación :
Los grupos de capas se utilizan para organizar varios elementos geográficos bajo un mismo grupo. Esto facilita mostrar u ocultar varios objetos en el mapa en una sola operación.
Ejemplo de código:
var markers = L.layerGroup([marker1, marker2, marker3]).addTo(map);Aquí, los marcadores se añaden a un grupo, facilitando la gestión de los elementos geográficos en el mapa.
Diapositiva 6: Control de capas
Explicación:
El control de capas permite al usuario elegir qué capas mostrar u ocultar en el mapa. Esto incluye la posibilidad de activar diferentes capas de azulejos o elementos vectoriales como marcadores o polígonos. El control de capas es una característica clave para los mapas interactivos.
Ejemplo de código:
var baseMaps = { "OpenStreetMap": osmLayer, "Satellite": satelliteLayer};var overlayMaps = { "Markers": markersLayer};L.control.layers(baseMaps, overlayMaps).addTo(map);Esto permite al usuario cambiar entre diferentes capas de visualización.
Diapositiva 7 : Añadir una capa GeoJSON
Explicación :
GeoJSON es un formato de datos utilizado habitualmente para mostrar objetos geográficos. Leaflet facilita la carga de datos GeoJSON y su visualización como puntos, líneas o polígonos.
Código de ejemplo:
L.geoJSON(geojsonData).addTo(map);Esto permite superponer datos geográficos externos directamente sobre el mapa.
Diapositiva 8 : Eventos de usuario
Explicación :
Leaflet le permite gestionar eventos de usuario como hacer clic, pasar el ratón o arrastrar sobre el mapa. Estos eventos pueden asociarse a acciones específicas, como mostrar información o realizar cálculos.
Ejemplo de un evento de clic en el mapa:
map.on('click', function(e) { alert("Ha hecho clic en el mapa en " + e.latlng);});Esto añade interactividad al mapa y permite a los usuarios interactuar directamente con los elementos geográficos.
Ejercicio Sesión 2- Gestión de capas e interacción en Leaflet
Objetivo:
Crear un mapa con varios tipos de capas vectoriales, organizarlas en un grupo, añadir popups y tooltips y gestionar los eventos de usuario.
Fichero a crear: exercise-layers.html
En un editor de texto, copie y pegue el siguiente código y guarde el fichero con el nombre exercise-layers.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>Instrucciones:
Cambios sugeridos:
- Añadir otro polígono GeoJSON con un estilo diferente.
- Personalizar los tooltips (añadir información útil).
- Modificar el layer.on(“click”) para cambiar el color al hacer clic o añadir un efecto visual.
Ver el resultado en una nueva pestaña.
