Introducción a Leaflet: mapas interactivos sencillos y potentes

15 de agosto de 2025

En el mundo del desarrollo web, Leaflet se ha convertido en una de las librerías JavaScript más populares para crear mapas interactivos. Su diseño está pensado para ser ligero, con un núcleo (core) pequeño que ofrece las funciones esenciales para mostrar mapas y elementos básicos de interacción.

Esta filosofía tiene una ventaja importante: puedes empezar de forma simple y rápida, sin tener que aprender una API enorme o cargar funcionalidades que no necesitas. Y si tu proyecto crece, puedes ir ampliándolo con una extensa colección de plugins oficiales y de la comunidad que añaden todo tipo de capacidades: desde dibujar polígonos y medir distancias, hasta mostrar datos en 3D o integrar servicios de geocodificación.

En resumen: Leaflet es pequeño y fácil al principio, pero no se queda corto. Es como una navaja suiza a la que le puedes ir añadiendo herramientas a medida que las necesitas.

¿Por qué usar Leaflet?

Ligera: el núcleo pesa menos de 50 KB.
Compatible: funciona en la mayoría de navegadores y dispositivos móviles.
Extensible: cuenta con multitud de plugins para añadir funcionalidades avanzadas.
Fácil de aprender: ideal para principiantes y proyectos rápidos.

Ejemplo básico de mapa con Leaflet

El siguiente ejemplo muestra cómo crear un mapa centrado en unas coordenadas concretas, añadir un marcador y mostrar un popup. Solo necesitas incluir la librería Leaflet y un contenedor para el mapa.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Mapa con Leaflet</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- CSS de Leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

    <style>
        #map {
            height: 500px;
        }
    </style>
</head>
<body>

<h1>Mi primer mapa con Leaflet</h1>
<div id="map"></div>

<!-- JS de Leaflet -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
    // Inicializar el mapa
    var map = L.map('map').setView([43.3336, -8.3174], 14);

    // Añadir capa base de OpenStreetMap
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
    }).addTo(map);

    // Añadir un marcador
    var marker = L.marker([43.3336, -8.3174]).addTo(map);

    // Popup en el marcador
    marker.bindPopup("<b>Hola!</b><br>Este es un mapa de Leaflet centrado en Oleiros.").openPopup();
</script>

</body>
</html>

Cómo funciona el código

Importamos Leaflet: a través de sus archivos CSS y JS desde un CDN.
Creamos un contenedor #map: donde se dibujará el mapa.
Inicializamos el mapa: con L.map() y lo centramos en un punto.
Añadimos una capa base: usando L.tileLayer() con teselas de OpenStreetMap.
Colocamos un marcador: y le añadimos un popup.

Introducción a Leaflet: mapas interactivos sencillos y potentes

¿Por qué usar Leaflet?

Ejemplo básico de mapa con Leaflet

Cómo funciona el código

← Volver al blog