Leaflet JS es uno de mis mayores descubrimientos de los últimos años. Es una de las librerías de mapas web más poderosas que encontrarás, compitiendo con la API de Google, ESRI o Mapbox gracias a su gran comunidad y los geniales plugins que van desarrollando.

El sofware libre se impone de nuevo 🤟

(Encuentra el código del mapa anterior en este post, con algunos otros ejemplos de Leaflet)

1. Requisitos.

Todo lo que necesitas es lo siguiente:

  • Un navegador web con compatibilidad html y javascript (cualquier navegador moderno como Firefox, Vivaldi, Opera, Chrome, Edge, etc servirá).
  • Un editor de texto (como el bloc de notas mismo).
    • [OPCIONAL] Un servidor web para alojar la página y hacerla accesible a través de internet. En todo caso, podrás abrir el fichero localmente con algunas funciones restringidas.

2. Integrar Leaflet en cualquier página.

Al tratarse de una librería es muy simple usarla en un entorno web. De hecho verás ejemplos incrustados directamente a lo largo del post.

Para empezar, crea un nuevo fichero de texto y cambia su extensión a .html.

Luego añade la estructura básica de un documento HTML, como la que encontrarás en w3schools, web que siempre recomiendo:

Añade las funcionalidades de Leaflet insertando los enlaces a las librerías dentro de la etiqueta <head> de la siguiente forma:

<head>
.....
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
  integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
  crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
  integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
  crossorigin=""></script>
.....
</head>

Este método lee la librería directamente de la web, pero también puedes descargar los archivos .css y .js y referirte a su ubicación local:

<link rel="stylesheet" href="/path/to/leaflet.css" />
<script src="/path/to/leaflet.js"></script>

Esta opción no se verá afectada por la conexión de red, o cambios en el fichero online, a la vez que nos permitirá realizar cambios personalizados en nuestro fichero local.

3. Añadir un mapa al cuerpo del HTML

Ubicado en html <body>

Leaflet añade sus componentes dentro del elemento <div> que asignemos dentro del <body> para acomodar nuestro diseño. Es necesario asignar una "id" a este <div> para que Leaflet lo identifique posteriormente. Voy a usar "mapid" para este ejemplo:

<div id="mapid" style="height:500px;"></div>

El mapa se verá afectado por las propiedades CSS que definamos para la etiqueta #mapid. Esto modifica cómo el elemento encaja y se ajusta a la página.

Como ejemplo, voy a modificar el contorno para que sea redondeado en lugar de rectangular, definiendo un radio de 30px al borde. Añado estos cambios dentro de las etiquetas CSS <style>. Puedes comentar o eliminar estas líneas para ver la diferencia.

<style>
#mapid{border-radius: 30px;}
</style>

Definir el mapa en javascript

Vamos a añadir el objeto del mapa en sí. Para ello usamos las funciones de la librería Leaflet (llamadas mediante L.). Añadimos esta función dentro de las etiquetas de <script> ya que hacen uso de javascript.

  • Definir el objeto de mapa. Añadimos el mapa con la función "L.map" y hacemos referencia al elemento "mapid". Luego definimos la vista y zoom iniciales con "L.setView".

    Voy a centrar la vista aproximadamente en Miami (haciendo una búsqueda en internet puedes encontrar una latitud y longitud aproximadas: 25.75, -80.2).
    El nivel de zoom lo defino en 12 para que esté bastante cerca. Valores altos harán más zoom y valores bajos harán menos zoom.
var map = L.map('mapid').setView([25.75, -80.2], 12);
  • Definir la capa base. Los mapas web hacen uso de imágenes teseladas que se van cargando de forma dinámica a medida que nos movemos por el mapa. Podemos usar la función "L.tileLayer" con cualquiera los servicios referidos en este post, incluyendo Open Street Maps (OSM), Google Maps, y ESRI. Usaremos OSM para este ejemplo:
L.tileLayer("http://a.tile.openstreetmap.org/{z}/{x}/{y}.png", {/*no properties*/
}).addTo(map);
  • Por último, vamos a añadir un marcador, una funcionalidad básica que querrás en muchos mapas. Definiremos el texto dentro de "bindPopup", pudiendo formatearlo con etiquetas HTML. La función "openPopup" muestra la etiqueta del marcador directamente al inicio.
//marcador
var marker = L.marker([25.77, -80.13]).addTo(map);

//etiqueta
marker.bindPopup("<b>I'm in</b><br>Miami Beach!").openPopup();

Resultado final.

El siguiente rectángulo es un bloque HTML insertado en wordpress con todo el código que hemos ido desarrollando. Debería mostrar el mapa base OSM centrado en Miami con un marcador en Miami Beach y con el borde redondeado.


El código exacto que contiene ese bloque HTML es el siguiente:

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
  integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
  crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
  integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
  crossorigin=""></script>

</head>

<style>
#mapid{border-radius: 30px;}
</style>

<body>
	<div id="mapid" style="height:500px;"></div>
</body>

<script>

//leaflet map object
var map = L.map('mapid').setView([25.75, -80.2], 12);

//tiled basemap object
var googleMaps = L.tileLayer("http://a.tile.openstreetmap.org/{z}/{x}/{y}.png", {/*no properties*/
}).addTo(map);

//marker object
var marker = L.marker([25.77, -80.13]).addTo(map);

//pop up object attached to marker object
marker.bindPopup("<b>I'm in</b><br>Miami Beach!").openPopup();


</script>
</html>

TIP! Puedes copiar y pegar este código en un fichero de texto con extensión .html y abrirlo en tu navegador.

Y con esto.. a jugar! No te pierdas la documentación y los plugins en la web de Leaflet. Hay cantidad de características increíbles para añadir a tu mapa.

Aquí te indico las más interesantes que he probado:

Espero que hagas buen uso de él, y que puedas promover su uso y su desarrollo. Al fin y al cabo, el software libre es de todos! ¡Hasta la próxima! 👋

Referencias