Tutorial Leaflet: sesión 4

12 mayo 202512 mayo 2025 Atilio Francois No Comments

Sesión 4: Personalización y control en Leaflet

Objetivo: mejorar la experiencia del usuario (UX) y personalizar el aspecto de los mapas interactivos.

Cargando…

¿Tarda demasiado?

Recargar el documento

Abrir en una nueva pestaña

Contenu

Diapositiva 1 : Personalización de los marcadores

Personalización de los marcadores

1. Introducción : ¿Por qué personalizar los marcadores?

Leaflet utiliza por defecto un icono azul estándar para los marcadores. Sin embargo, en muchos casos es preferible sustituir este icono por una imagen personalizada. Esto permite representar mejor en el mapa el tipo de lugar o punto de interés.

Ventajas de personalizar los marcadores:

Categorización de puntos: Cada tipo de punto (restaurante, museo, hotel, punto de socorro, etc.) puede asociarse a un icono diferente. Por ejemplo, un icono que represente un plato para un restaurante, una cama para un hotel, etc.

Coherencia visual: puede adaptar los iconos a una carta gráfica o a un tema específico, creando una experiencia más estética y profesional.

Experiencia de usuario mejorada: Los iconos personalizados permiten a los usuarios localizar rápidamente distintos tipos de puntos de interés en el mapa. Esto hace que el mapa sea más intuitivo y accesible.

2. ¿Cómo personalizo un marcador en Leaflet?

He aquí un ejemplo de código para personalizar un marcador con un icono personalizado:

// Créer une icône personnalisée
const myIcon = L.icon({
    iconUrl: 'images/restaurant.png', // URL de l'image de l'icône
    iconSize: [32, 32], // Taille de l'icône (en pixels)
    iconAnchor: [16, 32], // Point de l'icône qui correspond à la position du marqueur (le centre du marqueur ici)
    popupAnchor: [0, -32] // Position du popup par rapport au marqueur
});

// Ajouter un marqueur avec l'icône personnalisée sur la carte
L.marker([48.8566, 2.3522], { icon: myIcon })
    .addTo(map) // Ajouter à la carte
    .bindPopup("Restaurant Parisien"); // Ajouter un popup

Explicaciones de las opciones de icono:

iconUrl: la URL o ruta relativa de la imagen que desea utilizar como icono (aquí, images/restaurant.png).

iconSize: especifica el tamaño del icono en píxeles. Aquí, el icono es de 32×32 píxeles.

iconAnchor: el punto del icono que corresponde a la posición del marcador. Por ejemplo, si iconAnchor: [16, 32], significa que el marcador se anclará en la parte inferior del centro del icono.

popupAnchor: la posición de la ventana emergente en relación con el icono. En este ejemplo, el popup aparecerá 32 píxeles por encima del icono.

3. Formatos de imagen compatibles

Leaflet le permite utilizar diferentes formatos de imagen para los iconos:

PNG, JPG: formatos de imagen estándar. Asegúrate de que la imagen sea de buena calidad para no perjudicar la legibilidad.

SVG: este formato vectorial es especialmente útil si quieres iconos que no pierdan calidad al cambiar de tamaño.

Las imágenes deben ser accesibles desde la carpeta del proyecto o desde una URL pública.

Ejemplos de iconos personalizados

Icono de un restaurante: una imagen que representa un plato o un cubierto.

Icono de un museo: la imagen de un cuadro o un monumento.

Icono de una estación de servicio: imagen de un surtidor.

Conclusión

Personalizar los marcadores en Leaflet es una forma excelente de hacer que sus mapas sean más legibles, visualmente coherentes y adaptados a la experiencia del usuario. Permite categorizar mejor los distintos tipos de puntos de interés y refuerza el impacto visual del mapa.

Diapositiva 2-Estilos personalizados para formas vectoriales

Estilos personalizados para formas vectoriales

1. Introducción: ¿Qué es una forma vectorial?

En Leaflet, una forma vectorial es un accidente geográfico representado en el mapa mediante datos geométricos. Esto incluye :

Polilíneas: líneas trazadas entre varios puntos (por ejemplo, una ruta).

Polígonos: formas cerradas que delimitan áreas (por ejemplo, parcelas, regiones).

Círculos: una forma especial de polígono, basada en un radio alrededor de un punto.

Estas formas pueden estilizarse para adaptarse mejor al aspecto del mapa y ofrecer una mejor experiencia al usuario.

2. ¿Por qué personalizar los estilos?

Al personalizar los estilos de tus formas vectoriales, puedes :

Mejorar la legibilidad: colores y grosores de línea distintos ayudan a visualizar mejor los datos.

Adaptar el aspecto a una carta gráfica: puede definir colores, bordes y sombreados específicos para que el mapa se ajuste al estilo de su proyecto.

Resaltar determinadas zonas o rutas: Por ejemplo, puede utilizar un color diferente para una ruta recomendada o una zona protegida.

3. ¿Cómo personalizo los estilos?

Leaflet le permite personalizar los estilos de las formas vectoriales mediante objetos JavaScript. He aquí algunos ejemplos para polilíneas, polígonos y círculos.

Ejemplo de personalización de una polilínea :

const polyline = L.polyline([
    [48.8566, 2.3522],  // Point de départ
    [48.8584, 2.2945],  // Point d'arrivée
], {
    color: 'blue',       // Couleur de la ligne
    weight: 4,           // Epaisseur de la ligne
    opacity: 0.7         // Opacité de la ligne
}).addTo(map);

Explicaciones de las opciones de estilo:

color: define el color de la línea (en este caso azul).

weight: especifica el grosor de la línea (en este caso 4 píxeles).

opacity: establece la opacidad de la línea (en este caso 70%).

Ejemplo de personalización de un polígono:

const polygon = L.polygon([
    [48.8566, 2.3522], 
    [48.8584, 2.2945], 
    [48.8600, 2.2920]
], {
    color: 'green',      // Couleur du contour
    fillColor: 'lightgreen',  // Couleur de remplissage
    fillOpacity: 0.5,    // Opacité du remplissage
    weight: 3            // Epaisseur du contour
}).addTo(map);

Explicaciones de las opciones de estilo:

color: color del contorno (en este caso verde).

fillColor: color de relleno dentro del polígono (en este caso verde claro).

fillOpacity: opacidad del relleno (en este caso 50%).

weight: grosor del contorno (en este caso 3 píxeles).

Ejemplo de personalización de un círculo:

const circle = L.circle([48.8566, 2.3522], {
    radius: 500,        // Rayon du cercle en mètres
    color: 'red',       // Couleur du contour
    fillColor: 'red',   // Couleur de remplissage
    fillOpacity: 0.2,   // Opacité du remplissage
    weight: 2           // Epaisseur du contour
}).addTo(map);

Explicaciones de las opciones de estilo:

radius: define el radio del círculo (en este caso 500 metros).

color: color del contorno (en este caso rojo).

fillColor: color de relleno (en este caso rojo claro).

fillOpacity: opacidad de relleno (en este caso 20%).

weight: grosor del contorno (en este caso 2 píxeles).

4.Actualizaciones dinámicas de estilos

También es posible modificar dinámicamente los estilos de una forma después de haberla añadido al mapa. Por ejemplo, para cambiar el color de un polígono al pasar el ratón por encima :

polygon.on('mouseover', function () {
    this.setStyle({
        color: 'orange',   // Nouvelle couleur du contour
        fillColor: 'yellow', // Nouvelle couleur de remplissage
    });
});
polygon.on('mouseout', function () {
    this.setStyle({
        color: 'green',    // Couleur de contour d'origine
        fillColor: 'lightgreen', // Couleur de remplissage d'origine
    });
});

5.Estilo condicional

Los estilos también pueden definirse dinámicamente en función de los datos. Por ejemplo, puede colorear un polígono según su población o tipo:

const getStyle = (feature) => {
    return {
        color: feature.properties.type === 'parc' ? 'green' : 'blue',
        fillColor: feature.properties.type === 'parc' ? 'lightgreen' : 'lightblue',
        weight: 2
    };
};

L.geoJSON(data, { style: getStyle }).addTo(map);

En este ejemplo, los polígonos que representan parques tendrán un contorno y relleno verde, mientras que los demás serán azules.

Conclusión

Personalizar los estilos de las formas vectoriales en Leaflet puede hacer que los mapas sean más informativos, visualmente atractivos y adaptados a las necesidades específicas de su proyecto. Puedes ajustar parámetros como el color, el grosor y la opacidad para adaptar las formas a tus preferencias o a la carta gráfica del proyecto. Incluso puede añadir interacciones dinámicas para mejorar aún más la experiencia del usuario.

Diapositiva 3 : Controles adicionales para mejorar la interfaz

Controles adicionales para mejorar la interfaz

Introducción : ¿Por qué añadir controles adicionales?

Leaflet ofrece una amplia gama de controles integrados para mejorar la legibilidad del mapa y la navegación. Estos controles hacen que la interfaz sea más interactiva y práctica, proporcionando una mejor experiencia al usuario. Entre estos controles, añadir una escala, un minimapa y personalizar la atribución son elementos utilizados a menudo para mejorar la comprensibilidad y el aspecto profesional del mapa.

Añadir una escala

Un control de escala muestra una escala gráfica en el mapa, lo que permite a los usuarios ver la distancia real correspondiente a una parte del mapa, teniendo en cuenta el nivel de zoom.

Código para añadir la escala:

L.control.scale().addTo(map);

Funcionalidad:

La escala se ajusta automáticamente en función del nivel de zoom del mapa. Por ejemplo, al ampliar una zona más pequeña, la escala mostrará una unidad de medida más precisa (por ejemplo, 100 metros en lugar de 10 km).

Puede mostrar unidades métricas (metros, kilómetros) o imperiales (pies, millas), según las preferencias del usuario o del mapa.

Ventajas:

Precisión: los usuarios pueden ver rápidamente la distancia real entre dos puntos.

Accesibilidad: Mejora la experiencia de navegación para quienes no están familiarizados con el mapa.

Añada un minimapa

Un minimapa es una versión reducida del mapa principal que proporciona una visión rápida del contexto geográfico, permitiendo a los usuarios orientarse fácilmente por la zona.

Código para añadir el minimapa :

const miniMapLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
const miniMap = new L.Control.MiniMap(miniMapLayer, {
    toggleDisplay: true,  // Permet de basculer la mini-carte
    minimized: false      // Définit si la mini-carte est minimisée au départ
}).addTo(map);

Característica:

El minimapa suele situarse en una esquina del mapa principal (a menudo en la parte superior izquierda o derecha).

Muestra una visión general del mapa a mayor escala, lo que permite a los usuarios situarse mejor en relación con el área más amplia.

Opción de alternar: los usuarios pueden optar por ocultar o mostrar el minimapa en cualquier momento.

Ventajas:

Visión general: ofrece una perspectiva global del mapa al tiempo que permite a los usuarios ampliarlo y centrarse en áreas específicas.

Accesibilidad: ayuda a los usuarios a mantener una perspectiva general sin perder su posición en el mapa principal.

Nota importante: Añadir un minimapa requiere la instalación del plugin Leaflet MiniMap, que veremos en la siguiente diapositiva.

4. Personalice la atribución

La atribución indica la fuente de los datos utilizados para mostrar el mapa, y es importante para el cumplimiento de las licencias de datos (por ejemplo, OpenStreetMap). Leaflet proporciona un control de atribución por defecto, pero puede personalizarse para mostrar información específica.

Código para personalizar la atribución :

map.attributionControl.setPrefix('');  // Retire le texte par défaut
map.attributionControl.addAttribution('Carte personnalisée © 2025');  // Ajoute une attribution personnalisée

Función:

Puede modificar o añadir información de atribución adicional, por ejemplo, una referencia a su propio mapa o a una fuente de datos concreta.

Esta función es útil para cumplir las licencias de los datos utilizados (como las de OpenStreetMap) o para añadir una atribución personalizada (por ejemplo, «Mapa realizado por [Su nombre]»).

Ventajas:

Cumplimiento de licencias: Garantiza el cumplimiento de los derechos de autor y las licencias de datos, como las de OpenStreetMap.

Personalización: Permite añadir un elemento de personalización o reconocimiento a los creadores del mapa.

5. Resumen de controles adicionales

Escala: Muestra una escala dinámica para medir distancias.

Mini-mapa: Muestra una vista general en una esquina del mapa principal para ayudarle a orientarse.

Atribución: personaliza la atribución para respetar las licencias de datos o añadir información específica.

Conclusión

La adición de un control de escala, un minimapa y una atribución personalizada son pequeñas mejoras que hacen que la interfaz sea más profesional, informativa y accesible. Estos controles son fáciles de implementar con Leaflet, y su uso mejora enormemente la experiencia del usuario al hacer el mapa más intuitivo y conforme a las mejores prácticas. Estas herramientas también ayudan a cumplir las licencias de los datos geoespaciales utilizados y proporcionan una navegación más fluida.

Diapositiva 4 : Instalación y utilización del plugin Leaflet MiniMap

Instalación y utilización del plugin Leaflet MiniMap

1. Introducción : ¿Qué es un minimapa?

Un minimapa es una versión reducida y generalmente interactiva del mapa principal, que permite al usuario mantener una visión general de la zona geográfica mientras navega por el mapa principal. A menudo se coloca en una esquina del mapa principal, lo que permite a los usuarios ver su posición en relación con el mapa en su conjunto y desplazarse más fácilmente.

Los minimapas son especialmente útiles en aplicaciones en las que es necesario visualizar una zona extensa sin perder de vista los detalles locales. Se utilizan con frecuencia en mapas de navegación, mapas de rutas o mapas temáticos.

2. ¿Por qué utilizar Leaflet MiniMap?

Aunque Leaflet no proporciona un minimapa de serie, puede añadir fácilmente esta funcionalidad utilizando el plugin Leaflet MiniMap. Este plugin le permite añadir un pequeño mapa interactivo en una esquina del mapa principal, al tiempo que ofrece la opción de acercar y alejar la imagen.

Ventajas del minimapa :

Vista general: permite a los usuarios orientarse fácilmente por toda la zona.

Navegación mejorada: los usuarios pueden ver rápidamente la zona en la que se encuentran sin perder su posición en el mapa principal.

Interfaz clara: El minimapa ofrece una vista compacta que no interfiere con la visualización del mapa principal.

3 Instalación del plugin Leaflet MiniMap

Antes de poder utilizar el plugin Leaflet MiniMap, debe instalarlo en su proyecto. Si aún no has incluido el plugin, aquí tienes cómo hacerlo.

Añade el archivo JavaScript del plugin: Puedes incluir el plugin MiniMap añadiendo el archivo JavaScript correspondiente a tu proyecto. Esta es la línea que debes añadir a tu archivo HTML para cargar el complemento desde una CDN:

Añade el archivo CSS del complemento: El complemento también necesita un archivo CSS para que los estilos del minimapa se muestren correctamente. Añada esta línea a su etiqueta <head>:

4. Utilización del minimapa de Leaflet Utilización del plugin Leaflet MiniMap

Una vez instalado el plugin, puede añadirlo fácilmente a su mapa Leaflet. El siguiente código muestra cómo integrar el minimapa en su proyecto:

Código de ejemplo para añadir un minimapa :

// Définir la couche de la mini-carte (vous pouvez utiliser n'importe quelle carte de base)
const miniMapLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

// Créer un contrôle de mini-carte
const miniMap = new L.Control.MiniMap(miniMapLayer, {
    toggleDisplay: true,  // Permet d'afficher/masquer la mini-carte
    minimized: false      // Si la mini-carte est affichée de manière réduite au début
}).addTo(map);

Explicación del código:

L.tileLayer: Utilizamos una capa de azulejos como fondo para el minimapa. Aquí usamos OpenStreetMap, pero también puedes usar otros servicios de mosaicos.

L.Control.MiniMap: Este control añade el minimapa al mapa principal.
- toggleDisplay: Esta opción permite al usuario alternar entre mostrar u ocultar el minimapa mediante un botón.
- minimized: Determina si el minimapa se minimiza o se muestra completamente cuando se carga el mapa.

5. Personalizar el minimapa

El plugin Leaflet MiniMap ofrece una serie de opciones de personalización para adaptarse a sus necesidades específicas. Estas son algunas de las opciones disponibles:

Posicionamiento: Puede elegir dónde mostrar el minimapa (por ejemplo, arriba a la derecha, abajo a la izquierda, etc.). Por defecto, está en la parte superior derecha, pero puede ajustar su posición utilizando la opción de posición.

Zoom: También puede ajustar el nivel de zoom del minimapa con la opción zoomLevel si desea que el minimapa muestre un zoom diferente al del mapa principal.

Dimensiones: Por defecto, el minimapa tiene un tamaño fijo, pero puedes ajustar su tamaño para adaptarlo a tus necesidades.

He aquí un ejemplo de personalización:

const miniMap = new L.Control.MiniMap(miniMapLayer, {
    toggleDisplay: true,
    minimized: false,
    position: 'bottomright',   // Placer la mini-carte en bas à droite
    zoomLevel: 6,              // Niveau de zoom de la mini-carte
    width: 150,                // Largeur de la mini-carte
    height: 150                // Hauteur de la mini-carte
}).addTo(map);

6. Conclusión: La importancia del minimapa

Añadir un minimapa a su proyecto de folleto mejora la interacción y la navegación en el mapa. Permite a los usuarios orientarse y obtener una visión general de la zona, sin dejar de centrarse en el área local del mapa principal. Con el plugin Leaflet MiniMap, la integración de esta funcionalidad es rápida y sencilla, al tiempo que ofrece numerosas opciones de personalización para adaptarse a sus necesidades.

Resumen

Mini-map: Muestra una versión más pequeña e interactiva del mapa principal para una rápida visión general.

Instalación: Cargue el plugin JavaScript y CSS en su proyecto.

Personalización: elija la posición, el zoom y el tamaño del minimapa según sus preferencias.

Mejora de la experiencia del usuario: El minimapa mejora la experiencia del usuario haciendo que la navegación sea más fluida y la localización espacial más sencilla.

Este complemento es una excelente manera de añadir usabilidad a sus mapas de Leaflet, al tiempo que proporciona a los usuarios una herramienta práctica para navegar y orientarse en grandes áreas.

Diapositiva 5: Controles de zoom y botones personalizados

1. Introducción: La importancia de los controles de zoom

Los controles de zoom permiten al usuario ajustar la escala del mapa para explorar con más detalle u obtener una visión general. Por defecto, Leaflet proporciona un control de zoom en la parte superior derecha del mapa. Sin embargo, es posible personalizar el aspecto y la funcionalidad de estos controles para adaptarlos mejor a las necesidades de un proyecto.

Además de los botones de zoom estándar, también puede añadir botones personalizados para realizar acciones específicas en el mapa, como centrar el mapa en una ubicación concreta, activar un modo de dibujo o ampliar automáticamente un área de interés.

2. Control de zoom por defecto

El control de zoom por defecto es sencillo y práctico. Ofrece botones «más» y «menos» para acercar y alejar la imagen, y un botón de reinicio para volver al nivel de zoom por defecto. Leaflet lo añade automáticamente cuando se crea el mapa, pero puedes configurarlo a tu gusto.

Código para añadir el control de zoom por defecto :

const map = L.map('map', {
    zoomControl: true // Active le contrôle de zoom par défaut
}).setView([48.8566, 2.3522], 13);  // Exemple avec Paris

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

Funcionalidad:

Acercar/Alejar: Permite cambiar la escala del mapa para explorar con más o menos detalle.

Restablecer: le permite volver a un nivel de zoom inicial por defecto.

Personalizar:

Puede colocar el control de zoom en otro lugar del mapa o incluso eliminarlo si no lo necesita.

3. Personalizar los botones de zoom

Por defecto, Leaflet ofrece un diseño estándar para los botones de zoom (arriba a la derecha). Sin embargo, puedes modificar fácilmente su apariencia, su posición o incluso los propios botones para que se adapten mejor a la interfaz de tu proyecto.

Código para mover el control de zoom :

L.control.zoom({
    position: 'bottomleft' // Place le contrôle de zoom en bas à gauche
}).addTo(map);

Opciones disponibles:

posición: Puede mover el control de zoom a las esquinas del mapa, como arriba a la derecha, arriba a la izquierda, abajo a la izquierda o abajo a la derecha.

zoomInText y zoomOutText: Personalice el texto de los botones (por ejemplo, utilice iconos en lugar de texto).

4. Añadir botones personalizados

Además de los controles de zoom, Leaflet permite añadir botones personalizados para añadir funciones específicas al mapa, como volver a centrar el mapa en una ubicación, cambiar de capa o iniciar un modo de dibujo.

Ejemplo de botón personalizado para centrar el mapa :

L.control.custom({
    position: 'topright',
    content: '<button>Recentrer</button>',
    onclick: function() {
        map.setView([48.8566, 2.3522], 13);  // Centrer sur Paris
    }
}).addTo(map);

Función:

Puede definir un botón con texto, una imagen o incluso un icono (por ejemplo, un botón con un logotipo personalizado).

Cuando un usuario hace clic en este botón, puede asociar una acción específica, como recentrar el mapa, cambiar el nivel de zoom o realizar cambios en el mapa.

Ejemplo de botón para activar un modo de dibujo:

Puede añadir un botón para activar el modo de dibujo o edición en el mapa, por ejemplo con Leaflet.draw, un plugin para dibujar formas (polígonos, polilíneas, etc.).

const drawControl = new L.Control.Draw({
    draw: {
        polygon: true, // Permet de dessiner des polygones
        polyline: true  // Permet de dessiner des polylignes
    }
});
map.addControl(drawControl);

// Bouton personnalisé pour activer le mode de dessin
L.control.custom({
    position: 'topright',
    content: '<button>Dessiner</button>',
    onclick: function() {
        map.addControl(drawControl);  // Ajoute les outils de dessin à la carte
    }
}).addTo(map);

Ventajas de los botones personalizados:

Flexibilidad: Puede asociar cualquier acción a un botón, como mostrar un mensaje, cambiar de capa o interactuar con el mapa de una forma única.

Accesibilidad: Mejora la usabilidad al proporcionar funcionalidad adicional sin sobrecargar la interfaz del mapa.

5. Combinar zoom y botones personalizados

Puede combinar fácilmente los controles de zoom predeterminados con botones personalizados para proporcionar una interfaz más rica e interactiva. Por ejemplo, podría tener un botón personalizado para recentrar el mapa, manteniendo los botones de zoom clásicos.

Ejemplo de combinación de ambos:

L.control.zoom({ position: 'bottomright' }).addTo(map); // Zoom classique

L.control.custom({
    position: 'topright',
    content: '<button>Recentrer</button>',
    onclick: function() {
        map.setView([48.8566, 2.3522], 13);  // Recentre sur Paris
    }
}).addTo(map);

ventajas de esta combinación:

Navegación fluida: Los usuarios pueden hacer zoom fácilmente con la posibilidad de añadir acciones personalizadas.

Interfaz intuitiva: Ofrece a los usuarios más control sin saturar la interfaz.

6. Resumen y mejores prácticas

Controles de zoom: Añade, personaliza y coloca controles de zoom para que la navegación sea más fluida e intuitiva.

Botones personalizados: Añada botones para realizar acciones específicas en el mapa, como recentrarlo o cambiar de capa.

Accesibilidad y ergonomía: Combine los controles de zoom y los botones personalizados para ofrecer una mejor experiencia de usuario sin sobrecargar la interfaz.

Conclusión

Los controles de zoom y los botones personalizados son elementos esenciales para que la navegación en un mapa de Leaflet sea más interactiva y cómoda. No sólo permiten a los usuarios ajustar la escala del mapa, sino que también ofrecen la posibilidad de desencadenar acciones específicas mediante botones personalizados. Con estas funciones, puede crear interfaces de mapa ricas y accesibles que se adapten bien a sus necesidades específicas.

Diapositiva 6 : Añadir widgets : Escala y leyenda personalizada

Añadir widgets : Escala y leyenda personalizada

1. Introducción : ¿Qué es un widget en Leaflet?

Los widgets son elementos de la interfaz de usuario que añaden funcionalidad e información extra a un mapa de Leaflet. Entre los widgets más comunes se encuentran la escala y la leyenda. Estos elementos son esenciales para proporcionar a los usuarios información contextual, como la distancia (escala) o el significado de los colores y símbolos (leyenda).

Leaflet facilita la incorporación de estos widgets gracias a los controles integrados y personalizables.

2. widget de escala: muestra una escala dinámica

El widget de escala muestra una escala de distancia que se ajusta dinámicamente según el nivel de zoom del mapa. Esto permite al usuario comprender mejor la distancia real en el mapa, lo que resulta especialmente útil en aplicaciones de geolocalización o cartografía temática.

Añadir una escala al mapa:

Leaflet proporciona un control integrado para añadir una escala al mapa, que es muy fácil de configurar.

Ejemplo de código para añadir una escala :

L.control.scale({
    metric: true,  // Affiche l'échelle en mètres et kilomètres
    imperial: false, // Désactive l'échelle en miles et yards
    maxWidth: 200  // Largeur maximale de l'échelle
}).addTo(map);

Explicación del código :

métrico: Si esta opción está activada, la escala mostrará la distancia en metros y kilómetros.

imperial: Si se activa esta opción, la escala mostrará la distancia en millas y yardas.

maxWidth: Permite definir la anchura máxima de la escala, útil para ajustar la visualización en pantallas de diferentes tamaños.

El control de escala es dinámico: se ajusta automáticamente cuando el usuario acerca o aleja la vista del mapa. Cuanto más se acerca el usuario, menor es la distancia representada por los segmentos de la escala.

Ventajas de la escala :

Precisión: permite al usuario visualizar con precisión las distancias en el mapa.

Interactividad: La escala se actualiza automáticamente a medida que se amplía el mapa, lo que hace que su uso sea fácil e intuitivo.

Widget de leyenda: muestra una leyenda personalizada

La leyenda es un widget muy útil para explicar el significado de los colores, símbolos o patrones utilizados en un mapa. Por ejemplo, si tienes capas temáticas (por ejemplo, para mostrar tipos de suelo, zonas de riesgo, etc.), una leyenda ayudará al usuario a entender qué representa cada color o icono.

Añadir una leyenda al mapa :

Puede crear una leyenda personalizada utilizando HTML y añadirla al mapa mediante L.control().

Ejemplo de código para añadir una leyenda :

const legend = L.control({ position: 'bottomright' });

legend.onAdd = function (map) {
    const div = L.DomUtil.create('div', 'info legend');
    const grades = [0, 10, 20, 30, 40];  // Plages de valeurs (ex : température)
    const labels = [];

    // Boucle pour générer les couleurs et labels de la légende
    for (let i = 0; i < grades.length; i++) {
        labels.push(
            '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
            grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] : '+')
        );
    }
    div.innerHTML = labels.join('<br>');
    return div;
};

legend.addTo(map);

// Fonction pour déterminer la couleur en fonction de la valeur
function getColor(d) {
    return d > 30 ? '#800026' :
           d > 20 ? '#BD0026' :
           d > 10 ? '#E31A1C' :
           d > 0  ? '#FC4E2A' :
                    '#FFEDA0';
}

Explicación del código :

L.control(): Crea un control personalizado para la leyenda y define su posición en el mapa (aquí abajo a la derecha).

legend.onAdd: Esta función define cómo se genera la leyenda. Aquí, utilizamos rangos de valores (grados) y asociamos cada rango con un color mediante la función getColor().

getColor() : Esta función devuelve un color en función del valor (por ejemplo, un color más oscuro para los valores más altos).

Personalización de la leyenda :

Posición: Puede cambiar la posición de la leyenda ajustando el valor de la opción de posición (por ejemplo, ‘topright’, ‘bottomleft’).

Contenido: La leyenda puede contener iconos, texto e incluso imágenes, en función de sus necesidades.

Colores y símbolos: Puede personalizar la leyenda para adaptarla a la cartografía utilizada (por ejemplo, asociar colores de zonas específicas a categorías).

Ventajas de la leyenda :

Claridad: Facilita la comprensión del mapa al explicar los símbolos y colores utilizados.

Interactividad: Ayuda al usuario a interpretar los datos del mapa, lo que es esencial cuando se trabaja con mapas temáticos.

4.Combinar escala y leyenda

Es una práctica común añadir tanto una escala como una leyenda a un mapa, ya que estos dos widgets sirven a propósitos diferentes pero complementarios. Mientras que la escala proporciona una idea de las distancias reales, la leyenda ayuda a comprender los datos representados gráficamente.

Código de ejemplo para añadir ambos widgets :

L.control.scale({
    metric: true,
    imperial: false
}).addTo(map);

const legend = L.control({ position: 'bottomright' });
legend.onAdd = function (map) {
    const div = L.DomUtil.create('div', 'info legend');
    div.innerHTML = '<i style="background:' + getColor(35) + '"></i> 35-40°C';
    return div;
};
legend.addTo(map);

Ventajas de esta combinación:

El usuario se beneficia de una visión completa con la posibilidad de medir distancias mientras dispone de una explicación de los datos del mapa.

Esto mejora la experiencia del usuario al proporcionar herramientas claras para interactuar con el mapa.

5.Resumen y mejores prácticas

Widget de escala: Añada una escala dinámica para que los usuarios puedan visualizar fácilmente las distancias en el mapa. Se trata de una herramienta esencial para los mapas interactivos.

Widget de leyenda: utilice una leyenda para ofrecer una explicación de los símbolos y colores, sobre todo cuando trabaje con datos temáticos o geoespaciales complejos.

Personalización: ambos widgets pueden personalizarse (colores, contenido, posición) para adaptarse a la carta gráfica de su proyecto.

Mejora de la experiencia del usuario: estos widgets enriquecen la interfaz del mapa proporcionando información adicional, lo que hace que el mapa sea más interactivo y fácil de entender.

Conclusión

Añadir widgets de escala y leyenda personalizada a Leaflet enriquece la experiencia del usuario y hace que el mapa sea más informativo. La escala permite medir distancias en tiempo real, mientras que la leyenda ofrece explicaciones claras de los datos representados. Combinando estos dos elementos, se puede crear un mapa más profesional, funcional y accesible.

Ejercicio: Mapa temático con estilos y leyenda

Objetivo: Crear un mapa completo con elementos visuales y controles personalizados para mejorar la experiencia del usuario.

Instrucciones

Cree un mapa centrado en una zona de su elección
→ Elija un mapa base (por ejemplo, OpenStreetMap, Esri, etc.)

Añada una capa GeoJSON que represente datos temáticos
→ Por ejemplo: espacios naturales, edificios, barrios, etc.

Aplicar un estilo condicional (color en función de una propiedad)

Crear una leyenda personalizada correspondiente a los estilos

Añadir marcadores con iconos personalizados
→ Por ejemplo, para localizar puntos de interés
- Añadir widgets:
  Una escala
  Un control de zoom que se pueda mover
  Un botón personalizado (por ejemplo, volver a centrar)

Bonus

Añadir un minimapa para orientarse mejor

Añadir una ventana emergente dinámica para cada zona/punto

Ver el resultado en una nueva pestaña.

<-Sesión 3 : Capas GeoJSON

->Sesión 5 : Eventos

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