Crear mapas interactivos con Leaflet

¿Qué es Leaflet?

​Leaflet es una biblioteca JavaScript libre, para la creación de mapas interactivos.

Es ligera, simple y maravillosa. Y es una alternativa libre y gratuita a Google Maps.

Las funcionalidades de Leaflet son extensibles a través de cientos de plugins. Ver la página del sitio Leaflet, Extending Leaflet, para adquirir una base sobre esto.

Se integra fácilmente con Mapbox, también libre, para utilizar sus mapas.

Algunas de las funcionalidades integradas de Leaflet:

• Permite usar marcadores/iconos personalizados.
• Insertar polígonos en los mapas.
• Insertar y visualizar vídeos.
• Crear un control de capas que permite al usuario cambiar entre diferentes mapas base y activar o desactivar marcadores superpuestos, tal como se muestra en la  documentación de Leaflet.
• Trabajar con datos GeoJSON, un formato para codificar una variedad de datos estructurados geográficos.

Leaflet y los proveedores de mapas

Leaflet puede ser usado con cualquier proveedor de mapas. Entre los proveedores populares están Mapbox, Thunderforest, Jawg.io, … Todos estos, gratuitos, proporcionan «tiles» basados en OpenStreetMap, el más popular origen de datos para mapas libre.

Mapbox maps puede ser usado con Mapbox js, con Leaflet, y con muchas otras librerías. Lo mismo ocurre a la inversa, Leaflet necesita un proveedor de mapas, que puede ser Mapbox, Thunderforest, u otros.

Siempre que utilicemos cualquier proveedor de mapas basado en OpenStreetMpas, como en el caso de Mapbox, debemos incluir en este una atribución de Copyright.

Listado de proveedores de mapas

Leaflet facilita en su sitio web una serie de proveedores, cuyos mapas podemos previsualizar en esta página. No obstante, para ver la lista completa de proveedores, ver esta página.

GIS (Sistema de información geográfica)

Un sistema de información geográfica (SIG, también llamado GIS por sus siglas en inglés), es un entorno o sistema informático para recopilar, gestionar y analizar datos geográficos.

Cientos de miles de organizaciones lo usan para hacer mapas «inteligentes»: se comunican, muestran más información, realizan pronósticos, resuelven problemas complejos, …

Los GIS de software libres más utilizados

Los 3 presentados, QGIS, gvSIG y ArcGIS, son libres, gratuitos, de gran calidad, y son los más destacados en lo que se refiere a software libre GIS.

• QGIS. Bajo licencia GNU – General Public License. Disponible para Linux, BSD, Windows, Mac y dispositivos móviles. Es un proyecto oficial de la Open Source Geospatial Foundation (OSGeo). Interoperabilidad, Conexión a base de datos, en particular PostgreSQL y PostGIS, gran número de plugins.
• gvSIG. Buen rendimiento con gran volumen de información. A destacar: Integración de algoritmos de SEXTANTE.
• ArcGIS. Destaca en su facilidad de uso y buena documentación. Acceso a geoprocesos sin plugins.

Los GIS y Leaflet

Leaflet no es en absoluto un GIS, pero sí sirve para visualizar los datos generados por un sistema GIS. De entre los muchos plugins disponibles para Leaflet, está Leaflet Filelayer, que permite subir y visualizar un archivos GIS a un mapa creado con Leaflet.

Manejando eventos en Leaflet

Cada vez que ocurre cualquier cosa en Leaflet, como p.ej. que un usuario haga un click en un marcador, el objeto envía un evento que puede asignar una función JS. Nos permite así accionar eventos con una acción del usuario. Por ejemplo:

function clickSobreMapa(e) {
   alert("Has seleccionado el mapa en la posición " + e.latlng);
}
miMapa.on('click', clickSobreMapa);

Aprender Leaflet

Sin duda la documentación oficial es uno de los mejores caminos para aprender Leaflet. De esta, es recomendable empezar en la guía rápida. Siguiendo esta, y con algunos conocimientos de JavaScript, podemos poner un mapa en marcha en muy tiempo.

Extendiendo Leaflet

[leafletjs.com] [txt] Las funcionalidades de Leaflet pueden extenderse de 3 formas:

• Crear una subclase de L.Layer, L.Handler o L.Control, en la forma L.Clase.extend()
  • Los layers se mueven cuando el mapa se desplaza o hace zoom.
  • Los handlers son invisibles e interpretan eventos del navegador.
  • Los controls son elementos fijos de interfaz.
• Agregando más funcionalidades a una clase existente con L.Clase.include()
  • Agregando nuevos métodos y opciones.
  • Cambiando algunos métodos.
  • Usando addInitHook para ejecutar código extra
• Cambiando partes de una clase existente (cambiando el funcionamiento de métodos) con L.Clase.include().

L.Clase

Leaflet dota a JavaScript de cierta claridad de sintaxis en cuanto a la herencia de clases.

L.Clase.extend()

Para crear una subclase de cualquier cosa en Leaflet, usaremos el método .extend(). Este acepta un parámetro: un objeto plano con parejas clave-valor, donde la clave es el nombre de la propiedad o método, y el valor es el valor inicial de una propiedad, o la implementación de un método.

Al nombrar clases, métodos y propiedades, deberíamos seguir las siguientes convenciones:

• Las funciones, métodos, propiedades deberían estar en lowerCamelCase: El grupo de palabras está unido, empieza en minúscula, y la inicial del resto de palabras está en mayúscula.
• Los nombres de clase deben estar en UpperCamelCase: A diferencia del anterior, en este la serie empieza con mayúscula
• Los métodos y propiedades privadas empiezan con barra baja (_). Este rasgo no las convierte en privadas, sino que solo advierte al desarrollador para no usarlo directamente.

L.Clase.include()

L.Clase.initialize()

El método constructor que usualmente tienen los lenguajes POO, en Leaflet se llama initialize.

Si nuestra clase tiene algunas opciones específicas, es una buena idea inicializarlas con L.setOptions() en el constructor.

es común para las clases hijo ejecutar el constructor padre, y después su propio constructor. En Leaflet esto se consigue usando el método L.Class.addInitHook(). Este se puede usar para insertar (hook) funciones de inicialización que se ejecutan justo después de la clase inicialize().

Métodos de la clase padre

Llamar a un método de la clase padre se consigue con el prototipo de la clase padre, y usando Funcion.call().

Factories

Muchas clases Leaflet tienen su correspondiente función factory. En Leaflet, una función factory tiene el mismo nombre que la clase, pero escrita en lowerCamelCase en lugar de UpperCamelCase.

En la programación orientada a objetos, un «factory» es un objeto para crear otros objetos. Se trata de una función o método que devuelve objetos de un prototipo o clase variable.

Métodos de extensión

[leafletjs.com] Para ciertas clases Leaflet tienen los «métodos de extensión», que son puntos de entrada para escribir código para subclases.

Creando una subclase de L.TileLayer y rescribiendo su función getTileUrl() , podemos personalizar su comportamiento.

Añadir funcionalidades varias

Utilizar figuras geométricas como marcadores

Círculo como marcador:

var circulo = L.circle([39, 2], {
  color: "red",
  fillColor: "#f03",
  fillOpacity: 0.5,
  radius: 500
}).addTo(miMapa);

Polígono como marcador:

var poligono = L.polygon([
  [41.509, 2.08],
  [41.503, 2.06],
  [41.51, 2.047]
]).addTo(miMapa);

circle.bindPopup("Soy un círculo.");
polygon.bindPopup("Soy un polígono.");

Obtener las coordenadas de un lugar cualquiera

El siguiente fragmento permite que Leaflet muestre las coordenadas de cualquier ubicación. Es enormemente útil tener el código implementado mientras estamos desarrollando la app, ya que con frecuencia buscaremos coordenadas para definir los marcadores:

function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("Has clickado sobre las coordenadas: " + e.latlng.toString())
.openOn(miMapa);
}
miMapa.on('click', onMapClick);

Esta tarea también podría hacerse con Google Maps. Para ello pulsar con el botón derecho sobre cualquier punto, y seleccionar las coordenadas que aparecen en el menú emergente.

Marcadores personalizados

Esta página del sitio Leaflet explica como usar nuestras propias imágenes como marcadores. No obstante, se expone alguna funcionalidad más no incluida en el tutorial de Leaflet, como es la creación de subclases extendidas de nuestra propia clase. De forma similar a cómo heredamos características de L.icon, creando la clase hijo ‘iconoSilmar’, con ‘L.Icon.extend’, creamos también una subclase de esta subclase. Hacemos esto para dar un tamaño diferente a la nueva clase de iconos ‘iconoPrioridad’, sin tener que volver a definir todo el resto de características, que son iguales. Puede verse el ejemplo completo en el mapa de ejemplo:

/* Se definen los iconos/marcadores personalizados */
var iconoSilmar = L.Icon.extend({
  options: {
  shadowUrl: 'https://dominioejemplo.org/icono-silmar-sombra.png',
  iconSize: [38, 38],
  shadowSize: [70, 45],
  iconAnchor: [0, 20],
  shadowAnchor: [0, 27],
  popupAnchor: [20, -30]
}
});
var iconoPrioridad = iconoSilmar.extend({
options: {
iconSize: [38, 60],
}
});

/* Una vez creada la clase, se crean las instanacias de esa clase */
var iconoAzul = new iconoSilmar({iconUrl: 'https://fundacionraed.org/wp-content/uploads/2021/05/icono-silmar-transparente-azul-mapa.png'}),
iconoRojo = new iconoSilmar({iconUrl: 'https://fundacionraed.org/wp-content/uploads/2021/05/icono-silmar-transparente-rojo-mapa.png'}),
iconoVerde = new iconoSilmar({iconUrl: 'https://fundacionraed.org/wp-content/uploads/2021/05/icono-silmar-transparente-verde-mapa.png'}),
iconoPrioridad = new iconoPrioridad({iconUrl: 'https://fundacionraed.org/wp-content/uploads/2021/07/icono-silmar-transparente-tonos-rojos-icn-estacion-prioritaria-v1-50px.gif'});

Cerrar todos los marcadores

Normalmente Leaflet deja abierto, tras cargar la página, el último marcador definido. Esto muchas veces no es deseable, y da un aspecto raro.

El siguiente método se llama después de definir todos los marcadores, cerrando así cualquier marcador abierto:

miMapa.closePopup();

Utilizar una imagen fija en vez de mapas

[leafletjs.com] Sustituyendo el código que carga los mapas por el siguiente, que utiliza ImageOverlay, obtenemos una imagen de fondo, que podría ser una imagen de un mapa, o cualquier otra cosa.

var imageUrl = 'url-de-la-imagen',
imageBounds = [[44], [36]];
L.imageOverlay(imageUrl, imageBounds).addTo(miMapa);

Utilizar un popup sin marcador

var popupSinMarcador = L.popup()
.setLatLng([42, 2.8])
.setContent("Soy solo un popup.")
.openOn(miMapa);

El mapa de ejemplo

En el siguiente ejemplo, se han añadido funcionalidades adicionales que complementan el mapa. Hay sobre el mapa diferentes estaciones, representadas estas por marcadores personalizados. Al pulsar sobre ciertos enlaces, produce que se abra una barra lateral o sidebar con información adicional sobre cada estación.

Esta aplicación, aparte de HTML y los estilos CSS, está creada usando JavaScript puro (o vanilla JavaScript).

Breve descripción de la aplicación

See the Pen
Mapa interactivo con marcadores, con js Leaflet y Mapbox by Javier Rodríguez (@qe2)
on CodePen.

Modificaciones en la aplicación del mapa

Sidebar cerrado por defecto

En esta alternativa la página carga con el mapa a pantalla completa y el sidebar cerrado, hasta que se presione sobre un icono del mapa.

/* Barra lateral expandible */
.sdb-expandible { width: 0; }  /* Línea 72. Sustituir valor anterior por 0 */

/* Área del mapa */
#principal {margin-left: 40vw;}  /* Línea 115. Eliminar valor. */

Otras referencias de interés

• [mappinggis.com] Subir archivos GIS a un mapa web creado con Leaflet
• [witch2osm.org] Crear nuestro propio servidor de «tiles» OSM para Leaflet