Las 7 librerías JS más populares para trabajar con datos geolocalizados y mapas.

En los últimos años hemos visto como se ha incrementado el uso de librerías y APIs para la visualización de datos geolocalizados y mapas. Decidir cuál utilizar en función de nuestras necesidades puede resultar una tarea complicada. En esta entrada hemos hecho una selección de las 7 principales APIs y librerías JS que lideran el mercado, aunque sin duda existen muchas más.

OpenLayers

Tal y como se indica en su extensa y bien documentada API, OpenLayers es una biblioteca Open Source de alto rendimiento y repleta de funciones para todas sus necesidades cartográficas. Permite mostrar mapas y marcadores cargados de cualquier fuente, con la capacidad de personalizar cada aspecto del mapa: capas, controles, eventos, etc.

OpenLayers es gratuito, de código abierto y publicado bajo la licencia BSD de 2 cláusulas (también conocida como FreeBSD). Está disponible para la mayoría de navegadores web modernos que soporten HTML5 y ECMAScript 5 y facilita la creación de mapas web tanto para versión de escritorio como para versión móvil debido a su integración con CSS3.

Proporciona las siguientes características clave:

• Capas de mosaico: permite añadir mosaicos de distintas fuentes como OSM, Bing, MapBox, Stamen, MapQuest y cualquier otra fuente XYZ. Admite servicios de mapeo OGC y capas sin mosaicos.
• Soporte móvil listo para usar. Crea perfiles personalizados livianos con solo los componentes necesarios.
• Capas vectoriales: renderiza datos vectoriales de GeoJSON, TopoJSON, KML, GML y otros formatos.
• Facilidad para personalizar y ampliar: diseña controles con CSS sencillo. Permite conectarse a diferentes niveles de la API o utilizar bibliotecas de terceros para personalizar y ampliar la funcionalidad.

Como puntos fuertes destacamos su robustez, su amplia implementación y un uso generalizado, y para muchos desarrolladores, la «flexibilidad» es la principal causa para elegir OpenLayers.

Leaflet

Leaflet es otra biblioteca JS Open Source líder en el mercado, diseñada para crear mapas interactivos que funcionan de manera eficiente tanto en las principales plataformas móviles como en las de escritorio.

Permite ampliar funcionalidades con numerosos complementos y tiene una API muy bien documentada. Es de uso gratuito y se distribuye bajo la licencia BSD-2 Clause.

Algunas de sus características principales son:

• Inserción de capas adicionales: de mosaico, WMS, marcadores, ventanas emergentes, capas vectoriales con renderizado inteligente de polilíneas/polígonos con recorte dinámico, superposiciones de imágenes y GeoJSON.
• Funciones de interacción: arrastre panorámico y zoom con animación, navegación usando el teclado, arrastre de los marcadores, eventos click, keypress, etc…
• Compatibilidad con los principales navegadores de escritorio y navegadores como Safari, Android, Chrome, Firefox para móviles.
• Fácil personalización: uso de CSS3 para un cambio de estilo sencillo, marcadores basados ​​en imágenes y HTML, proyecciones de mapas personalizados y potentes funciones de programación orientada a objetos.

Leaflet puede ahorrarte mucho tiempo si no eres un experto en SIG y vas a desarrollar un mapa sencillo en el que los datos más complejos que manejes sean GeoJSON.

Si por el contrario, vas a desarrollar una integración con otras aplicaciones GIS, manejar distintas proyecciones y utilizar diferentes fuentes de datos geográficos, entonces OpenLayers será una mejor elección.

D3.js

D3.js es una librería desarrollada en JS por Mike Bostock, que combina potentes técnicas de visualización e interacción con un enfoque basado en datos para la manipulación de DOM. Nos permite desarrollar gráficos dinámicos de una manera sencilla con apenas unas cuantas líneas de código. 

D3 destaca en el área de despliegue de gráficas en formato SGV (Scalable Vector Graphics). SVG es un formato que utiliza código de etiquetas de forma similar a HTML, por lo que se puede integrar dentro de cualquier documento HTML. 

Del mismo modo, D3 permite trabajar con datos en distintos formatos como: JSON, CSV, GeoJSON, TSV y XML y su sintaxis para el manejo es muy parecida a jQuery.

Como ventajas de esta librería destacamos:

• Librería extremadamente ligera. Se caracteriza por ser una de las más ligeras y completas.
• Libertad de configuración, permite tener control completo sobre el resultado visual final.
• Buena integración y facilidad de depuración.
• Permite animaciones, transiciones y efectos visuales.

Por el contrario, debido a que D3 es una combinación de otras tecnologías, es importante que se conozcan al menos los cimientos de HTML, CSS, DOM, JavaScript y SVG. 

Respecto a su licencia, esta librería está publicada bajo licencia BSD.

D3 dispone de infinidad de ejemplos agrupados por categorías o secciones y un dato a tener en cuenta, es que a partir de la versión 4, D3JS se ha vuelto una biblioteca modular, y cada módulo se encuentra en un repositorio separado, por lo que es importante comprobar que tanto la version con la que estamos trabajando como la del ejemplo sea la misma para que no aparezcan errores.

CesiumJs

CesiumJS es una biblioteca JavaScript de código abierto para crear globos terráqueos, visualizar datos dinámicos y mapas 3D con una gran cantidad de capacidades prometedoras y soporte de datos. 

En lo tecnológico, utiliza WebGL que permite activar gráficos 3D acelerados por hardware sin la necesidad de plugins adicionales.

Al estar construida bajo estándares abiertos, CesiumJS posee y ofrece una robusta interoperabilidad. 

Respecto a la licencia, se encuentra liberada bajo la licencia de Apache 2.0, lo que la hace gratuita para uso comercial y no comercial.

Posee numerosas características o funcionalidades tales como: 

• Utilizar 3D Tiles para transmitir, diseñar e interactuar con datos 3D heterogéneos, incluidos modelos de fotogrametría, edificios 3D, interiores y exteriores CAD y BIM, y nubes de puntos. 
• Dibujar capas de imágenes de varias fuentes, incluidos WMS, TMS, WMTS, Bing Maps, Mapbox, GEE, OpenStreetMap, ArcGIS MapServer, archivos de imágenes estándar y esquemas de ordenamiento en teselas personalizados.
• Dibujar y aplicar estilo a una amplia gama de geometrías: polilíneas, puntos, vallas publicitarias, polígonos, etiquetas …
• Crear efectos visuales que incluyen: sombras según la posición del sol, atmósfera, niebla, iluminación solar y lunar, efectos como el humo, fuego …
• Interacción con formatos vectoriales estándar como KML , GeoJSON y TopoJS

Carto.js

CARTO es una plataforma de software especializado en inteligencia geográfica en la nube que proporciona herramientas de mapeo web con capacidad para el análisis y visualización de datos. Es un software open source construido sobre PostGIS y PostgreSQL, que ofrece dos propuestas principales:

• CARTO Builder: aplicación web enfocado a usuarios no desarrolladores, donde éstos pueden gestionar datos, realizar análisis y diseñar mapas personalizados. 
• CARTO Engine: es un conjunto de API y bibliotecas más orientado a desarrolladores, que facilitan la construcción de interfaces de mapas personalizados.

CARTO se ofrece como un servicio freemium, lo que significa que dispone de servicios básicos gratuitos, pero se cobra por los avanzados o especiales. En el caso concreto de CARTO, podrás disponer de una cuenta “Free” por un período de 12 meses, una vez pasado ese tiempo si no se contrata una suscripción, tu cuenta y todos tus datos como datasets y mapas desaparecerán. 

Centrándonos en CARTO.js, es una librería de JavaScript que interactúa con diferentes API de CARTO y forma parte del ecosistema CARTO Engine.

Permite integrar mapas interactivos y datos de ubicación en sus aplicaciones y sitios web. Y gracias a la cantidad de ejemplos de que dispone la librería, se pueden desplegar una gran variedad de herramientas.

ArcGIS API for JavaScript

ESRI, líder mundial del mercado en SIG desde hace décadas, nos proporciona la API para webmapping ArcGIS API for JavaScript con poderosas herramientas de desarrollo para explorar datos y crear visualizaciones impresionantes en 2D y 3D. 

La API de ArcGIS para JavaScript está muy bien documentada y posee numerosos ejemplos y tutoriales con los que iniciarse en su manejo.

Destacamos algunas de las novedades o mejoras que podemos encontrar en la última versión de la API, la 4.19, lanzada el pasado mes de abril:

• ES modules: estos módulos ES son una nueva opción para consumir la API, permitiendo un código simplificado y una integración más sencilla con frameworks y herramientas de compilación modernos.
• Actualizaciones 3D: 
  • Resaltado de la sombra: permite identificar la sombra de objetos 3D individuales y configurar la fuerza y opacidad del resaltado para permitir diferenciar las sombras que se superponen.
  • Transformaciones de líneas y polígonos: escala y gira de forma interactiva geometrías de líneas y polígonos.
  • Calidad de renderización mejorada: el nuevo modelo de iluminación y sombreado agrega más contraste y definición al contenido 3D, y objetos con materiales de representación basada en la física (PBR) muestran reflejos de luz sobre superficies metálicas o de vidrio.
  • Lupa: que muestra una parte de la vista como una imagen ampliada.
• Conciencia del suelo: ahora se puede especificar la propiedad floorInfo y el widget FloorFilter para filtrar características de las capas de piso
• Actualizaciones de widgets como el widget Directions que permite calcular la duración estimada del viaje, o los métodos when(), isResolved(), isFulfilled(), y isRejected() ahora admitidos para devolver una promesa cuando se crea el widget o verificar si se creó correctamente. 
• Actualizaciones de capa como GroupLayer que ahora admite las propiedades minScale y maxScale para el grupo.

Otras características a destacar son algunas de las que se introdujeron en la versión 4.18, que según el equipo de desarrollo de ArcGIS, cambian las reglas del juego en las aplicaciones 2D y 3D. Entre ellas encontramos:

• Consultar entidades agrupadas
• Efectos de capa
• Widget de perfil de elevación (beta)
• Edición de 3D web
• Navegación consciente del contexto
• Transparencia independiente del orden
• Soporte para Marte y la Luna
• Generador de Símbolos Vectoriales
• Fin de la compatibilidad con IE11 / Edge Legacy

Por último, indicar que la plataforma ArcGIS permite a los usuarios crear sus propios productos o integrar los servicios de Esri en un producto software existente. Uno de los puntos importantes de la Plataforma como Servicio (PasS) ArcGIS Platform, es el modelo de negocio totalmente transparente y fácil de entender, que mantiene el modelo de pago por uso. 

Para acceder tan sólo habría que crear una cuenta gratuita en la página de desarrolladores, a través de la cual tendríamos acceso a servicios como: 

• 2.000.000 de map tiles/mes
• Unas 20.000 geodecodificaciones/mes
• Rutas
• Varios Gigas de almacenamiento de datos.

Mapbox GL JS

Mapbox GL JS es una librería JS que utiliza tecnología WebGL (Web Graphics Library) para representar mapas interactivos a partir de mosaicos vectoriales y estilos Mapbox y que forma parte del ecosistema Mapbox GL. Incluye Mapbox Mobile, un renderizador compatible escrito en C ++ con enlaces para plataformas de escritorio y móviles. 

En diciembre de 2020, Mapbox anunció una nueva versión de la librería la Mapbox GL JS v2, con una licencia propietaria y no gratuita. La anterior versión Mapbox GL JS v1 todavía está disponible bajo la licencia BSD3, libre y abierta. 

La versión Mapbox GL JS v1 fue bifurcada casi 1000 veces por múltiples desarrolladores independientes, aunque la bifurcación llamada MapLibre GL, se convirtió en una continuación oficial de código abierto de Mapbox GL JS v1.

Si estás buscando una alternativa más asequible y permisiva a Google Maps Platform y dispones de un presupuesto suficiente, Mapbox GL JS v2 puede ser una buena opción.  

Cabe destacar que en su última versión lanzada, se han añadido nuevas funciones 3D y varias mejoras de rendimiento. Permite agregar niebla que brinda a los mapas una mejor sensación de profundidad atenuando los objetos con la distancia y mejorando la optimización de los mapas, ya que es una forma elegante de reducir la cantidad de mosaicos cargados a la distancia. Además, los desarrolladores pueden consultar datos de elevación para generar perfiles de elevación del terreno. 

Si por el contrario usas la versión Mapbox GL JS v1 y planeas migrarla, MapLibre GL es una de las alternativas más interesantes, ya que es compatible con la Mapbox GL JS original y solo se necesitarían cambios mínimos.

Por último si vas a realizar proyectos nuevos y mapas 2D, Leaflet u OpenLayers pueden ser alternativas muy viables y si necesitas visualizar datos dinámicos y mapas 3D podrías optar por Cesium JS.