Bienvenido, hoy vas a saber cómo implementar un mapa Leaflet desde cero y poder sustituir Google Maps API con nuestro Leaflet tutorial completo.
Antes de nada, seguramente ya sepas que es Leaflet y todo lo que conlleva, API, ejemplos, extensiones… Pero si no es el caso, te dejamos esta pequeña introducción acerca de ¿qué es Leaflet?
Leaflet es una librería JavaScript opensource que permite crear mapas interactivos aptos para dispositivos móviles.
Está diseñado teniendo en cuenta:
- Simplicidad
- Rendimiento
- Usabilidad
Se puede ampliar con una gran variedad de complementos que dispone en la web, además de una bonita API.
Cabe destacar su facilidad de uso, la documentación bien detallada y un código fuente simple y entendible.
Una vez sabemos que es Leaflet y lo que nos permite hacer, tan solo nos hará falta un breve conocimiento en HTML para poder hacer nuestra estructura. Y algo de JavaScript, si no es tu caso no te preocupes, sigue el turorial Leaflet paso a paso y échale un vistazo a estos videos.
Crear web en HTML:
https://www.youtube.com/watch?v=yJcoqOBklK4
Curso de JavaScript:
https://www.youtube.com/watch?v=CfHSISBk9ts
Iniciando con Leaflet
Lo primero que vamos hacer en nuestro Leaflet tutorial sino estamos integrando el mapa en un CMS como puede ser WordPress, será crear la estructura de nuestra página web, es decir, nuestro marco HTML básico. Si lo quieres implantar en WordPress copiar simplemente el contenido de <head> el <div> del mapa y el <script>.
<!DOCTYPE html>
<html>
<head>
<title>Primeros pasos con Leaflet</title>
</head>
<body>
</body>
</html>Utiliza un editor de texto (sublime text, notepad…) y copia el texto anterior, ahora guarda el archivo como index.html por ejemplo.
Preparando la página
Antes de empezar a tocar código para crear el mapa Leaflet, debemos preparar la página incluyendo el css y js de la librería Leaflet:
Para ello incluiremos en la cabecera la librería JavaScript leaflet.js y la hoja de estilo leaflet.css de la siguiente manera, antes del cierre de la etiqueta </head>.
<!DOCTYPE html>
<html>
<head>
<title>Primeros pasos con Leaflet</title>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"/>
</head>
<body>
</body>
</html>
Estilo del mapa (CSS)
Para el mapa que vamos a crear le vamos a decir que tiene un ancho del 100% para que se ajuste a toda la pantalla y un alto de 600 píxeles, por ejemplo: –> </head> <body> </body> </html>
<!DOCTYPE html>
<html>
<head>
<title>Primeros pasos con Leaflet</title>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"/>
<!-- Añadiendo CSS -->
<style> /*Añadiendo el estilo de nuestro mapa*/ #map {width: 100%; height: 600px;} </style>
<!-- Fin añadiendo CSS -->
</head>
<body>
</body>
</html>Esto lo incluiremos después de la etiqueta </link> añadida anteriormente y antes de la etiqueta </head>.
Donde situamos el mapa
Ahora vamos a insertar nuestro id nombrado anteriormente con las dimensiones del mapa, me refiero a #map. Para ello vamos a introducirlo mediante etiquetas <div> que será nuestro contenedor dentro de la etiqueta <body>.
<body> <div id = 'map'></div> </body>
Crear mapa con Leaflet
Finalmente vamos con lo más important el <script> con el código JavaScript. Primero de todo vamos a cargar nuestro mapa:
Para añadir un mapa base utilizamos tileLayer, mediante OpenStreetMap. Crear un tile layer conlleva establecer la URL, el texto con la atribución y el máximo nivel de zoom de la capa:
<script type="text/javascript">
//Cargando nuestro mapa
var mapsipe = L.map('map').
setView([38.6202, -0.5731],
15); //[38.6202, -0.5731] es la latitud y longitud de la zona que queremos mostrar, en nuestro caso Ibi
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
maxZoom: 18
}).addTo(mapsipe);
</script>Para buscar nuestra dirección, nos vamos a dirigir a OpenStreetMap y vamos a buscar la localización que queremos mediante el código postal.
Una vez localizada la zona, click derecho y pulsamos “Mostrar dirección”
Cuando pulsas sobre mostrar dirección, te saldrá la latitud y longitud, en nuestro caso 38.6202, -0.5731 (Ibi)
Añadiendo marcadores
Entre las etiquetas <script> </script> introducimos los marcadores, formas, eventos que queremos crear:
//MARCADOR1
var marker = L.marker([38.6206, -0.58218]).addTo(mapsipe);
marker.bindPopup("<b>Hola!</b><br>Sipe Informática se situa aquí.").openPopup();
//MARCADOR2
var marker2 = L.marker([38.623811, -0.577812]).addTo(mapsipe);
marker2.bindPopup("<b>Hola!</b><br>Aquí hay un Supermercado.").openPopup();
//MARCADOR3
var marker3 = L.marker([38.61962, -0.583606]).addTo(mapsipe);
marker3.bindPopup("<b>Hola!</b><br>Aquí hay otro Supermercado.").openPopup();
Como insertar un círculo
//CIRCULO
var circle = L.circle([38.62140,-0.57251], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 50
}).addTo(mapsipe);
circle.bindPopup("Peligro zona infectada de programadores.");
Forma un triángulo en el mapa Leaflet
//TRIANGULO
var triangle = L.polygon([
[38.61858, -0.57807],
[38.61855, -0.57468],
[38.616401, -0.576782]
]).addTo(mapsipe);
triangle.bindPopup("Esto es otra forma distinta.");
Como hacer un rectángulo con Leaflet
//RECTANGULO
var rectangle = L.polygon([
[38.617776, -0.590172],
[38.616703, -0.587125],
[38.615395, -0.587811],
[38.616502, -0.590901]
]).addTo(mapsipe);
rectangle.bindPopup("Parking gratuito.");
Creando un evento
Cuando el usuario hace clic en un marcador o cambia el zoom del mapa, el objeto correspondiente envía un evento al que puede suscribirse con una función. Le permite reaccionar a la interacción del usuario:
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("Has pulsado en el mapa en la coordenada " + e.latlng.toString())
.openOn(mapsipe);
}
mapsipe.on('click', onMapClick);
Con esto ya tendríamos nuestro mapa cargado, en la zona especificada, con el zoom que queramos y con los marcadores necesarios.
Ahora es tu turno, y no hay mejor forma de aprender que pasándotelo por las manos, carga tu mapa con la ubicación que quieras, añade tantos marcadores como formas a tu gusto, además puedes examinar los tutoriales y explorar la documentación de la API para ampliar el tutoríal de Leaflet.
¿Lo has puesto ya en marcha?
Awesome post! Keep up the great work! 🙂
Muy buen artículo, ahora me falta ponerlo en marcha, un saludo.
Great content! Super high-quality! Keep it up! 🙂