Categorías
Desarrollo GIS

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.

Deja una respuesta

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