10 cosas que quizá no sabías de Leaflet

Leaflet es una librería JavaScript open source ampliamente utilizada para la publicación de mapas en la web.

Su sencillez y ligereza la convierten en la herramienta ideal para aquellos que se quieren iniciar en el apasionante mundo webmapping o para los que necesitan realizar proyectos complejos. Su sencillez no es una limitación para sus capacidades, pues es comparable con cualquiera otro competidor como Openlayers.

Si ya utilizas Leaflet sabrás de sus virtudes, pero quizá no conozcas algunos detalles o trucos que te pueden ayudar a sacar todo el potencial de esta herramienta. En esta entrada vamos a mostrarte diez cosas que quizá no sabías de Leaflet.

1. ¿Quién es el creador y por qué surge Leaflet?

El creador de Leaflet es Vladimir Agafonkin, que comenzó trabajando en el año 2008 en CloudMade con datos abiertos y la librería OpenStreetMap. Vladimir pensó que crear una librería para mostrar mapas no debería ser muy difícil. Hay dos motivos principales que le animaron a crear :

1. El mundo GIS le despistaba e intimidaba, había mucha terminología que no entendía y pensaba que ni siquiera era necesario para mostrar un mapa.
2. OpenLayers (la solución existente) tenía cientos de miles de líneas de complejo código y la documentación era confusa.

Al principio, comenzó a escribir la librería en secreto, puesto que en su entorno (sus jefes y colegas) le decían que era imposible escribir una librería de mapas desde cero, que sería mejor contribuir a un proyecto ya existente.

Así que, en el año 2008, creó la primera versión ¡en tan solo dos semanas! Desde el principio Leaflet ya era una librería que podía interactuar con los mapas más rápidamente que cualquier otra librería. A partir de ese momento sus jefes le apoyaron.

Leaflet realmente surgió como protesta frente al desorden y la complejidad de otras librerías de mapas. Tres años después, en el año 2011, nace la primera versión estable de Leaflet.

Desde el año 2013 Vladimir trabaja como ingeniero en Mapbox (además escribe canciones y toca la guitarra y canta en el grupo Obiymy Doschu).

Leaflet story in 13 minutes:

2. ¿Quién usa Leaflet?

Flickr, foursquare, craigslist, IGN, Wikipedia, The Washington Post, OpenStreetMap, Pinterest, VK.com y muchas más:

3. Es posible incrustar vídeos en nuestros mapas web

Desde la versión 1.1.0 Leaflet dispone de la clase L.videoOverlay. Su manejo es muy similar a L.imageOverlay. En lugar de la URL de la imagen, especificamos una URL de vídeo o una matriz de URLs de vídeo, que nos permita utilizar varios formatos, es decir, indicaremos la ruta a varios archivos de vídeo, cada uno con su formato correspondiente para asegurarnos que los navegadores los interpretarán correctamente. No todos los navegadores admiten todos los formatos. Los formatos de vídeo más utilizados en la web son MP4, WebM y Ogg.

La clave para utilizar L.videoOverlay es conocer las coordenadas de las «esquinas» del vídeo para poder insertarlo geográficamente en nuestro mapa. De forma adicional podemos añadir controles a la reproducción del vídeo. En el siguiente enlace puedes ver un ejemplo de como se inserta un vídeo en leaflet.

4. Para trabajar con proyecciones necesitamos recurrir a un plugin

Leaflet soporta muy pocos sistemas de coordenadas, por defecto utiliza EPSG:3857 (Proyección WGS84 / Pseudo-Mercator) aunque también puede utilizar los EPSG 4236 y 3395. Si queremos utilizar otros sistemas de coordenadas en Leaflet necesitaremos recurrir al plugin Proj4Leaflet.

Este complemento de Leaflet añade soporte para el uso de proyecciones tomando como base Proj4js, que es una biblioteca JavaScript que permite transformar las coordenadas de un punto, de un sistema de coordenadas a otro, incluyendo las transformaciones de datum.

Además Proj4Leaflet también añade soporte para las capas GeoJSON en cualquier proyección, mientras que Leaflet por defecto asume que GeoJSON siempre usa WGS84 como su proyección.

En el siguiente enlace puedes ver un ejemplo de como se trabaja con proyecciones en Leaflet.

5. Podemos crear mapas no geográficos

Se puede utilizar Leaflet para realizar mapas de imágenes en que mantengamos su propiedad métrica, sin emplear necesariamente coordenadas geográficas. La clave para poder crear un mapa no geográfico con Leaflet es utilizar L.CRS.Simple que se utiliza para representar una cuadrícula de píxeles. Más info aquí.

6. Podemos crear mapas animados

Tradicionalmente los mapas eran una representación «estática» de una variable geográfica. Se puede decir que los mapas son una fotografía de un lugar en un momento dado. Pero esta situación ha cambiado radicalmente desde el momento en que podemos construir mapas en la web, lo que nos permite incluir animaciones que nos aporten una componente temporal al mapa. Leaflet dispone de una herramienta con la que podemos trabajar con la dimensión temporal en un mapa. Se trata del plugin Leaflet TimeDimension.

Posiblemente el caso más conocido es el de las aplicaciones a la meteorología en donde vemos el avance de un huracán o de un frente de lluvia mediante las imágenes de radar. Pero pueden aplicarse en muchos otros campos, en este enlace tienes un tutorial que muestra una animación con la velocidad del agua marina en una zona del Mediterráneo occidental.

7. El atributo integrity nos aporta un extra de seguridad

En la última versión de Leaflet se nos recomienda que para evitar posibles problemas de seguridad, habilitemos la integridad de los subrecursos cuando utilicemos Leaflet desde un CDN.

Esto se traduce que ahora escribiremos nuestro código de la siguiente forma:

 <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
   integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
   crossorigin=""></script>

Aquí vemo vemos es una larga cadena de letras y números detrás del atributo integrity.

Subresource Integrity (SRI) es una característica de seguridad que permite a los navegadores verificar que los archivos que buscan (por ejemplo, desde un CDN) se entregan sin manipulación inesperada. Funciona proporcionando un hash criptográfico que tiene que coincidir con el del archivo obtenido.

Un hash es una cadena de texto que acompaña al archivo descargado. Cuando el navegador recibe un archivo calcula su hash y lo compara con el que acompaña al archivo. Si ambos son coincidentes lo acepta, en caso contrario lo rechaza.

Más info aquí.

8. El número de plugins no para de crecer

Los plugins de leaflet permiten incorporar al mapa características tales como superponer un mapa de calor, animar marcadores, cargar archivos de datos csv, dibujar formas complejas, medir la distancia, manipular capas y mostrar coordenadas… La lista es muy larga y hay casi un plugin para lo que necesitemos. Además se están incorporando nuevos plugins permanentemente. El último en aparecer es Leaflet Swoopy que nos permite agregar hermosas flechas swoopy en los mapas de Leaflet.

9. Podemos utilizar Leaflet con Python

Aunque suene extraño, esto es posible utilizando la librería Folium. Mediante Folium podemos manipular los datos en Python y visualizar los resultados en Leaflet. Aquí tienes más información.

10. Recibe 440 millones de peticiones al mes

La librería Leaflet puede utilizarse descargando una copia local de la página oficial de Leaflet o utilizar el CDN usando un enlace a la página de Leaflet; para ello incorporamos en la cabecera de nuestra página web el siguiente código:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />

Como se aprecia en el código anterior, Leaflet se aloja en unpkg.

Desde el 24 de septiembre hasta el 24 de octubre de 2018 ha recibido 441,562,743 peticiones y 7 TB de banda ancha. Es la librería alojada en unpkg que más peticiones recibe.

¿Por qué Leaflet tiene tanto éxito?

La filosofía de Leaflet consiste en tener una librería ligera, sencilla, fácil de manejar y de usar, que desarrolle funciones básicas y que se complemente a través de plugins desarrollados por terceros.

En este modelo reside la potencia y el éxito de Leaflet. Por lo tanto, parece que su evolución seguirá fiel a estos principios.

Cómo contribuir al desarrollo de Leaflet

Hay muchas formas de contribuir al proyecto de Leaflet, y para eso no necesitamos ser un experto en programación. Se puede ayudar enormemente al proyecto mejorando la documentación; ayudando a otros usuarios a resolver problemas en Stack Overflow ,GIS Stack Exchange o GitHub; tuiteando a @LeafletJS; y difundiendo Leaflet entre los colegas y amigos.

 También podemos contribuir al desarrollo de Leaflet descubriendo y reportando los errores que encontremos y contribuyendo al desarrollo del código.

Las últimas noticias y curiosidades sobre Leaflet las puedes seguir en twitter: https://twitter.com/LeafletJS