En este momento estás viendo Cómo crear mapas dinámicos con la API JavaScript LeafLet

Cómo crear mapas dinámicos con la API JavaScript LeafLet

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

Leaflet es una librería de JavaScript de código abierto que se utiliza para crear mapas interactivos en la web. Es una de las herramientas más populares para el web mapping, especialmente cuando se busca algo ligero, fácil de usar y muy personalizable.

Características principales de Leaflet

  • Ligera: Solo pesa unos KB, por lo que es ideal para proyectos rápidos y móviles.
  • Personalizable: Permite agregar estilos, íconos personalizados, controles, capas, etc.
  • Extensible: Tiene muchos plugins que permiten agregar funcionalidades como clustering, geolocalización, gráficos, comparaciones de mapas.
  • Soporte de múltiples fuentes de mapas: Puedes usar OpenStreetMap, Mapbox, Esri, CartoDB.
  • Código abierto (Open Source): Bajo licencia BSD, puedes usarlo libremente incluso en proyectos comerciales.

Con Leaflet puedes:

  • Usar geolocalización del usuario en tiempo real.
  • Mostrar mapas base de OpenStreetMap, Google, Mapbox, etc.
  • Agregar marcadores interactivos.
  • Dibujar líneas, polígonos y círculos.
  • Leer y visualizar datos en formato GeoJSON.
  • Crear pop-ups y ventanas de información.
  • Implementar herramientas como medición de distancia, capas de control, filtros o selección de elementos.

Empecemos, asi que estos son los pasos:

1️⃣ Visual Studio Code (VS Code)

  • Abre VS Code.
  • Crea una carpeta nueva para tu proyecto, por ejemplo: mapa_leaflet.
  • Dentro de esta carpeta, crea 3 archivos (en mi caso los nombre como mapa, pero puedes estructurarlos como quieras):
    • index.html
    • estilos.css
    • main.js

2️⃣ Crear el archivo HTML

Este es el esqueleto del sitio web. Incluirás la conexión con Leaflet y tus propios archivos.

<!DOCTYPE html>
<html>
<head>
	<title>Sitios Turisticos de Colombia</title>
	 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   		integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   		crossorigin=""/>		
	<link rel="stylesheet" type="text/css" href="estilos.css"/>	
	<div id="map"></div>

</head>
<body>	
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   		integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   		crossorigin=""></script>   		
	
	<script src="main.js"></script>
</body>
</html>

3️⃣ Consultar la documentación oficial de Leaflet

Puedes encontrar ejemplos, métodos y funciones en: 🔗 https://leafletjs.com/reference.html

4️⃣ Crear el archivo CSS

Aquí definimos el estilo del mapa y otros elementos.

#map {
  height: 90vh;
  width: 100hw;
}

5️⃣ Crear el archivo JavaScript (main.js)

Este es el corazón de la funcionalidad Leaflet. Aquí se configura que y como se ejecutan las funciones:

let map = L.map('map').setView([4.639386,-74.082412],6)

//Agregar tilelAyer mapa base desde openstreetmap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

6️⃣ Adicionar lista desplegable

Para esto en el HTML agregas un <select id="">. Puedes llenarla manualmente o usar JavaScript para agregar las opciones automáticamente desde un array.

<select name="select-location" id="select-location">
	<option value="-1">Seleccione un lugar:</option>
	<option value="6.636254,-73.223129">Barichara-Santander</option>
	<option value="12.19602,-72.147218">Cabo de la Vela-La Guajira</option>	
	<option value="10.42278,-75.539217">Castillo San Felipe Cartagena-Bolivar</option>
	<option value="2.265124,-73.794523">Caño Cristales-Meta</option>
	<option value="3.233851,-75.168934">Desierto de Tatacoa-Huila</option>
	<option value="6.233825,-75.167062">Guatape-Antioquia</option>
	<option value="4.945885,-73.825740">Guatavita-Cundinamarca</option>
	<option value="2.135151,-76.410226">Parque Purace-Cauca</option>		
	<option value="1.888593,-76.295127">San Agustín-Huila</option>		
	<option value="5.638118,-73.526864">Villa de Leiva-Boyacá</option>			
</select>

7️⃣ Funcionalidad flyTo

Leaflet tiene un método llamado flyTo([lat, lon], zoom) que permite hacer una animación suave hacia la ubicación seleccionada. Esto es útil para centrar el mapa según la selección del usuario.

document.getElementById('select-location').addEventListener('change',function(e){
  let coords = e.target.value.split(",");
  map.flyTo(coords,13);
})

Listo. Al tener los 3 archivos configurados, ya podrás abrir tu aplicacion en un navegador haciendo click en el index.html.

Aquí encuentras todo el codigo de este ejercicio.

Ver el proceso completo aquí:

Etiquetas: , , ,