JavaScript es el lenguaje líder de interfaces web para crear mapas web (mapas 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 el funcionamiento en dispositivos móviles, servicios de geocodificación, WebGL, etc.
He aquí las mejores librerías JavaScript para crear mapas web (sin ningún orden en particular y sin pretender que esté completa):
1. OpenLayers
OpenLayers se encuentra actualmente en su versión 10.5 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 (42KB). 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. deck.gl
deck.gl es una biblioteca de visualización de código abierto diseñada para conjuntos de datos geoespaciales a gran escala. Funciona con WebGL2 y WebGPU, lo que permite obtener resultados visuales increíbles con un alto rendimiento. Forma parte del framework vis.gl, integrado en OpenJS Foundation.
CARTO es uno de los principales colaboradores y miembro del comité directivo técnico de deck.gl. CARTO utiliza deck.gl como biblioteca de visualización del lado del cliente. Por lo tanto, usar deck.gl será un requisito si su aplicación necesita visualizar datos geoespaciales provenientes de sus conexiones en CARTO.
5. MapBox GL JS
Construido sobre Leaflet, MapBox GL JS nos permite crear mapas web interactivos. CNN, BMW, Toyota, Strava o AccuWeather 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.
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. y pasó a tener una licencia propietaria.
6. MapLibre GL JS
MapLibre GL es una librería TypeScript de código abierto para publicar mapas en tu sitio web. Excelente rendimiento gracias al renderizado de teselas vectoriales acelerado por GPU.
Se trata de una bifurcación dirigida por la comunidad derivada de mapbox-gl-js antes de su cambio a una licencia privativa.
Esta librería es bastante nueva, ya que data del año 2020. Año en el que Mapbox tomo la decisión de convertir su proyecto en comercial. En aquel momento ya te adelantábamos que se estaban realizando esfuerzos para bifurcarlo y reunir a miembros de la comunidad para mantenerlo indefinidamente.
Por lo tanto, MapLibre GL JS se ha convertido en una bifurcación de código abierto de Mapbox GL JS 1.13. La biblioteca pretende pues, ser un reemplazo directo para la versión de Mapbox, pero añadiendo una serie de nuevas características:
- La más relevante es que gracias a la representación de teselas vectoriales acelerada por GPU, obtenemos una rápida visualización de mapas.
- Estilos de mapas personalizados.
- Compatible con otras herramientas de MapLibre.
7. 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.
8. 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.
9. 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
10. 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.
Otras dos buenas librerías JavaScript para crear mapas web
- 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.
- Gleo. Una biblioteca JS para mapas geográficos impulsados por WebGL. Gleo es una biblioteca para mostrar mapas geográficos, que aprovecha WebGL1 mediante la biblioteca de abstracción Glii. Su objetivo es cubrir los casos de uso de Leaflet, OpenLayers o MapboxGL / MaplibreGL.
- Openglobus. Librería open source para visualización de globos virtuales en 3D directamente en el navegador, similar en espíritu a herramientas como CesiumJS, pero con una arquitectura más ligera y flexible. Está escrita en JavaScript y utiliza WebGL para el renderizado, permitiendo representar la Tierra como un globo interactivo con datos geoespaciales.
Licenciado en Geografía. Máster en Sistemas de Información Geográfica. Consultor GIS desde el año 2004. En MappingGIS desde el año 2012 para ayudarte a impulsar tu perfil GIS y diferenciarte de la competencia. Echa un vistazo a todos nuestros cursos de SIG online.
Hola Foro, yo tengo una gran disyuntiva sobre el uso de la tecnología para crear aplicaciones con mapas.
Por un lado, la tecnologia basada en Geoserver+PostgreSQL+PostGis+Tomcat, por lo que se requiere de tener o contratar un servidor dedicado con un costo elevado.
Por otro lado, la que esta basada solo en HTML5+CSS+JavaScrip, que se puede montar en cualquier tipo de servidor (compartido incluso) a muy bajo costo.
Bajo este contexto mi pregunta es:
¿Cuándo verdaderamente se justifica utiizar la tecnologia del primer caso?; ya que la segunda opción con un buen desarrollo puede crearse un buen visualizador de mapas con las mismas herramientas de visualización (no análisis geoespaciales, ni manipulación de capas).
Hola Gerardo, gracias por tu interesante pregunta. Aunque llevo muchos años metido en este mundo y tenemos los dos cursos desde prácticamente el inicio de MappingGIS, es una pregunta dificil de responder. Pero hay varios puntos clave:
1º Necesidad de disponer de una base de datos: si utilizas muchas capas es necesario, porque una librería no es capaz de renderizar millones de puntos que vienen de un archivo plano. Aqui gana PostGIS.
2º Necesidad de utilizar servicios interoperables (estándares OGC): esto es necesario en una institución pública, pero para un proyecto pequeño no es tan necesario.
3º Seguridad de acceso: con GeoServer es facil crear roles para los distintos tipos de acceso.
Realmente para un proyecto medio o medio pequño, no es necesario meterse en el lio de crear una arquitectura completa (y compleja). Además a dia de hoy no hay muchos servidores que alojen estos programas GIS libres (creo que ACUGIS sigue siendo el único a módico precio).
Un saludo!
Hola Gerardo, me parece que no es necesario justificar el uso de la tecnología, el proyecto mismo es el que marca la pauta, lo que nos comparte Aurelio es una gran acercamiento a las opciones que tenemos para crear nuestro proyecto, y como bien dices en algunos casos con HTML5+CSS+JavaScript es suficiente para lograr excelentes resultados, me parece más bien que el uso de Geoserver+PostgreSQL+PostGis+Tomcat estará sujeto a la cantidad de información que requieres publicar o mostrar en tu web, la mayoría de las librerías presentadas trabajan perfecto con GeoJson, que justo es la ventaja de usar librerías estandarizadas, te garantizan la interoperabilidad; llevo algunos años trabajando con información espacial y estoy convencido de que el uso de PostgreSql-PostGis da un enrome potencial a tu proyecto, en cuanto a los costos elevados, me parece que también eso ya cambió desde hace varios años, puedes implementarlo sin problema en un servidor virtual usando Docker, hoy en día hay proveedores que brindan gran disponibilidad y seguridad a costos demasiado competitivos. Salu2 desde México
Excelente listado, están las más relevantes y mejores. Sobre OpenLayers, decir que tal vez no sea la que visualmente tenga el look&feel más atractivo, pero es de la que incluyes más funcionalidades de serie y además permite agregar nuevas sabiendo un poco javascript. Cesium, está muy bien para globos. Sobre ArcGIS API se consigue un look&feel muy profesional. Muy buen Post!!
Gracias por tu comentario Roberto, coincido contigo sobre OpenLayers, es el más completo sin necesidad de plugins y el más robusto, fruto de los años de desarrollo. Lástima que ArcGIS API sea de pago. Saludos!