En este momento estás viendo Top 10 funcionalidades de Leaflet para crear un visor GIS profesional

Top 10 funcionalidades de Leaflet para crear un visor GIS profesional

  • Categoría de la entrada:Blog / Leaflet
  • Tiempo de lectura:16 minutos de lectura

¿Y si hoy sales con un visor web funcionando y listo para mostrar en tu portafolio? mantén esta idea en mente mientras avanzas.

En menos de lo que dura un capítulo de tu serie favorita, tendrás una aplicación GIS web con las piezas clave para un mapa útil en campo, catastro, clima, movilidad o forestal.

Este tutorial está centrado en Leaflet y te guía en el paso a paso para montar el ambiente y aplicar el top 10 funcionalidades de Leaflet que más usan los equipos de cartografía y geomática en proyectos reales.

NOTA: el objetivo es hacerlo simple. Si ya programas en javascript, te sentirás como en casa. Si vienes del mundo SIG, vas a entender cada línea.

Qué necesitas antes de empezar (preparación del ambiente)

Requisitos mínimos

  • Un editor de texto (visual studio code, sublime o tu favorito).
  • Un navegador moderno.
  • Conexión a internet para usar CDN de Leaflet y un mapa base.

Estructura sugerida de carpetas

mi-visor-leaflet/
  script.js  
  index.html
  styles.css
  data/capas.geojson
  img/marcador.png

Plantilla inicial

Crea index.html con este contenido base:

<!DOCTYPE html>
<html lang="en">
<head>
    <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">
    <link rel="stylesheet" href="style.css">
    <title>10 Funcionalidades</title>
</head>
<body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="script.js"></script>
</body>
</html>

Crea un archivo script.js vacío. Ahí irá el código de las funcionalidades.

Y en otro archivo llamado styles.css deja lo siguiente para darle mejor aspecto:

#map {
    position: absolute;
    width: 100%;
    height: 100%;
}

.leaflet-control-scale {
    background-color: azure;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 18px;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    color: black;
}

1) Crear el mapa y definir vista inicial

Empezamos por lo básico: el contenedor #map ya está en el html. Ahora, en script.js inicializamos el mapa con una coordenada y nivel de zoom de arranque.

//Bogotá (puedes usar tu ciudad)
const map = L.map('map').setView([4.65, -74.1],12);
  • Tip: el número de zoom va de 0 (todo el mundo) a ~19 (nivel calle). Para pruebas urbanas, 12–14 suele ir bien.

2) Agregar mapa base

Sin un mapa base es como tener un lienzo en blanco. Añadimos openstreetmap:

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
  • Puedes añadir otros estilos (satélite, gris claro, topográfico) desde proveedores públicos. cambia la url del tileLayer y listo.

3) Agregar marcadores

Los marcadores muestran puntos de interés: pozos en campo, paraderos de movilidad, estaciones clima.

fetch('data/Cines.geojson')
    .then(res => res.json())
    .then(data => {
        data.features.forEach(feature => {
            const [lon,lat] = feature.geometry.coordinates;
            const nombre = feature.properties.NOMBRE;

            L.marker ([lat,lon])
            .addTo(map)
            .bindPopup(`<strong>${nombre}<strong/>`);

            
        });
    });
  • Si quieres iconos propios, coloca un png en una carpeta dentro de tu proyecto llamada img/ y usa L.icon.
const icono = L.icon({
  iconUrl: 'img/marcador.png',
  iconSize: [24, 24],
  iconAnchor: [12, 24],
  popupAnchor: [0, -24]
});
L.marker([4.68, -74.08], { icon: icono }).addTo(map)
  .bindPopup('sensor lluvia');

4) Control de capas

Cuando el visor crece, necesitas encender y apagar capas. El control de capas viene listo en la libreria Leaflet.

function agregarControlCapas(){
    if(barriosLayer && viasLayer){
    L.control.layers(null, {
        "Barrios": barriosLayer,
        "Vías": viasLayer
    }).addTo(map);
    }
}
  • Deja collapsed: true para ahorrar espacio si tienes muchas capas.

5) Cargar datos geojson

El formato geojson es el puente entre tu análisis en Qgis/ArcGis y la web. Sirve para polígonos catastrales, rutas de buses, coberturas forestal.

fetch('data/Vias_principales_bogota.geojson')
.then(res=> res.json())
.then(data => {
    viasLayer = L.geoJSON(data, {
        onEachFeature: function (feature,layer){
            const  nombreVia = feature.properties.LABEL;
            layer.bindPopup(`<strong>${nombreVia}<strong/>`)
        }

    });
    viasLayer.addTo(map);
    agregarControlCapas();
});
  • Exporta desde Qgis: botón derecho sobre la capa → exportar → guardar como → formato geojson.

6) Detectar clicks en el mapa

ideal para consultas espaciales rápidas o para capturar coordenadas en catastro.

map.on('click', function(e) {
    L.popup()
        .setLatLng(e.latlng)
        .setContent("Coordenadas: " + e.latlng.toString())
        .openOn(map);
});
  • Puedes guardar esos puntos en tu backend más adelante; por ahora basta con mostrar la ventana emergente.

7) Dibujar formas geométricas

Para delimitar un predio, un área de clima o una zona de exclusión en movilidad.

L.circle([4.564105, -74.052143],{
    radius: 1000,
    color: 'red'
}).addTo(map).bindPopup("Radio de 1000 metros");

L.polygon([
    [4.655,-74.11],
    [4.66,-74.1],
    [4.65,-74.09],
    [4.645,-74.1]
], {
    color: 'green'
}
).addTo(map).bindPopup("Zona de interés");


L.polyline([
    [4.64, -74.12],
  [4.645, -74.115],
  [4.65, -74.11],
  [4.655, -74.105]
],{
    color: 'yellow',
    weight: 5
}
).addTo(map).bindPopup("Ruta trazada");
  • Más adelante puedes integrar el plugin leaflet.draw para edición interactiva, pero con esto ya comunicas ideas.

8) Hover para destacar

Mejorar la interacción sin click hace que los mapas interactivos se sientan fluidos. Usa eventos de mouseover y mouseout al cargar el geojson.

fetch('data/Barrios_bogota.geojson')
.then(res=> res.json())
.then(data => {
    barriosLayer = L.geoJSON(data, {
        style: {
            color: "#3388ff",
            weight: 1,
            fillOpacity: 0.3
        },
        onEachFeature: function (feature, layer){
            const nombreBarrio = feature.properties.BARRIO;

            layer.on({
                mouseover: function (e){
                    e.target.setStyle({
                        weight: 3,
                        color: "#FFD700",
                        fillOpacity: 0.5
                    });
                },
                mouseout: function(e){
                    barriosLayer.resetStyle(e.target);
                }
            });

            layer.bindTooltip(nombreBarrio,{
                permanent: false,
                direction: 'center',
                className: 'tooltip-barrio'
            });
        }
    });
    barriosLayer.addTo(map);
    agregarControlCapas();
});
  • Este patrón ayuda a leer polígonos densos, muy útil en cartografía urbana.

9) Control personalizado y zoom animado

Un botón propio mejora la experiencia sin recargar la interfaz. Además, el zoom animado ayuda a mejorar la interactividad.

const BtnCines = L.Control.extend({
    onAdd: function(){
        const btn = L.DomUtil.create('button');
        btn.innerHTML = 'Cines';
        btn.onclick = () => map.flyTo([4.65,-74.1],14);
        return btn;
    }
});
map.addControl(new BtnCines({position: 'topright'}));
  • flyTo hace una animación agradable. para un salto inmediato usa setView.

10) Control de escala

Pequeño detalle que los usuarios esperan en un visor profesional.

L.control.scale({
    position: 'bottomleft',
    metric: true,
    imperial: false,
    maxWidth: 200,
    updateWhenIdle: true
}).addTo(map);

Ejemplos rápidos por sector

Campo: marca pozos, dibuja un buffer de 300 m y destaca parcelas al pasar el cursor. Añade una capa geojson de fincas y un popup con hectáreas.

Catastro: carga manzanas y predios, agrega un control de capas para años diferentes. Con el click, muestra coordenadas y código catastral.

Clima: grupo de marcadores con estaciones y un polígono de zonas de alerta. Usa color fucsia para niveles altos y azul para niveles bajos.

Movilidad: rutas de bus en geojson, estaciones como markers y flyTo para ir a corredores clave. Escala visible para mediciones rápidas.

Forestal: polígonos de coberturas y hover para resaltar tipos. Combina un mapa base gris y capas en aguamarina para contraste.

Buenas prácticas para un visor limpio

  • Rendimiento: simplifica geometrías al exportar desde Qgis. Menos vértices, más fluidez.
  • Accesibilidad: colores con buen contraste (usa azul oscuro #162b6f para controles y aguamarina #2596be para polígonos).
  • Móvil primero: usa height: 100vh y evita controles gigantes.
  • Nombres claros: predios_2024.geojson mejor que capa_nueva.geojson.
  • Atribución: si usas openstreetmap u otras fuentes, mantén el crédito.

Checklist final del top 10 funcionalidades de Leaflet

  1. Mapa y vista inicial ✅
  2. Mapa base ✅
  3. Marcadores ✅
  4. Control de capas ✅
  5. Datos geojson ✅
  6. Click en el mapa ✅
  7. Formas geométricas ✅
  8. Hover para destacar ✅
  9. Control personalizado y flyTo ✅
  10. Escala ✅

Si todo está marcado, ya tienes un visor javascript listo para mostrar.

Aquí te explico lo básico para echar a andar tu visor. En el video completo del canal verás el flujo y trucos paso a paso. https://youtu.be/BADB5Uu9mAw

Descarga la guía para crear un mapa desde cero con Leaflet: https://johagis.com/descargar-guia

Si quieres ahorrar tiempo, tengo una plantilla base de aplicación web gis lista para personalizar por 24 usd.