Introducción a Leaflet
Bienvenido al curso de introducción a Leaflet.js
Crear mapas interactivos en la web nunca ha sido tan fácil.
Utilizando la librería JavaScript Leaflet, aprenderás a representar lugares, rutas y datos, y a mejorar tus mapas con marcadores, estilos, interacciones y mucho más.
Objetivo del curso
El objetivo de este curso es capacitarle para crear mapas interactivos utilizando Leaflet.
Al finalizar el programa, será capaz de :
- Visualizar un mapa centrado en un lugar,
- Añadir marcadores, polígonos, imágenes, etc.,
- Estilizar y personalizar los objetos del mapa,
- Integrar interacciones (clics, hovers, pop-ups),
- E incluso publicar su mapa en la Web.
No se requiere experiencia previa en Leaflet. Un conocimiento básico de HTML/JavaScript es útil pero no esencial: todo se explica paso a paso.
Organización del curso
Cada sesión sigue una progresión lógica:
- Una presentación resumida de diapositivas para introducir los conceptos clave
- Un texto explicativo que detalla cada punto
- Un ejercicio práctico para aplicar lo aprendido
- Una clave de respuestas accesible para comprobar su trabajo
Duración recomendada por sesión: aproximadamente 1-2 horas.
Puede seguir el curso de forma independiente, según le convenga.
Vous pouvez suivre le rythme en autonomie, à votre convenance.
Material necesario
- Un navegador web (Chrome, Firefox, etc.)
- Un editor de código (Visual Studio Code, o incluso un editor en línea como JSFiddle o CodePen)
- Una conexión a Internet (para cargar los mapas de fondo)
- Descargue el kit de inicio aquí, para descomprimirlo en un directorio de su elección.
Un método sencillo y activo
Este curso hace hincapié en aprender haciendo.
El objetivo no es sólo leer, sino probar, modificar y experimentar. Cuanto más juegues con el código, más naturalmente retendrás los conceptos.
¡Empecemos! ¡Empecemos!
Cargando…
Recargar el documento 
Abrir en una nueva pestaña
Diapositiva 1 :¿Qué es Leaflet?
Introducción a Leaflet
Leaflet es una potente y ligera biblioteca JavaScript de código abierto para crear mapas interactivos y dinámicos en páginas web. Es una de las herramientas más populares para mapas web, y se utiliza mucho por su sencillez y capacidad de integración con diversas fuentes de datos geográficos.
Principales características de Leaflet
- Ligereza: Leaflet es una biblioteca muy ligera (unos 40 KB comprimidos), lo que la hace ideal para aplicaciones web en las que el rendimiento es esencial.
- Facilidad de uso: gracias a su sintaxis sencilla y clara, Leaflet es accesible incluso para los principiantes en JavaScript.
- Extensibilidad: aunque la biblioteca básica ofrece funciones esenciales para los mapas interactivos, Leaflet puede ampliarse con una serie de plugins para añadir funciones adicionales (por ejemplo, gestión de capas, geolocalización, dibujo de formas geográficas, etc.).
- Compatibilidad con otros formatos: Leaflet puede utilizarse fácilmente con mosaicos rasterizados (imágenes de mapas) y datos vectoriales (GeoJSON, KML, etc.).
¿Por qué utilizar Leaflet?
Leaflet le permite crear mapas web que satisfacen una gran variedad de necesidades, desde sencillos mapas de localización hasta complejas visualizaciones de datos geoespaciales. He aquí algunos ejemplos de casos de uso de Leaflet:
- Visualización de mapas interactivos con tiles como OpenStreetMap, Mapbox u otros servicios de tiles.
- Creación de mapas ligeros del Sistema de Información Geográfica (SIG) para la visualización de datos geoespaciales.
- Mapas de seguimiento en tiempo real (por ejemplo, para rastrear vehículos o personas).
- Aplicaciones de geolocalización, para mostrar posiciones en mapas.
- Mapas utilizados en aplicaciones turísticas, donde se indican puntos de interés o rutas.
Diapositiva 2: Componentes básicos
1.El mapa (L.map)
Este es el contenedor principal de tu aplicación de mapas.
let map = L.map('map').setView([48.8566, 2.3522], 13); // Paris avec un zoom de 13
2.Fondos de mapa (tiles)
Son imágenes divididas en pequeños tiles (256×256 px) que se cargan según el nivel de zoom y la posición.
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
3.Marcadores (L.marker)
Indican una posición precisa en el mapa (a menudo con un icono o símbolo).
L.marker([48.8566, 2.3522]).addTo(map)
.bindPopup('Paris').openPopup();
4.Formas vectoriales
Leaflet permite dibujar :
- Polígonos (L.polygon)
- Polilíneas (L.polyline)
- Círculos (L.circle)
- Rectángulos (L.rectangle)
Ejemplo :
L.polygon([
[48.85, 2.35],
[48.85, 2.37],
[48.87, 2.37]
]).addTo(map);
5.Popups y tooltips
Para mostrar información al pasar el ratón por encima o al hacer clic.
marker.bindPopup(«Aquí hay una ventana emergente»);
marker.bindTooltip(«Un pequeño tooltip», {permanent: true});
6.Control de capas (L.control.layers)
Para cambiar entre varios mapas base o capas de información.
let baseMaps = {
"OSM": osmLayer,
"Satellite": satelliteLayer
};
let overlayMaps = {
"Réseaux": networkLayer
};
L.control.layers(baseMaps, overlayMaps).addTo(map);
7.Eventos
Cada elemento (mapa, marcador, polígono, etc.) puede escuchar eventos: clicks, hovers, zooms, etc.
map.on('click', function(e) {
alert("Coordenadas: » + e.latlng);
});
8.Capas GeoJSON
Para mostrar datos vectoriales dinámicos (a menudo tomados de bases de datos o archivos).
L.geoJSON(geojsonData).addTo(map);
9.Plugins
Leaflet cuenta con una gran comunidad. Puedes añadir funciones como búsqueda, clusters, métricas, etc., a través de plugins.
Algunos ejemplos son :
- Leaflet.draw (dibujo interactivo)
- Leaflet.markercluster
- Leaflet.fullscreen
Diapositiva 3: Ejemplo de mapa Leaflet
Ejemplo básico de uso de Leaflet
Explicación: Esta diapositiva explica cómo inicializar un mapa utilizando Leaflet. El código de ejemplo muestra cómo :
- Inicializar el mapa con L.map(‘id’).
- Posicionar el mapa en el centro con setView(), definiendo las coordenadas geográficas (latitud, longitud) y el nivel de zoom.
- Añadir una capa de azulejos con L.tileLayer(), utilizando azulejos gratuitos de OpenStreetMap.
El objetivo es entender cómo definir los parámetros básicos para mostrar un mapa Leaflet.
He aquí un ejemplo sencillo de cómo inicializar un mapa Leaflet y añadir un marcador:
<!DOCTYPE html><html>
<head>
<title>Exemple Leaflet</title>
<meta charset=»utf-8″ />
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<link rel=»stylesheet» href=»https://unpkg.com/leaflet/dist/leaflet.css» />
<style>
#map { height: 400px; }
</style>
</head>
<body>
<h3>Ma première carte avec Leaflet</h3>
<div id=»map»></div>
<script src=»https://unpkg.com/leaflet/dist/leaflet.js»></script>
<script>
var map = L.map(‘map’).setView([48.8566, 2.3522], 13); // Coordonnées de Paris
// Ajout d’une couche de tuiles
L.tileLayer(‘https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’, {
attribution: ‘© <a href=»https://www.openstreetmap.org/copyright»>OpenStreetMap</a> contributors’
}).addTo(map);
// Ajout d’un marqueur
L.marker([48.8566, 2.3522]).addTo(map)
.bindPopup(«<b>Paris</b><br>La capitale de la France»)
.openPopup();
</script>
</body>
</html>
Este código crea un mapa centrado en París, con un marcador que muestra una ventana emergente con texto descriptivo. Los usuarios pueden hacer zoom, desplazar el mapa e interactuar con él.
Ver el mapa en una nueva pestaña.
Diapositiva 4: Añadir un marcador y una ventana emergente
Explicación: Esta diapositiva muestra cómo añadir un marcador al mapa. El marcador representa un punto geográfico y, una vez añadido, se puede asociar una ventana emergente para mostrar información cuando el usuario haga clic en dicho marcador. El código L.marker().addTo(map) se utiliza para crear un marcador, y bindPopup() para asociar una ventana emergente que contenga un mensaje.
Diapositiva 5: Personalizar un marcador con un icono
Explicación: Los marcadores en Leaflet pueden personalizarse con iconos para hacerlos más visuales y representativos. Esta diapositiva muestra cómo utilizar la clase L.icon() para crear un icono personalizado y aplicarlo al marcador a través de la opción icono. Esto permite personalizar el aspecto del marcador en función del contexto de la aplicación (por ejemplo, un marcador que represente una gasolinera o un hotel con iconos específicos).
Diapositiva 6 : Añadir varios marcadores a un mapa
Explicación : Cuando es necesario añadir varios puntos de interés al mapa, esta diapositiva explica cómo proceder. Puede crear varios marcadores, cada uno con unas coordenadas específicas, y luego añadirlos al mapa. Un código de ejemplo muestra cómo crear una matriz de coordenadas y, a continuación, utilizar el bucle forEach() para añadir los marcadores al mapa. Esto permite añadir cientos o miles de puntos sin ninguna sobrecarga de código.
Diapositiva 7 : Estructura básica de una página de folleto
Resumen de los elementos clave:
- Un
<div id="map">para contener el mapa. - CSS obligatorio para definir el tamaño del contenedor.
- Los enlaces a los archivos Leaflet (CSS + JS).
- Un script JavaScript para :
- crear el mapa,
- añadir un mapa de fondo,
- posiblemente añadir capas, marcadores, ventanas emergentes, etc.
<!DOCTYPE html>
<html>
<head> <title>Ma première carte Leaflet</title>
<meta charset=»utf-8″ />
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<link rel=»stylesheet» le CDN Leaflet />
<style>
Définition de la carte
</style>
</head>
<body>
<h1>Carte interactive avec Leaflet</h1> <div id=»map»></div>
<script>
… Les éléments de la carte
</script>
</body>
</html>
Ejercicio práctico
Ejercicio – Sesión 1: Mi primer mapa interactivo
Objetivo:
Crear un mapa interactivo centrado en su ciudad, con tres puntos de interés de su elección (lugares turísticos, lugares personales, etc.).
Pasos a seguir :
Crear un archivo index.html
Este archivo contendrá el código de su mapa.
Añada los recursos Leaflet
En la etiqueta HEAD, pegue este código para cargar la biblioteca Leaflet:
- <link rel=»stylesheet» href=»https://unpkg.com/leaflet@1.9.4/dist/leaflet.css» /> <script src=»https://unpkg.com/leaflet@1.9.4/dist/leaflet.js»></script>
Prepare un área de visualización para el mapa
En el BODY , añade un div con un identificador de mapa y dale una altura en una etiqueta o directamente en CSS :
- <div id=»map» style=»height: 400px;»></div>
Inicializar el mapa
En una etiqueta <script>
var map = L.map(‘map’).setView([48.8566, 2.3522], 13); // Cree un mapa centrado en su ciudad (París, por ejemplo)
L.tileLayer(‘https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’, { attribution: ‘© OpenStreetMap contributors’ }).addTo(map);// Añade una capa de fondo (OpenStreetMap)
Añada 3 marcadores personalizados
Coloca tres puntos en tu mapa con burbujas de información:
- L.marker([48.8584, 2.2945]).addTo(map).bindPopup(«Tour Eiffel»);
- L.marker([48.8606, 2.3376]).addTo(map).bindPopup(«Louvre»);
- L.marker([48.8738, 2.2950]).addTo(map).bindPopup(«Arc de Triomphe»);
Bonus :
Añade una interacción para mostrar las coordenadas al hacer clic en el mapa:
map.on(‘click’, function(e) {
alert(«Coordonnées : » + e.latlng);
});
Resultado esperado:
Aparece un mapa en el centro de su navegador, ampliado en su ciudad, con tres marcadores. Al hacer clic en cada marcador se abre un tooltip. Al hacer clic en cualquier punto del mapa, se muestran las coordenadas del punto.
Ver el resultado de París en una pestaña nueva
Ver el resultado para Isla Rodrigues en una pestaña nueva
