Andrés Martínez Soto

Transformo ideas en soluciones digitales con impacto: PHP, Python y EdTech.

Crea mapas interactivos con Leaflet: Biblioteca JavaScript gratuita y de código abierto

Andrés Martínez Soto

Crea mapas interactivos con Leaflet: Biblioteca JavaScript gratuita y de código abierto

¿Qué es Leaflet?

Leaflet es una biblioteca de JavaScript de código abierto diseñada para crear mapas interactivos en la web. Es especialmente popular entre desarrolladores que buscan una solución ligera y flexible para integrar mapas interactivos en sus aplicaciones. A diferencia de servicios como Google Maps, Leaflet no requiere API keys ni configuraciones de facturación, lo que lo convierte en una opción accesible y eficiente para desarrollar mapas personalizados.

Entre sus principales características se encuentran:

Ventajas de Leaflet

  1. Es completamente gratuito y de código abierto.
  2. Cuenta con una comunidad activa que desarrolla plugins y extensiones.
  3. Compatible con diversos tipos de datos geoespaciales, como GeoJSON y WMS.
  4. Soporta múltiples capas y servicios web geoespaciales gratuitos.
  5. No requiere configuración de facturación ni claves API.

Desventajas de LeafletJS

  1. Requiere más personalización para casos de uso avanzados comparado con servicios como Google Maps.
  2. No ofrece datos de mapas propios; depende de proveedores como OpenStreetMap.
  3. Para algunos usuarios, puede ser menos intuitivo que las bibliotecas proporcionadas por plataformas comerciales.
  4. Algo más difícil de inicializar e insertar en webs que opciones básicas de «copiar y pegar».

¿Por qué utilizar Leaflet y no Google Maps?

Leaflet es una excelente opción cuando se busca flexibilidad y control sobre el mapa. Mientras que Google Maps ofrece una solución robusta con muchas características listas para usar, Leaflet te permite crear mapas interactivos altamente personalizados. Además, al ser de código abierto, es posible modificar la librería según las necesidades del proyecto.

Tabla de contenidos

Tutorial paso a paso

En este tutorial básico, aprenderás a crear mapas interactivos con Leaflet, añadiendo capas WMS, marcadores y personalizaciones.
Primero, te guiaremos paso a paso para añadir capas WMS, marcadores y personalizar tu mapa, ofreciendo una excelente base para tus proyectos GIS y visualizaciones de datos. Si estás buscando una forma sencilla de integrar mapas en tus aplicaciones web, sin duda Leaflet es una de las mejores herramientas disponibles.

En esta sección, veremos un pequeño tutorial de Leaflet en el que comenzaremos por crear un mapa básico. A continuación, añadiremos una selección de capas de servicios web raster de OpenStreetMap, así como servicios web WMS, como los del Instituto Geográfico Nacional. Además, incorporaremos capas de información WMS y un control para seleccionar el estilo o la capa del mapa. De igual manera, aprenderemos a agregar diferentes overlays o superposiciones para hacer el mapa más completo. Finalmente, veremos cómo añadir un marcador y generar una ventana de información asociada al marcador.

¿Qué necesitas para comenzar?

Antes de empezar, asegúrate de contar con lo siguiente:

  • Conocimientos básicos de HTML5, CSS y JavaScript.
  • Un editor de texto o IDE como Visual Studio Code.
  • Un navegador web moderno.
  • Conocimientos de conceptos geográficos básicos


Paso 1: Configuración inicial

Lo primero que debes hacer es incluir la librería de Leaflet en tu proyecto. Esto se puede hacer mediante un CDN o descargando los archivos. A continuación, crearemos un fichero llamado index.html donde incluimos el CSS y el archivo JavaScript necesarios para empezar a trabajar con Leaflet.

HTML
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mapa con LeafletJS</title>
    
    <!-- Cargamos los estilos CSS de Leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <style> 
        

        /* Configuramos el body de la página para utilizar Flexbox */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 100vh;
            margin: 0;
            
        }

        /* Configuramos el CSS del contenedor del mapa */
        #map {
            width: 90vw;
            height: 95vh;
        }
    </style>
</head>
<body>
    <h1>Mi Primer Mapa Interactivo</h1>
    <div id="map"></div>
    
    <!-- Cargamos la librería de Leaflet -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    
    <!-- Cargamos nuestro fichero de mapa interactivo -->
    <script src="script.js"></script>
</body>
</html>

Crea el fichero JavaScript: En el mismo directorio, crea un fichero llamado script.js. Este fichero contendrá el código para inicializar el mapa y agregarle funcionalidades.

Paso 2: Creando nuestro primer mapa

Una vez que hayas añadido la librería, el siguiente paso es crear mapas interactivos en el HTML de tu página. Para nuestro caso, vamos a utilizar la zona de València ciudad con el mapa centrado en las coordenadas geográficas [39.470239, -0.376805].

Dentro del fichero llamado script.js que hemos creado en el paso anterior, añadiremos el siguiente contenido.

JavaScript
// Inicializa el mapa centrado en València, España
var map = L.map('map').setView([39.470239, -0.376805], 13);

// Añade una capa base de OpenStreetMap
let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
});

layerOpenStreetMap.addTo(map);

Este código crea un mapa centrado en València con un nivel de zoom de 13. Al recargar el fichero HTML en tu navegador, deberías ver un mapa interactivo.

Mi primer mapa interactivo, paso 1

Paso 3: Añadiendo un marcador al mapa

En este paso añadiremos un marcador con una ventana emergente o infowindow a nuestro mapa.
Un marcador es una herramienta útil para destacar ubicaciones específicas en el mapa.
Para añadirlo, modificaremos el fichero script.js y le añadiremos las siguientes líneas de código

JavaScript
// Añadir marcador en la Plaça de L'Ajuntament, con ventana emergente
var marker = L.marker([39.470239, -0.376805]).addTo(map);
marker.bindPopup("¡Bienvenido a València!").openPopup();

Esto nos creará un marcador dentro del mapa centrado en las coordenadas 39.470239, -0.376805 que corresponden a la Plaça de l’Ajuntament de la ciudad de València. Además, nos creará una ventana emergente que mostrará un mensaje de bienvenida.

Paso 2, añadiendo un marcador al mapa

Si hacemos un poco de zoom sobre el mapa, podemos comprobar en qué ubicación se ha añadido el marcador.

Paso 2, mostrando el marcador sobre el mapa

Opciones de los Markers

La clase L.Marker en Leaflet tiene varias opciones y métodos que puedes usar para personalizar los marcadores según tus necesidades. A continuación, te proporciono una descripción general de algunas de las opciones más comunes y cómo usarlas. Para más detalles, puedes consultar la documentación oficial de Leaflet.

Opciones de L.Marker

  • Title: El título que aparece cuando se pasa el ratón sobre el marcador .
  • Alt: Texto alternativo para el marcador, útil para accesibilidad.
  • Icon: Permite establecer un icono personalizado para el marcador ( ver documentación de L.icon) .
  • Draggable: Permite establecer si el marcador es arrastrable por el usuario o no.
JavaScript
// Añadir marcador en la Plaça de L'Ajuntament, con opciones
var marker = L.marker(
  [39.470239, -0.376805],
  // opciones del marcador
  {
    title: 'Plaça de l\'Ajuntament',
    alt: 'Marcador 1',
    draggable: false,
    icon: L.icon({
        iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
        shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
        iconSize:     [24, 39],
		    iconAnchor:   [16, 87],
		    popupAnchor:  [-3, -76]
    })
  }
).addTo(map);

Opciones de ventana emergente
Dentro de una ventana emergente, como la que se muestra al añadir el marcador al mapa, puedes añadir desde un texto básico, como se visualiza en el ejemplo anterior, hasta un texto HTML que contenga imágenes, vídeos, enlaces, estilos y/o cualquier contenido HTML.

JavaScript
let popupContents = "<h3>Bienvenido a València</h3><img src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Plaza_del_Ayuntamiento_de_Valencia.JPG/640px-Plaza_del_Ayuntamiento_de_Valencia.JPG\" alt=\"Plaça de l\'Ajuntament\"/ style=\"width: 230px;\"><p>Esta es la Plaça de l'Ajuntament, el corazón de la ciudad.</p>";

marker.bindPopup(popupContents);
Paso 2, enriqueciendo la ventena de información del marcador

Paso 4: Añadiendo otras capas al mapa

En este paso vamos a añadir, además de nuestra capa base de OpenStreetMap, una capa de vista fotográfica, la ortofoto del PNOA (Plan Nacional de Ortofotografía Aérea), que contiene fotografías aéreas del territorio español y permite visualizar el mapa como si de un satélite se tratase. También incorporaremos un par de capas del Instituto Geográfico Nacional que aportarán datos al mapa, tales como curvas de nivel y un mapa callejero muy detallado. Finalizaremos añadiendo una capa del Catastro, que permitirá visualizar en nuestro mapa todas las edificaciones de España.

Todas estas capas están disponibles como datos públicos y reutilizables en formato WMS (Web Map Service).


¿Qué es un WMS o Web Map Service?

Un WMS (Web Map Service) es un estándar de servicio web que permite acceder a mapas geoespaciales en formato de imágenes a través de internet. Los mapas que se obtienen mediante un WMS son generados dinámicamente por el servidor en respuesta a una solicitud. Esto facilita la visualización de mapas en diversas plataformas sin necesidad de almacenar localmente los datos.

Capas WMS a utilizar

En nuestro ejemplo, vamos a trabajar con las siguientes capas WMS:

  1. PNOA Máxima Actualidad
  2. IGN MDT Curvas de Nivel
  3. IGN Base
    • Capa: IGNBaseTodo
    • Servicio WMS: https://www.ign.es/wms-inspire/ign-base
    • Descripción: Capa que integra todos los datos disponibles en el servicio IGNBase, ofreciendo una visión geográfica completa de España.
  4. Edificios del Catastro

Para añadir nuestras capas WMS al mapa, utilizaremos el objeto L.tileLayer.wms. Este objeto permite consumir servicios WMS y añadirlos como capas en nuestro mapa de Leaflet. Las opciones de configuración que acepta se encuentran detalladas en la documentación oficial de Leaflet: https://leafletjs.com/reference.html#tilelayer-wms.

Algunas de las opciones más importantes que podemos configurar son:

  • URL:.Url del servicio web WMS que queremos consumir.
  • layers: Especifica el nombre de la capa WMS que queremos solicitar al servidor.
  • format: Define el formato de la imagen que se descargará (por ejemplo, image/png o image/jpeg).
  • transparent: Indica si la capa debe tener transparencia (true) o no (false).
  • attribution: Añade información sobre la fuente de los datos, que se mostrará en el mapa.

Un ejemplo de cómo configurar una capa WMS es el siguiente:

JavaScript
var pnoaLayer = L.tileLayer.wms('https://www.ign.es/wms-inspire/pnoa-ma?', {
    layers: 'OI.OrthoimageCoverage',
    format: 'image/jpeg',
    transparent: false,
    attribution: 'PNOA - © Instituto Geográfico Nacional de España'
});

En este caso:

  • La URL del servicio WMS es https://www.ign.es/wms-inspire/pnoa-ma?.
  • La capa solicitada es OI.OrthoimageCoverage.
  • El formato de las imágenes es image/jpeg.
  • La capa no es transparente (transparent: false).
  • La atribución indica la fuente de los datos.

Para añadir más capas WMS seguiremos este mismo patrón, ajustando las opciones según las capas a incluir. Para ello añadiremos al fichero script.js las siguientes líneas de código:

JavaScript
// Definir las capas WMS
var pnoaLayer = L.tileLayer.wms('https://www.ign.es/wms-inspire/pnoa-ma?', {
    layers: 'OI.OrthoimageCoverage',
    format: 'image/jpeg',
    transparent: false,
    attribution: 'PNOA - © Instituto Geográfico Nacional de España'
});

var curvasNivelLayer = L.tileLayer.wms('https://servicios.idee.es/wms-inspire/mdt?', {
    layers: 'EL.ContourLine',
    format: 'image/png',
    transparent: true,
    attribution: '© Instituto Geográfico Nacional de España'
});

var ignBaseLayer = L.tileLayer.wms('https://www.ign.es/wms-inspire/ign-base?', {
    layers: 'IGNBaseOrto',
    format: 'image/png',
    transparent: true,
    opacity: 0.75,
    attribution: '© Instituto Geográfico Nacional de España'
});

var catastroLayer = L.tileLayer.wms('https://ovc.catastro.meh.es/cartografia/INSPIRE/spadgcwms.aspx?', {
    layers: 'BU.Building',
    format: 'image/png',
    transparent: true,
    attribution: 'Catastro © Ministerio de Hacienda'
});

Añadiendo un control para cambiar de capa con L.control.layers

Una vez que hemos configurado y añadido las capas WMS que utilizaremos, necesitamos permitir a los usuarios cambiar entre las diferentes capas del mapa de manera interactiva. Para ello, utilizaremos el control L.control.layers que proporciona Leaflet y cuya documentación podemos encontrar en este enlace.

Este control permite gestionar tanto capas base (aquellas que se excluyen entre sí, como OpenStreetMap, IGN Base y PNOA) como capas superpuestas (overlays), que pueden activarse o desactivarse de manera independiente, como las curvas de nivel o los edificios del Catastro.

Configuración del control L.control.layers

El control se configura especificando dos objetos:

  • baseMaps: Define las capas base disponibles.
  • overlayMaps: Define las capas superpuestas que el usuario puede activar o desactivar.

En nuestro caso, para añadirlo a nuestro mapa y seleccionar entre capas debemos añadir al fichero script.js las siguientes líneas de código:

JavaScript
// Actualizar objeto map para que utilice por defecto la capa de OpenStreetMap
var map = L.map('map', {
  center: [39.470239, -0.376805],
  zoom: 13,
  layers: [osmLayer]
});

// Definir las capas base
var baseMaps = {
    "OpenStreetMap": osmLayer,
    "Ortofoto PNOA": pnoaLayer
};

// Definir los overlays
var overlayMaps = {
    "Callejero BASE IGN": ignBaseLayer,
    "Curvas de Nivel": curvasNivelLayer,
    "Edificios del Catastro": catastroLayer
};

// Crear y añadir el control de capas al mapa
L.control.layers(
    baseMaps, 
    overlayMaps
).addTo(map);

Con esto, los usuarios podrán alternar entre diferentes capas en el mapa.
Al recargar el mapa, el usuario verá en la parte superior derecha un icono que le permite realizar la acción de cambiar de capas y visualizaciones del mapa.

Paso 4, selector de capas del mapa

Tras añadir el control al mapa, podemos cambiar entre nuestras diferentes capas y overlays, por ejemplo visualizar la Ortofoto PNOA con la capa overlay de Callejero BASE IGN lo que nos permitirá simular el efecto habitual del mapa de Google Maps en modo híbrido.

Paso 4, mapa con capa de ortofoto y superposición de callejero IGN transparente

También podremos seleccionar el overlay de curvas de nivel y podremos combinarlo con nuestras vistas Base OpenStreetMaps o PNOA Ortofoto obteniendo un mapa similar a los mpaas físicos que podemos adquirir en papel.

Paso 4, mapa con capa de OpenStreetMaps y curvas de nivel activas
Paso 4, mapa con capa de Ortofoto y curvas de nivel activas

Finalmente y como bonus, hemos añadido una capa de edificios del Catastro. En esta capa se representan los polígonos de los edificios construidos en toda España excepto Navarra y País Vasco, cargándolos dinámicamente y, añadiendo la silueta casi-exacta de cada edificio y aportando a nuestro mapa una especie de efecto de profundidad.

Paso 4, mapa con capa de Ortofoto y overlays de edificios de catastro y callejero IGN activos


Paso 5: Juntándolo todo

Para terminar el tutorial, modificaremos nuestro fichero script.js , que debería quedar similar a como sigue y recargaremos la página que conteniene el mapa.

JavaScript
// Añadir capa base de OpenStreetMap
let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
});

// Definir las capas WMS
var pnoaLayer = L.tileLayer.wms('https://www.ign.es/wms-inspire/pnoa-ma?', {
    layers: 'OI.OrthoimageCoverage',
    format: 'image/jpeg',
    transparent: false,
    attribution: 'PNOA - © Instituto Geográfico Nacional de España'
});

var curvasNivelLayer = L.tileLayer.wms('https://servicios.idee.es/wms-inspire/mdt?', {
    layers: 'EL.ContourLine',
    format: 'image/png',
    transparent: true,
    attribution: '© Instituto Geográfico Nacional de España'
});

var ignBaseLayer = L.tileLayer.wms('https://www.ign.es/wms-inspire/ign-base?', {
    layers: 'IGNBaseOrto',
    format: 'image/png',
    transparent: true,
    opacity: 0.75,
    attribution: '© Instituto Geográfico Nacional de España'
});

var catastroLayer = L.tileLayer.wms('https://ovc.catastro.meh.es/cartografia/INSPIRE/spadgcwms.aspx?', {
    layers: 'BU.Building',
    format: 'image/png',
    transparent: true,
    attribution: 'Catastro © Ministerio de Hacienda'
});


// Definir capas base y overlays
var baseMaps = {
    "OpenStreetMap": osmLayer,
    "Ortofoto PNOA": pnoaLayer
};

var overlayMaps = {
    "Callejero BASE IGN": ignBaseLayer,
    "Curvas de Nivel": curvasNivelLayer,
    "Edificios del Catastro": catastroLayer
};


// Crear el mapa
var map = L.map('map', {
    center: [39.470239, -0.376805],
    zoom: 13,
    layers: [osmLayer]
  });

  
// Añadir control de capas
L.control.layers(baseMaps, overlayMaps).addTo(map);

// Añadir marcador en la Plaça de L'Ajuntament, con ventana emergente
var marker = L.marker(
    [39.470239, -0.376805],
    // opciones del marcador
    {
      title: 'Plaça de l\'Ajuntament',
      alt: 'Marcador 1',
      draggable: false,
      icon: L.icon({
          iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
          shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
          iconSize:     [24, 39],
		  iconAnchor:   [16, 87],
		  popupAnchor:  [-3, -76]
      })
    }
  ).addTo(map);

  let popupContents = "<h3>Bienvenido a València</h3><img src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Plaza_del_Ayuntamiento_de_Valencia.JPG/640px-Plaza_del_Ayuntamiento_de_Valencia.JPG\" alt=\"Plaça de l\'Ajuntament\"/ style=\"width: 230px;\"><p>Esta es la Plaça de l'Ajuntament, el corazón de la ciudad.</p>";
  marker.bindPopup(popupContents);

Finalmente recargando la página que contiene nuestro mapa, nos debería quedar algo similar a esta captura de pantalla, con un mapa plenamente funcional en el que podremos interactuar con él y modificar o seleccionar aquellas capas u overlays que deseamos visualizar.

Mapa final

He dejado el código entero en el siguiente CodePen para que puedas probarlo sin necesidad de copiar el código fuente.

Conclusión

Este tutorial es solo el comienzo de lo que puedes lograr con Leaflet. Ahora sabes cómo crear mapas interactivos con Leaflet, añadir capas, marcadores y personalizarlos. Sin embargo, las posibilidades son mucho más amplias. ¡Prueba Leaflet en tu próximo proyecto y comparte tus resultados! 

En los próximos tutoriales, exploraremos más funcionalidades avanzadas, como la geolocalización, la consulta de datos, y la integración con capas WMS. Además, aprenderemos a incorporar eventos al mapa para cargar marcadores y polígonos a demanda mientras navegamos por él, mejorando la interactividad de tu mapa.

Leaflet es una herramienta poderosa que, junto con sus numerosos plugins y recursos de la comunidad, te permitirá llevar tus proyectos GIS y visualizaciones de datos al siguiente nivel. ¡Gracias por seguir este tutorial! Estoy seguro de que seguirás aprendiendo con Leaflet y creando mapas impresionantes.

,
, , , , , , , ,

2 respuestas a “Crea mapas interactivos con Leaflet: Biblioteca JavaScript gratuita y de código abierto”

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías recientes

Entradas recientes

Archivo de entradas

Etiquetas de catálogos

Automatización CI/CD Develop DevOps Docker edtech ETL Folium GIS GitLab HTML IA JavaScript Leaflet Mapas Maps Moodle Ollama Pandas Python Web Web Development

Conéctate con nosotros