Leaflet – Crea mapas de manera sencilla

Varias son las opciones a la hora de insertar un mapa en nuestras aplicaciones web. Podríamos optar por incluir un mapa de Google Maps o Bing Maps (una buena opción si el mapa es estático o con funcionalidades básicas) o bien podríamos utilizar librerías especializadas en la creación de mapas dinámicos por ejemplo OpenLayers o Leaflet.

Esta última se trata de una librería Javascript desarrollada por Vladimir Agafonkin. Leaflet tiene varias virtudes que la convierten en una opción recomendable a la hora de crear mapas dinámicos para nuestras aplicaciones web:

Sencillez: Con poquitas líneas de código podremos tener nuestro mapa ya funcionando.

Escalabilidad: Gracias a su modularidad podremos empezar un proyecto con unas funcionalidades básicas que podrán ir aumentando a la par que tu proyecto vaya creciendo. Una librería inicial de poco más de 30KB a la iremos añadiendo tantos plugins como necesitemos.

Versatilidad: Pensada para utilizarse indistintamente en aplicaciones web ejecutadas en ordenadores comunes y dispositivos móviles.

Vamos a crear un mapa de ejemplo con la librería:

1º Importar la librería y sus estilos (dentro de las etiquetas <head> de nuestro HTML):

<script src=”http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js”></script>

<link rel=”stylesheet” href=”http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css”  />

2º Entre las etiquetas <body> vamos a insertar el código javascript necesario para crear el mapa:


var map = L.map('map').setView([43.2980 , -1.9887], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

3º Insertamos un marcador y un polígono regular al que le hemos indicado sus coordenadas:


L.marker([43.2980 , -1.9887]).addTo(map)
.bindPopup('Ejemplo de un popup. &lt;br&gt; Hola San Sebastián!')
.openPopup();

var polygon = L.polygon([
[43.30295, -1.95282],
[43.30232, -1.93068],
[43.2932, -1.93153],
[43.2937, -1.95282]
]).addTo(map)
.bindPopup('Ejemplo de un polígono');

Como vemos, el mapa base está formado por imágenes de OpenStreetMap, aunque podríamos cambiar el proveedor añadiendo nuevos plugins (por ejemplo Google Maps). Luego hemos creado un marker y un polígono en base a sus vértices.

Para seguir profundizando sobre la librería os recomiendo echar un vistazo a su API y sus plugins. Entre ellos podréis encontrar algunos tan curiosos como dbpediaLayer, un plugins que te permitirá añadir en el mapa marcadores correspondientes a artículos georreferenciados de la Wikipedia.

4 comentarios en “Leaflet – Crea mapas de manera sencilla

  1. JOSE MARIA dijo:

    Hola David,
    Acabo de encontrar este blog y debo decirte que me parece muy completo tu tutorial, gracias por compartirlo. ¿hay algún ejemplo en vivo de cómo funcionaría la estación meteo? ¿algún ejemplo con las gráficas?

    saludos.

    • druizoses dijo:

      Hola Jose María,
      gracias por escribir. en el blog.

      Supongo que el comentario irá dirigido a la entrada “Arduino & Raspberry PI como estación meteorológica” . Pero te contesto aquí sin problema.

      En https://github.com/druizoses/Arduino-and-Node-Demos/ tengo varios ejemplos de lo que estuve haciendo con Arduino, Raspberry Pi y Nodejs.
      Se trata de un proyecto desarrollado en Nodejs. Descarga el repositorio, ponlo a funcionar y entra a la raiz del proyecto desde un navegador. Ahí verás un par de ejemplos (con el código usado) de encender y apagar un LED, o de leer la información del sensor de temperatura (el DHT11).
      Puede que falte algo de información, pero descárgate el repositorio y trastea un poco porque lo dejé bastante explicado todo en la interfaz web.

      Un saludo!

    • David dijo:

      Ya me comentarás qué tal.
      El ejemplo del sensor de temperatura se conectaba con Nodejs y leía la temperatura. Con cada lectura de temperatura, se iba rellenando un gráfico y se actualizaba. La librería para la visualización se basaba en bootstrap me parece recordar… Creo que puse la dirección de esa librería también.

      Espero que te sirva!

Deja un comentario

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