Cómo crear un mapa con Leaflet

leaflet-logo

Leaflet es una librería JavaScript opensource para crear mapas interactivos en un entorno móvil.

Cómo veíamos en el artículo ¿OpenLayers o Leaflet?, Leaflet es la elección utilizada por Flickr, Wikimedia, foursquare, OSM, CARTO, GIS Cloud, Washington Post, Wall Street Journal, Geocaching.com, etc.

Algunas de las ventajas de la API de Leaflet son:

En este tutorial vamos a enseñarte a crear un mapa web  de Leaflet utilizando los principales lenguajes de programación:

  • HTML es el lenguaje de marcado de páginas Web y define la estructura del contenido de una página Web.
  • ¿Qué es lo que hace bonita a una página web? Eso es CSS (Cascading Style Sheets u hojas de estilo en cascada).
  • JavaScript es el lenguaje de programación Web para crear aplicaciones que se ejecutan en el navegador y le da funcionalidad a las aplicaciones.

Primeros pasos con Leaflet

El primer paso para la creación de cualquier mapa web JavaScript es elaborar el marco HTML básico. Esta es la estructura que tendrá nuestro HTML:

Utiliza un editor de texto básico y copia el texto anterior en un archivo nuevo. Guárdalo con el nombre leaflet.html.

La cabecera

Vamos a crear un mapa con Leaflet, para ello incluiremos en la cabecera <head> de nuestra página web la librería JavaScript leaflet.js (que contiene el código de la libería) y la hoja de estilo leaflet.css (con la hoja de estilos de la librería):

Estilo del mapa (CSS)

Nos aseguramos que el contenedor de mapa tenga un tamaño definido, dentro de la etiqueta <style> lo fijamos en CSS:

El cuerpo

Dentro de la etiqueta <body> encontramos el marcado para el mapa, que genera un único elemento de documento. También damos al contenedor un atributo id para que podamos hacer referencia a él en nuestro código:

El script con el código JavaScript

Ahora añadimos el siguiente código dentro del <script>:

L.map es la clase central de la API. Se usa para crear y manipular el mapa. En el mapa establecemos unas coordeanas de la vista y un nivel de zoom.

Añadiendo las capas de OpenStreetMap

A continuación añadimos un mapa base como tile layer, en este caso las imágenes de OSM. Crear un tile layer lleva implícito establecer la URL, el texto con la atribución y el máximo nivel de zoom de la capa:

Añadiendo un control de escala

Por último añadiremos un control de escala:

Añadiendo un marcador

Y después un icono ¡que también se puede mover!

Solo falta cerrar el script, el cuerpo y el html:

Este es el resultado:

Para obtener el html y el código haz botón derecho > Guardar enlace como… en el siguiente enlace: https://mappinggisformacion.com/visores_webmapping/leaflet.html

En la segunda parte vamos a ver cómo agregar nuestros datos GeoJSON al mapa.

También puedes examinar los tutoriales y explorar la documentación de la API.

Si quieres aprender a crear completas aplicaciones y visores webmapping con Leaflet apúntate ya a nuestro curso online de visores webmapping con Leaflet.

Let’s connect!

Date de alta en nuestro newsletter
y recibe este ebook gratuito

Y una vez al mes recibirás las últimas novedades del sector GIS y de nuestros cursos

6 comentarios en “Cómo crear un mapa con Leaflet”

  1. buenas… como puedo colocar el mapa de una pronvincia con sus respectivas ciudades de un determinado pais pero solo esa pronvincia

  2. Alguien sabe cómo puedo tener un mapa con puntos de interés, donde pueda dibujar un polígono y que se seleccionen los puntos dentro de ese polígono para filtrarlos en alguna tabla?.
    Muchas gracias.

  3. Hola, donde puedo conseguir tiles (minimalistas al estilo mapbox) para montar mi propio servidor de mapas o utilizar de alguna manera sin limitaciones mapas con el estilo de mapbox street?

    Muchas gracias

Los comentarios están cerrados.