Blog SIG & Territorios

Cargando…

¿Tarda demasiado?

Recargar el documento

| Abrir en una nueva pestaña

Diapositiva 1 : Principales eventos en Leaflet

En Leaflet, los eventos juegan un papel clave para hacer que los mapas sean interactivos y receptivos. Leaflet puede manejar una amplia gama de eventos que ocurren en el mapa, capas u objetos específicos (como marcadores o polígonos). Estos eventos reaccionan a acciones del usuario como clics, movimientos del ratón, zooms, cambios de vista, etc. He aquí un resumen de los principales eventos de Leaflet, utilizados para añadir interactividad a sus mapas.

• clic» – clic en un elemento o en el mapa
• mouseover’ / ‘mouseout’ – mouse-over
• moveend’, ‘zoomend’ – fin de un movimiento o zoom
• …

Diapositiva 2: Eventos del mapa

Los eventos de mapa (o eventos globales) afectan a todo el mapa y suelen utilizarse para capturar acciones como cambios de vista, zoom o interacciones con el mapa.

a. zoom y zoomend

• -zoom: Este evento se activa cada vez que cambia el nivel de zoom del mapa, ya sea manual o programáticamente.
• -zoom out: Este evento se dispara una vez que el zoom ha finalizado por completo.

b. move y moveend

• -move: Este evento se dispara cada vez que se mueve el mapa (cuando cambia la vista del mapa).
• -moveend : Este evento se dispara cuando el movimiento del mapa ha finalizado.

c. clic

• -click: Este evento se dispara cuando el usuario hace clic en el mapa (en cualquier zona del mapa).

d. dblclick

• -dblclick: Este evento se activa cuando un usuario hace doble clic en el mapa. Puede utilizarse, por ejemplo, para hacer zoom.

Diapositiva 3: Eventos de capa

Los eventos específicos de capa se utilizan para capturar interacciones con elementos como marcadores, polígonos o círculos.

a. añadir y eliminar

• -add: Este evento se activa cuando se añade una capa al mapa.
• -Eliminar: Este evento se activa cuando se elimina una capa del mapa.

b. clic en una capa

• -click: Cuando un usuario hace clic en un elemento específico de la capa, como un marcador, polígono o círculo, se activa este evento.

c. mouseover y mouseout

• -mouseover: Este evento se dispara cuando el usuario pasa el ratón por encima de un elemento (como un marcador, polígono o línea).
• -mouseout: Este evento se dispara cuando el usuario abandona un elemento con el ratón.

d. arrastrar y arrastrar-final

• -drag: Este evento se dispara cuando el usuario arrastra un elemento (como un marcador) por el mapa.
• -dragend : Este evento se dispara cuando un elemento que ha sido arrastrado se detiene.

Diapositiva 4: Eventos de geometría (para objetos de datos geoespaciales)

Los eventos vinculados a objetos geoespaciales como polígonos, líneas y círculos capturan acciones como dibujar, modificar o borrar geometría.

a. crear (para dibujos)

• crear: Este evento se activa después de que un usuario haya creado una nueva geometría, por ejemplo un polígono o un círculo, utilizando una herramienta de dibujo.

Ejemplo :

var drawnItems = new L.FeatureGroup();

map.addLayer(drawnItems);

var drawControl = new L.Control.Draw({

  edit: { featureGroup: drawnItems }

});

map.addControl(drawControl);

map.on('draw:created', function(e) {

  console.log("Une nouvelle géométrie a été créée : ", e.layer);

  drawnItems.addLayer(e.layer);

});

b. edit (para modificar geometría)

• editar: Este evento se activa cuando el usuario modifica una geometría existente (como un polígono o una línea).

Ejemplo::

map.on('draw:edited', function(e) {

  console.log("Les géométries ont été modifiées : ", e.layers);

});

Diapositiva 5 : Adjuntar un evento a un marcador en Leaflet

En Leaflet, los marcadores son objetos geográficos interactivos que puede colocar en el mapa. Puede adjuntar fácilmente eventos a estos marcadores para capturar las acciones del usuario, como hacer clic, pasar el ratón por encima o moverse.

A continuación se explica cómo adjuntar eventos comunes a un marcador:

1. Creación de un marcador

Antes de poder adjuntar eventos, es necesario crear un marcador. Esto se hace utilizando la función L.marker(), especificando las coordenadas geográficas donde quieres colocarlo en el mapa.

Ejemplo:

var map = L.map('map').setView([48.8566, 2.3522], 13); // Positionner la carte sur Paris

// Créer un marqueur sur Paris

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

2.Adjuntar un evento de clic

El evento clic es uno de los eventos más comunes asociados a los marcadores. Se activa cada vez que un usuario hace clic en un marcador. Puede utilizar este evento para mostrar una ventana emergente, registrar una acción o activar una función específica.

Ejemplo

marker.on('click', function() {

  console.log('Vous avez cliqué sur le marqueur.');

  marker.bindPopup('C\'est un marqueur à Paris !').openPopup(); // Afficher un popup

});

Explicación :

• on(‘clic’, …): Añade un evento de clic al marcador.
• bindPopup(‘…’): Añade una ventana emergente al marcador.
• openPopup() : Abre la ventana emergente cuando se detecta el clic.

Diapositiva 6 : Adjuntar un evento mouseover y mouseout

Los eventos mouseover y mouseout se activan cuando el ratón pasa por encima del marcador y cuando el ratón abandona el marcador, respectivamente. Estos eventos se utilizan a menudo para crear efectos visuales interactivos, como cambiar el color o el tamaño del marcador.

Ejemplo:

marker.on('mouseover', function() {

  console.log('La souris est sur le marqueur.');

  marker.setIcon(L.icon({

    iconUrl: 'path/to/hover-icon.png',

    iconSize: [32, 32],

  })); // Modifier l'icône du marqueur au survol

});

marker.on('mouseout', function() {

  console.log('La souris a quitté le marqueur.');

  marker.setIcon(L.icon({

    iconUrl: 'path/to/default-icon.png',

    iconSize: [32, 32],

  })); // Restaurer l'icône par défaut

});

Explicación:

• setIcon(): Cambia el icono del marcador.
• El icono se cambia al pasar el ratón por encima y se restaura cuando se abandona el marcador.

Diapositiva 7 : Adjuntar un evento drag y dragend (para un marcador arrastrable)

Puede hacer que un marcador sea arrastrable y adjuntar eventos al movimiento del marcador. El evento de arrastre se activa mientras se mueve el marcador, y el de arrastre cuando se completa el movimiento.

Ejemplo:

marker.dragging.enable(); // Activer le déplacement du marqueur

marker.on('drag', function() {

  console.log('Le marqueur est en train d\'être déplacé.');

});

marker.on('dragend', function() {

  console.log('Le marqueur a été déplacé.');

  console.log('Nouvelle position : ' + marker.getLatLng()); // Affiche les nouvelles coordonnées

});

Explicación:

• dragging.enable(): Habilita el arrastre del marcador.
• getLatLng(): Recupera las nuevas coordenadas del marcador después de haberlo movido.

Diapositiva 8 : Adjuntar un evento de menú contextual (clic derecho)

El evento contextmenu se activa cuando se hace clic con el botón derecho del ratón sobre un marcador. Esto puede ser útil para mostrar un menú contextual o ejecutar una acción específica cuando el usuario hace clic con el botón derecho.

Ejemplo:

marker.on('contextmenu', function(e) {

  console.log('Clic droit détecté sur le marqueur.');

  alert('Clic droit effectué à : ' + e.latlng); // Affiche un message avec les coordonnées du clic

});

Explicación :

• e.latlng: Contiene las coordenadas donde tuvo lugar el clic derecho.

Diapositiva 9 : Adjuntar un evento dblclick (doble clic)

El evento dblclick se activa cuando un usuario hace doble clic en un marcador. Puede utilizarlo para realizar acciones específicas al hacer doble clic, como ampliar el mapa o cambiar las propiedades del marcador.

Ejemplo:

marker.on('dblclick', function() {

  console.log('Double-clic sur le marqueur détecté.');

  map.setView(marker.getLatLng(), 16); // Zoomer sur le marqueur après un double-clic

});

Explicación :

• map.setView(): Cambia la vista del mapa para centrarlo en el marcador y acercarlo.

Diapositiva 10 : Adjuntar un evento dragstart (al inicio de un movimiento)

El evento dragstart se dispara justo al inicio del movimiento de un marcador, lo que puede ser útil para animaciones o ajustes antes de que se mueva el marcador.

Ejemploe :

marker.on('dragstart', function() {

  console.log('Le déplacement du marqueur a commencé.');

});

Diapositiva 11 : Hacer clic en el mapa → mostrar coordenadas.

Puede mostrar las coordenadas donde el usuario hace clic. Esto es muy útil para localizar un punto.

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

    alert(«Vous avez cliqué à :\nLatitude : » + e.latlng.lat.toFixed(5) +

           «\nLongitude : » + e.latlng.lng.toFixed(5));

});

O, mejor aún, para colocar allí un marcador.

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

    L.marker(e.latlng).addTo(map)

     .bindPopup(«Nouveau point :<br>» + e.latlng.toString())

     .openPopup();});

Diapositiva 12 : Formulario emergente interactivo (añadir un comentario)

Puede mostrar un formulario en una ventana emergente para que el usuario pueda introducir información.

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

    var popup = L.popup()

        .setLatLng(e.latlng)

        .setContent(‘<b>Ajouter un commentaire :</b><br><input type=»text« 

        id=»inputComment» /><br><button onclick=»saveComment()»>Envoyer</button>’)
        .openOn(map);

   window.saveComment = function() {

        var text = document.getElementById(«inputComment»).value;

        alert(«Commentaire enregistré : » + text);

        map.closePopup();    };});

Diapositiva 13 : Detección de zoom o movimiento

Muy útil para actualizar dinámicamente los datos visibles (por ejemplo, cargar datos según la zona).

map.on(‘moveend zoomend’, function() {

    console.log(«Vue actuelle :», map.getBounds());     console.log(«Niveau de zoom :», map.getZoom());});

Diapositiva 14 : Actualizar un elemento al pasar el ratón por encima

Puede cambiar dinámicamente el estilo de un objeto (GeoJSON, polígono, etc.) al pasar el ratón por encima.

L.geoJSON(zone, {

    style: { color: «green», weight: 2 },

    onEachFeature: function (feature, layer) {

        layer.on({

            mouseover: function(e) {

                e.target.setStyle({ color: «red» });

            },

            mouseout: function(e) {

                e.target.setStyle({ color: «green» });

            }

        });

    }}).addTo(map);

Diapositiva 15 : Modificación dinámica de un objeto en Leaflet

Modificar dinámicamente un objeto significa cambiar sus propiedades o su aspecto en respuesta a una acción del usuario (clic, hover, zoom, etc.). Esto hace que los mapas sean interactivos, intuitivos y más fáciles de leer.

¿Por qué modificar dinámicamente un objeto?

1. Reaccionar a las acciones del usuario
   Por ejemplo, cuando el usuario pasa el ratón por encima de una zona, puede

   • cambiar el color del polígono,
   • mostrar un tooltip temporal,
   • ampliar un marcador.

2. Actualizar el contenido o el estilo en tiempo real
   Puede :

   • actualizar los datos de una ventana emergente (por ejemplo, la temperatura en directo),
   • cambiar el icono de un marcador en función de un evento (alerta, tiempo, etc.),
   • adaptar el estilo de un gráfico en función de un zoom.

3. Mejorar la legibilidad y la experiencia del usuario
   Un objeto que cambia visualmente llama la atención :

   • los elementos importantes,
   • posibles interacciones.

Ejemplos de modificaciones dinámicas

// Survol : changer le style d’un polygone
layer.on('mouseover', function () {
  this.setStyle({
    fillColor: 'yellow',
    color: 'orange'
  });
});

// Clic : changer l’icône d’un marqueur
marker.on('click', function () {
  this.setIcon(newIcon);
});

// Double clic : modifier un texte de popup
marker.on('dblclick', function () {
  this.bindPopup("Texte mis à jour").openPopup();
});

A tener en cuenta

Modificar dinámicamente un objeto da vida al mapa: responde, informa y guía. Transforma un simple mapa de fondo en una verdadera interfaz interactiva.

Diapositiva 16 : Modificación dinámica de un objeto a lo largo del tiempo

En Leaflet, es posible modificar objetos automáticamente, sin interacción del usuario, utilizando el tiempo como disparador.

Esto permite

• animar visualmente un mapa
• llamar la atención sobre un elemento
• representar un cambio (por ejemplo, una simulación o un desplazamiento).

¿Por qué cambiar un objeto en el tiempo?

1. Para indicar una zona de alerta o de peligro (parpadeo, cambio de color)
2. Para mostrar un cambio en el tiempo (por ejemplo, movimiento de un vehículo, cambio de temperatura)
3. Crear efectos visuales para mejorar la interfaz (pulsaciones, alternancia de iconos).

Ejemplo: un polígono intermitente

El color alterna cada 500 milisegundos.

let isRed = true;

setInterval(() => {
  polygon.setStyle({
    color: isRed ? 'red' : 'orange',
    fillColor: isRed ? 'red' : 'orange'
  });
  isRed = !isRed;
}, 500);

Ejemplo: mover un marcador cada segundo

let lat = -19.7, lng = 63.4;
const marker = L.marker([lat, lng]).addTo(map);

setInterval(() => {
  lat += 0.0005;
  marker.setLatLng([lat, lng]);
}, 1000);

Cosas para recordar

Con JavaScript puro, Leaflet puede dar vida al mapa incluso sin interacción. Esto le confiere una dimensión dinámica.

Diapositiva 17 : Modificar dinámicamente un objeto mediante una selección del usuario

En una aplicación cartográfica interactiva, a menudo resulta útil permitir al usuario modificar el aspecto de los objetos que aparecen en el mapa. Leaflet, combinado con HTML y JavaScript, facilita este tipo de interacción.

Objetivo

Permitir al usuario personalizar la visualización de un objeto (por ejemplo, un polígono) en función de un valor elegido en una interfaz HTML (por ejemplo, un menú desplegable). Esto mejora :

• La accesibilidad y comprensión de los datos
• la interactividad del mapa
• La experiencia del usuario (UX)

Caso práctico: Elección del color de un polígono

En el mapa aparece un polígono que representa, por ejemplo, una zona protegida. Un menú HTML permite al usuario elegir un color. Cuando se selecciona un nuevo color, el estilo del polígono se actualiza dinámicamente.

Código de ejemplo (extracto simplificado)

<select id="colorSelect">
  <option value="blue">Bleu</option>
  <option value="green">Vert</option>
  <option value="red">Rouge</option>
</select>

<div id="map" style="height: 400px;"></div>

<script>
  const map = L.map('map').setView([48.85, 2.35], 12); // Exemple : Paris

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

  // Exemple de polygone
  const polygon = L.polygon([
    [48.85, 2.35],
    [48.86, 2.36],
    [48.85, 2.37]
  ], {
    color: 'blue'
  }).addTo(map);

  // Mise à jour du style selon la sélection
  document.getElementById('colorSelect').addEventListener('change', (e) => {
    const newColor = e.target.value;
    polygon.setStyle({ color: newColor });
  });
</script>

Para recordar

• El evento de cambio de menú se activa cada vez que se realiza una modificación.
• El método .setStyle() de Leaflet puede utilizarse para cambiar dinámicamente el estilo de un polígono, línea o círculo.
• Este principio puede extenderse a otros estilos: grosor (weight), opacidad (opacity), relleno (fillColor), etc.

Conclusión

Adjuntar eventos a los marcadores en Leaflet es esencial para añadir interactividad al mapa. Eventos como hacer clic, pasar el ratón por encima, arrastrar y menú contextual permiten reaccionar a las acciones del usuario y cambiar dinámicamente el estado o el contenido del mapa. El uso de eventos en los marcadores hace que el mapa sea más dinámico y le permite crear experiencias de usuario más atractivas y personalizadas.

Ejercicio práctico – Creación de un mapa turístico interactivo

Objetivo

Crear un mapa interactivo de un destino turístico (ciudad, parque, sendero, etc.) en el que :

• los puntos de interés se muestran con información al hacer clic,
• el color de un polígono cambia al pasar el ratón por encima,
• una ventana emergente móvil muestra las coordenadas del clic en el mapa,
• un contador de clics en la esquina superior izquierda,
• un botón para reiniciar el mapa.

Elementos suministrados

Encontrará estos elementos en el directorio …\leaflet_starter_kit\data

• Un archivo points.geojson que contiene 3-4 PDI con propiedades de nombre y descripción
• Un polígono que representa un área (zone.geojson)

Instrucciones

Bonus (opcional)

1. Visualice el mapa centrado en la zona de interés con el nivel de zoom adecuado.
2. Añadir puntos de interés (points.geojson):

   • Mostrar un icono personalizado para los marcadores
   • Añadir una ventana emergente al hacer clic con el nombre y la descripción
   • Cambiar el icono hover (mouseover / mouseout)

3. Mostrar una zona (zone.geojson) :

   • Aplicar un estilo básico
   • Cambiar el color de fondo al pasar el ratón por encima
   • Restaurar el estilo original cuando el ratón abandona la zona

4. Añadir un evento a todo el mapa

   • Cuando el usuario hace clic en el mapa, se abre una ventana emergente móvil en la ubicación del clic con las coordenadas lat/lon
   • Se muestra un contador de clics en un div (#contador) que se actualiza con cada clic.

5. Añade un botón «Reiniciar»:

   • Restablece el mapa a su estado inicial (vista y contador).

Bonus (opcional

• Muestra un minimapa o una escala
• Añade un tooltip fijo con instrucciones

Advertencia: si no puede ver las capas geojson en su mapa

Diagnóstico: abre el archivo HTML directamente desde el disco (file://)

Cuando haces esto, el navegador suele bloquear las peticiones fetch(“rando1.geojson”) por razones de seguridad.

Solución sencilla: utilizar un pequeño servidor local

He aquí cómo hacerlo muy fácilmente con Python (no hace falta programar nada) :

1. Abre una ventana de terminal en la carpeta que contiene index.html y los archivos geojson

2. Teclear (dependiendo de la versión de Python) :

# Si Python 3

python -m http.server 8000

3. Abra su navegador y vaya a :

http://localhost:8000

La carga con fetch() funcionará ahora sin problemas.

Ver la solución en una nueva pestaña

(Te recomendamos que hagas el ejercicio por tu cuenta antes de consultar las respuestas).

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é !

Atilio Francois