Bienvenido, hoy vas a saber cómo implementar un mapa Leaflet desde cero y poder sustituir Google Maps API con nuestro Leaflet tutorial completo.
Índice de contenido
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! 🙂
Great content!! Thanks.
Alguien me ayuda quiero hacer un marcador arrastrable en leaflet y agarrar las coordenadas para llevar a mi base de datos y después el administrador que use esas coordenadas y las muestre en el mapa con un popup mostrando su información
Interesante
una consulta estoy comenzando en esto de leaflet y quisiera saber si puedo publicar un shpfile.
quisiera saber si se tiene una limite para publicar un shpfile.
saludos
Muy buenas!!
Puedes poner tantos shapfiles como quieras.
Por ejemplo, en el caso de provincias, podrías perfectamente incluir un shapefile por cada provincia en el que recalques las ciudades, etc…
Un saludo y gracias por comentar.
Excelente tutorial!!! Muchas gracias, en 10 minutos ya tenía mi mapa cargado.
Gracias a ti! Nos alegra mucho saber que te está siendo útil el blog.
Muchas gracias por la guía. Una consulta, quiero saber por favor cómo colocar un buscador en el Mapa. Gracias.
Muy buenas Christian!! Gracias a ti por leernos. El plugin que necesitas es Leaflet Search, aquí te dejo el enlace al GitHub dónde puedes encontrar un ejemplo de cómo implementarlo https://github.com/stefanocudini/leaflet-search.
hola, excelente material, logré hacerlo perfecto, pero me gustaria aber como hacer para que lo marker sea ubicados desde una tabla de mi BD de apex.
gracias.
Hola, gracias por tu interés, nos alegra leer eso. Tenemos pendiente una publicación debido a la demanda dónde incluiremos como almacenar los datos del mapa en una base de datos, incluir un buscador, agrupación de marcadores animados y mucho más.