Las 10 mejores librerías JavaScript para crear mapas web

Artículo actualizado el 23 de junio de 2021

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.

Si quieres aprender a crear aplicaciones web con Leaflet apúntate ya a nuestro curso online visores webmapping 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: librería JavaScript para crear mapas web

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:

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.

D3 librería JavaScript para crear mapas web

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.

mapas web en 3D

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.

turf

Otras librerías JavaScript para crear mapas web

Let’s connect!

Date de alta en nuestra newsletter y te enviaremos nuestra propuesta con las mejores
Soluciones GIS basadas en software libre

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

6 comentarios en «Las 10 mejores librerías JavaScript para crear mapas web»

  1. consulta.

    Inicio de la conversación
    22:23
    buenas noches,

    Estoy comenzando con un proyecto personal, y me gustaria saber si esri tiene un servicio gratuito para consumir desde java script, mapas. Ubicar posiciones, marcar circulos, poligonos y rectangulos, en donde lo que este dentro, me devuelva sus coordenadas ??

    Ustedes podrias contarme si esto es posible con ERI ??

    Saludos
    Eduardo

  2. Hola Aurelio, antes que nada gracias por compartir tus conocimientos.
    Te escribo para pedirte consejo, el tema es que tengo que diseñar un sitio muy parecido a esto:
    http://earthquake.usgs.gov/earthquakes/map/
    o
    http://earthquake.usgs.gov/earthquakes/eventpage/ci37362808#general_summary
    En el que, como podrás ver, debo implementar un mapa interactivo con determinados datos de interés, en el que pueda agregarle capas para visualizar marcadores, gráficos de polígonos y límites.
    Uno de los requerimientos que tengo de antemano, es que, de ser posible, el mapa lo debo tener instalado en mi servidor (Ubuntu Server – LAMPP), es decir, no depender de servidores de terceros como google maps o open street maps.

    Estuve probando Open Layers, pero aunque me baje la librería y la instale en mi servidor, igual grafica el mapa con datos de OSM.

    Mi pregunta es, si me podes recomendar alguna solución a lo planteado.

    Muchas gracias, y saludos!

    Gerardo

      • Gracias por la rápida respuesta,
        Entonces claro, yo diseñaría el .mbtiles con esa herramienta, pero según leí en el tutorial, para insertarlo en mi web debo subirlo a mapbox, es decir, seguiría dependiendo de un servidor externo. O entendí mal?

        Mi inquietud va por el lado de que si existe alguna forma de crear un visor webmapping propio para mostrar el mbtiles diseñado. Saludos

Los comentarios están cerrados.