En este momento estás viendo Cómo agregar la simbología interactiva con Leaflet

Cómo agregar la simbología interactiva con Leaflet

  • Categoría de la entrada:Leaflet
  • Tiempo de lectura:9 minutos de lectura

En el contexto de Leaflet, la simbología interactiva se refiere a la capacidad de cambiar visualmente la apariencia de elementos del mapa (polígonos, puntos o líneas) en función de la información que contienen para responder a la interacción del usuario como pasar el mouse, hacer clic o filtrar.

Plugins y herramientas comunes para simbología interactiva

Actualmente puedes usar diversas herramientas y plugins en Leaflet para mejorar la simbología. Aquí te presento los más comunes y actualizados, pero en la documentación de Leaflet encontrarás muchas más:

Herramientas básicas

  • L.GeoJSON (core de Leaflet): para cargar capas GeoJSON con estilos.
  • style y onEachFeature: funciones nativas de Leaflet para definir estilo dinámico e interacción.

Plugins útiles

Cuando trabajamos con mapas web, no solo queremos mostrar información geográfica, sino también hacerlo de forma visual e intuitiva. Por eso, aplicar simbología por rangos, permitir interacciones con el puntero y mostrar información contextual es fundamental. A continuación, aprenderás cómo hacerlo paso a paso:

1️⃣ Prepara tu entorno

Puedes usar Visual Studio Code o cualquier editor con una carpeta que contenga los 3 archivos que siempre necesitamos:

index.html
style.css
main.js
Y un archivo data.geojson con tu capa temática

2️⃣ Agrega una caja de información

La caja de información (info box) sirve para mostrar datos dinámicos al usuario cuando pasa el mouse sobre un área (por ejemplo, un municipio, barrio o zona de riesgo).

// Crear un div con una clase info
info.onAdd = function(map){
    this._div = L.DomUtil.create('div','info');
    this.update();
    return this._div;
};

// Agregar el metodo que actualiza el control segun el puntero vaya pasando
info.update = function(props){
    this._div.innerHTML = '<h4>Total Viviendas por Barrio</h4>' + 
                            (props ? '<b>' + props.BARRIO + '</b><br/>' + props.TOT_VIVIEN + ' viviendas</sup>'
                            : 'Pase el puntero por un barrio');
};

info.addTo(map);

3️⃣ Agrega colores por rangos

Aquí usamos una función que asigna colores según los valores del atributo. Esto forma la simbología por rangos:

// Generar rangos de colores de acuerdo con el atributo o campo TOT_VIVIEN
function getColor(d){
    return  d > 9000 ? '#2510a3' :
            d > 7500 ? '#0000ff' :
            d > 6000 ? '#673dff' :
            d > 4500 ? '#9265ff' :
            d > 2500 ? '#b38bff' :
            d > 1000 ? '#cfb1ff' :
            d > 0    ? '#e8d8ff' :
                       '#ffffff';
}

4️⃣ Agregar el estilo con simbología

Creamos una función de estilo para aplicar a cada entidad del GeoJSON:

// Crear la funcion para mostrar la simbologia de acuerdo al campo TOT_VIVIEN

function style(feature){
    return {
        fillColor: getColor(feature.properties.TOT_VIVIEN),
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7
    };
}

5️⃣ Agrega interacción del puntero con la capa

Aquí se define qué pasa cuando el usuario pasa el puntero sobre una zona:

// Agregar interaccion del puntero con la capa para resaltar el objeto
function highlightFeature(e) {
    var layer = e.target;

    layer.setStyle({
        weight: 5,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
    });

    info.update(layer.feature.properties);
}

6️⃣ Agrega funciones de zoom y resaltado

Y se asignan las funciones a cada entidad del GeoJSON:

// Configurar los cambios de resaltado y zoom de la capa

var barriosJS;

function resetHighlight(e){
    barriosJS.resetStyle(e.target);
    info.update();
}

function zoomToFeature(e){
    map.fitBounds(e.target.getBounds());
}

function onEachFeature(feature, layer){
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: zoomToFeature
    });
}

7️⃣ Agrega atribución

Por último, nunca olvides añadir la atribución de los datos y tecnologías usadas en el mapa:

// Agregar atribucion
map.attributionControl.addAttribution('Viviendas en Bogotá &copy; <a href="https://www.dane.gov.co/">DANE</a>');

El proyecto completo lo encuentras aquí.

Leaflet es una biblioteca extremadamente poderosa, liviana y flexible para trabajar con mapas interactivos en la web. Agregar simbología no solo mejora la apariencia del mapa, sino que hace que los datos sean más comprensibles, navegables y útiles. Combinando estilos dinámicos, interacciones y leyendas, puedes crear experiencias de usuario similares a aplicaciones GIS profesionales.

Aprovecha todos los plugins que la comunidad ha creado para implementar mejores funcionalidades a tu aplicación web GIS.

Te dejo estos dos videos explicando visualmente como hacer el proceso:

Etiquetas: , , , ,