Cómo crear un mapa con Leaflet

por

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:

<!DOCTYPE html>
<html>
<head>
	<style>
	</style>
</head>
	<body>
		<div id = 'map'>
		</div>
	</body>
</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):

<!DOCTYPE html>
<html>
<head>
<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" />

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:

<style>
  #map { 
    width: 100%;
    height: 580px;
    box-shadow: 5px 5px 5px #888;
 }
</style>

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:

<body>
<div id="map"></div>

El script con el código JavaScript

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

<script>
  var map = L.map('map').
     setView([41.66, -4.72],
     15);
</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:

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <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(map);

Añadiendo un control de escala

Por último añadiremos un control de escala:

L.control.scale().addTo(map);

Añadiendo un marcador

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

L.marker([41.66, -4.71],{draggable: true}).addTo(map);

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

 </script>
</body> 
</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

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

Continua aprendiendo a trabajar con Leaflet, en la segunda parte de este tutorial vemos cómo agregar nuestros propios datos GIS al mapa.

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 nuestra newsletter y te enviaremos GRATIS el ebook que te ayudará a impulsar tu perfil GIS:
Vitaminas MappingGIS

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

SUSCRÍBETE

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.