Las 10 mejores librerías JavaScript para crear mapas web

Artículo actualizado el 15 de junio de 2022

JavaScript es el lenguaje líder de interfaces web para crear aplicaciones que se ejecutan en el navegador. Utilizado tanto por Google Maps como por los principales clientes de mapas web open source (OpenLayers o Leaflet).

Podríamos decir que la relación entre JavaScript y el web mapping es análogo a la relación existente entre Python y los SIG de escritorio.

Si estás buscando una visión general acerca de los lenguajes de programación utilizados en SIG, echa un vistazo a este post.

Dependiendo de si queremos utilizar JavaScript para crear mapas web sencillos, crear aplicaciones basadas en la ubicación o visualizar los tweets en tiempo real, utilizaremos una u otra librería. Aunque hoy en día todas las librerías JavaScript tienen características comunes como con el funcionamiento en dispositivos móviles, servicios de geocodificación, etc.

He aquí las mejores librerías JavaScript para crear mapas web:

1. OpenLayers

OpenLayers se encuentra actualmente por su versión 6 y es la librería open source más longeva (data del año 2005). Se basa en las últimas tecnologías de navegación como HTML5, WebGL y CSS3. Es una de las librerías de código abierto más completa y es una de las favoritas para los programadores GIS.

Destaca principalmente en:

• Amplia variedad de fuentes de datos geográficas. OpenLayers soporta todos los protocolos WebGIS de forma nativa sin plugins, como WMTS, WFS o GML. Incluso el nuevo formato de teselas vectoriales de Mapbox MVT.
• Uso de distintas proyecciones gracias a la implementación nativa de la librería Proj4.
• Decenas de ejemplos para aprender a partir del código, con workshop incluido.

La API de OpenLayers nos proporciona una de las maneras más fáciles de crear un mapa web, y una vez con esta base incorporar capas base de OSM, Bing, etc, crear un heatmap o incorporar otras librerías para incorporar otras clases.

2. Leaflet

Leaflet es también una librería JavaScript open source que se centra en un conjunto básico de características, de este modo pretende mantenerse lo más ligera posible (33KB). Se basa en la simplicidad, rendimiento y usabilidad.

Algunas de las ventajas de Leaflet son:

• Es una librería fácil de aprender para los usuarios no programadores.
• La documentación de la API de Leaflet es más sencilla de entender para usuarios nóveles que la de OpenLayers.
• Podemos extender su funcionalidad mediante el uso de plugins.
• Mejor soporte para móviles.

Por contra, Leaflet soporta muy pocos sistemas de coordenadas (EPSG:3857, EPSG;4236 y EPSG:3395). Si queremos utilizar otros sistemas de coordenadas en Leaflet necesitaremos recurrir al plugin Proj4Leaflet.

Si aun no sabes cómo crear un mapa web con Leaflet te recomendamos este pequeño tutorial: cómo crear una sencillo mapa con Leaflet.

3. ArcGIS API for JavaScript

Considerado como el pionero en los SIG, ESRI ha creado una librería JavaScript para crear mapas web, tanto en 2D como en 3D, con muchas funcionalidades.

La API JavaScript de ArcGIS está alojada por Esri y está disponible para uso gratuito aunque sujeto a determinados términos de uso.

La API 4.x admite la capacidad de agregar, actualizar y eliminar datos de objetos geográficos en 2D y 3D.

Quizá no tan fácil de hacerse con la API como sucede con OpenLayers o Leaflet, pero destaca su integración con ArcGIS.com o ArcGIS Online. Además es compatible con jQuery y ExtJS.

4. CARTO.js

CARTO.js es una librería que interactúa con diferentes APIs de CARTO y es parte del ecosistema de CARTO.

Gracias al poder de PostgreSQL y PostGIS, CARTO nos permite ejecutar consultas espaciales sobre nuestros datos a través de la API de SQL. Esto significa poder realizar operaciones espaciales, como la creación de geometrías y conversiones, reproyecciones, creación de buffers,  generalizaciones, uniones, y mucho más.

Echa un vistazo a  la web de los desarrolladores para aprender más acerca de cómo utilizar CARTO en tus aplicaciones.

Con CARTO podemos crear mapas online sin necesidad de escribir código y utilizar cartoCSS para modificar el estilo de nuestros datos de un modo profesional.

CARTO ofrece varios planes que van desde un plan básico, gratuito durante 1 año, a un plan de empresa repleto de características.

Como veíamos en las 10 tendencias de futuro en SIG, una de las características más populares de la plataforma CARTO es la posibilidad de crear animaciones que muestran los cambios en los datos de localización a través del tiempo.

5. MapBox GL JS

Construido sobre Leaflet, MapBox.js es, junto a CARTO.js, la otra librería de moda, que nos permite crear mapas web interactivos. FourSquare, GitHub, Evernote o Pinterest son algunas de las empresas que utilizan las herramientas de MapBox para crear sus mapas.

MapBox incluye magníficos esquemas de colores, capas de terreno, marcadores, fuentes TrueType, etc. Destaca lo fácil que es la personalización de las capas base.

MapBox cuenta con MapBox Studio para diseñar los mapas online basado en teselas vectoriales.

Los diseños y estilos personalizados que se crean en Mapbox pueden ser utilizados como mapas de base en aplicaciones móviles, páginas web u otras aplicaciones de mapas. Por ejemplo, en CARTO, QGIS, ArcGIS, etc.

Mapbox se define a si misma como una “plataforma de mapas para desarrolladores” con una gran cantidad de APIs y SDKs.

Como en el caso de CARTO contamos con un plan gratuito.

Mapbox GL JS v2 permite el mapeo 3D con elevación del terreno, cielos personalizables, una nueva cámara y mejoras de rendimiento.

En diciembre de 2020 MapBOX GL JS dejó de ser un proyecto libre,

MapLibre GL

MapLibre GL es una bifurcación dirigida por la comunidad derivada de mapbox-gl-js antes de su cambio a una licencia privativa.

6. HERE Maps API for JavaScript

Here nos ofrece una librería JavaScript para crear aplicaciones web con mapas HERE, ricos en funcionalidad y personalizables, a través de una librería JS con métodos y clases fáciles de implementar.

Esta librería nos ofrece la posibilidad de realizar mapas web, destacando:

• Geocodificación.
• Calcular rutas.
• Mostrar datos de tráfico en el mapa.
• Soporte para archivos kml.
• Usar React.

Here ofrece un modelo freemium, gratuito si se usa poco: menos de 250K transacciones / mes y a partir de ahí $1 por cada 1000 transacciones.

La documentación es variada con varios ejemplos de código que nos sirven para aprender.

7. D3

D3JS es una librería JavaScript creada por Mike Bostock que sirve para visualizar datos con los estándares Web. ¿Qué significa esto? Significa que visualizamos los datos sin introducir una nueva forma de representar una imagen, sino que D3 utiliza los estándares existentes, como son HTML, CSS y SVG. En esta entrada te enseñamos a crear un mapa sencillo con D3.

Este enfoque ofrece varios beneficios:

• Mayor expresividad y modernas visualizaciones.
• Compatibilidad con las herramientas y tecnologías existentes, como CSS y depuradores.
• Los mapas resultado se representan como svg (o canvas), por lo que no es necesario un framework adicional, como puede ser OpenLayers o Leaflet.

En combinación con el formato TopoJSON (una extensión de GeoJSON que incluye topología, además un 80% más ligero que éste), nos permite crear fantásticas visualizaciones con nuestros datos espaciales.

Aquí tienes decenas de ejemplos de las fantásticas visualizaciones conseguidas: galeria y mbostock’s bl.ocks.

8. Google Maps API

Google ha conseguido democratizar el uso de los mapas digitales como ningún otro Sistema de Información Geográfica. Su librería JavaScript para crea mapas web es muy popular y utilizada, pese a que ha pasado ser un servicio de pago por uso.

Google cuenta además con una lista muy amplia de aplicaciones para mapas: Google Maps, Google Maps API, Google Maps Enterprise, Google Earth, Google Earth Pro, Google My Maps, Google Maps for Work.

La librería JavaScript de Google Maps permite insertar Google Maps en nuestras páginas web, crear aplicaciones de alto rendimiento basadas en ubicación o crear imágenes en 3D con el API de Google Earth.

Google ofrece una documentación muy detallada de su API, así como ejemplos de código, bibliotecas, SDKs y otras herramientas de cartografía digital.

Si quieres empezar a trabajar con Google Maps, en esta entrada de dejamos los primeros pasos con la API JavaScript de Google Maps

9. Cesium

Cesium es una librería JavaScript para crear mapas web 2D y globos en 3D en un navegador web, sin necesidad de plugins. El resultado son mapas 3D con el mejor rendimiento, precisión, calidad visual y facilidad de uso posibles.

Utiliza WebGL para mostrar gráficos en 3D y es multiplataforma. Cesium es de código abierto bajo la licencia Apache 2.0. Es gratuito tanto para uso comercial como no comercial.

Construido con formatos abiertos, CesiumJS se ha diseñado para la interoperabilidad. Podemos incorporar los datos Cesium ion o de otras fuentes, visualizarlas con CesiumJS y compartir con los usuarios tanto en equipos de escritorio como en dispositivos móviles.

Con más de un millón de descargas, CesiumJS se ha convertido en un referente para crear aplicaciones web en 3D.

En esta entrada explicamos en más detalle qué es Cesium, ya que es una librería en plena expansión.

10. Turf.js

Turf.js es una librería JavaScript para realizar análisis espacial en la web. Incluye operaciones espaciales tradicionales, funciones de ayuda para crear datos en formato GeoJSON y herramientas para clasificar datos y para crear estadísticas.

En esta entrada hablamos en profundidad de Turf.

Otras librerías JavaScript para crear mapas web

• Yahoo Maps API
• Bing Maps API