leafletjs mapas sencillos y efectivos

10 julio, 2017

leafletjs mapas sencillos y efectivos

Recientemente me ha comentado un cliente sobre la posibilidad de incluir mapas en su web. Pentaho tiene un componente de mapas, pero sería matar moscas a cañonazos.

Leaflet.js es una librería de mapas versátil y muy fácil de usar. Además está bastante bien documentado porque está bastante «de moda».

Tiene buenos tutoriales
La documentación está bastante bien
Y está preparada para que, si quieres, la extiendas mediante plugins

Hacemos una prueba?

Hagamos una página html sencilla:

Hola Mundo.html

<!DOCTYPE html>
<html>
<head>
<!-- incluyo las librerías -->
<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
<!-- aqui irá el estilo del mapa -->
<style>
</style>
</head>
<body>
<!-- Este es el contenedor del mapa -->
<div id="map"></div>
<!-- Aqui pondré mi JS con la definición de mi mapa -->
<script>
</script>
</body>
</html>

Una vez tenemos todo, vamos a ir incluyendo el contenido especifico de nuestro mapa.

1. Definamos una clase css que definirá el contenedor

#map {
width: 500px;
height: 400px;
box-shadow: 5px 5px 5px #888;
}

2. Definamos nuestro mapa:

L es la clase principal de Leaflet y es cómo se declara el mapa. Lo inicializaremos en una ubicación cualquiera… por ejemplo nuestra oficina 😉

var map = L.map('map').
setView( [41.4780103, 2.3043663],
12);

A continuación podremos el repositiorio de mapas. El tileLayer. Los ejemplos de leaflet están con mapbox, pero yo voy a usar openStreetMaps.

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Jortilles',
maxZoom: 18
}).addTo(map);

A continuanción le añadimos el control de escala…

L.control.scale().addTo(map);

Y un popup… que marque un punto en el mapa

var marker = L.marker([  41.4780103, 2.3043663 ],{draggable: true}).addTo(map);  
marker.bindPopup("Hola Mundo!
Aqui estan nuestras oficinas").openPopup();

Si te puedes descargar el ejemplo de aqui: holamundo_jortilles

Otros ejemplo interesante es cómo pintar una ruta en el mapa:

cómo este:

o este: