Como crear un mapa con Leaflet

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:

Curso de JavaScript:

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

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

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>

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

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:

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:

Como insertar un círculo

Forma un triángulo en el mapa Leaflet

Como hacer un rectángulo con Leaflet

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:

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?

Deja un comentario

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


El periodo de verificación de reCAPTCHA ha caducado. Por favor, recarga la página.