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».
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:
