Las 10 mejores librerías JavaScript para web mapping en 2019

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 un mapa sencillo para una página web, crear aplicaciones basadas en la ubicación o visualizar los tweets en tiempo real, utilizaremos una u otra API. 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 APIs JavaScript para web mapping:

1. OpenLayers

OpenLayers 3 aun está creciendo en su documentación y ejemplos. A diferencia de la anterior versión (la versión 2), OpenLayers 3 se ha construido desde cero y se basa en las últimas tecnologías de navegación como HTML5, WebGL y CSS3. Es la librería de código abierto más completa (lo era en su versión 2) y es una de las favoritas para los programadores GIS.

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 esto modo pretende mantenerse lo más ligera posible (33KB). Se basa en la simplicidad, rendimiento y usabilidad.

Otras tecnologías hacen uso de esta librería en sus desarrollos, como por ejemplo Mapbox o CartoDB.

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

Para extender su funcionalidad podemos hacerlo mediante el uso de plugins.

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 API para webmapping con muchas funcionalidades. Quizá no tan fácil de hacerse con la API como sucede con OpenLayers o Leaflet pero destacar su integración con ArcGIS.com o ArcGIS Server. Además es compatible con jQuery y ExtJS.

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

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 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.

Animaciones CARTO

La proyección de CARTO es tal, que incluso ha aparecido un plugin para permite ver, crear, editar y borrar elementos de las capas que tenemos en nuestra cuenta de CARTO usando QGIS, el plugin se denomina QGISCartoDB.

Además con la depreciación reciente de Google Maps Engine, CARTO se postula como alternativa para reemplazarlo con su producto CartoDB on Google Platform.

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.

La documentación de la API está bien diseñada y es fácil de seguir.

6. D3

D3 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 imgen, sino que D3 utiliza los estándares existentes, como son HTML, CSS y SVG.

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.

7. Google Maps API

Con una trayectoria de más de 10 años, Google ha conseguido democratizar el uso de los mapas digitales, como ningún otro Sistema de Información Geográfica ha conseguido. Por lo que su API también es muy popular y utilizada. Google cuenta demás con una lista muy ampia de aplicaciones para mapas: Google Maps, Google Maps API, Google Maps Enterprise, Google Earth, Google Earth Pro, Google My Maps, Google Maps for Work. Recienteme ha depreciado Google Maps Engine Lite y Google Maps Engine Pro. Y ha liberado de forma gratuita Google Earth Pro.

El API 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.

La API de Google Maps es un servicio gratuito, pero sujeta a unos términos y condiciones.

8. Cesium.js

Cesium es una biblioteca JavaScript para crear globos en 3D y mapas 2D en un navegador web sin necesidad de plugins.

Utiliza WebGL para motrar 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.

ol3-Cesium: La combinación con OpenLayers es perfecta para crear mapas utilizando OpenLayers 3 y visualizándolos en un globo 3D con Cesium. Esta librería es mantenida por OpenLayers.

ol3 cesium

9. Node.js

Node.js es un entorno de programación en la capa del servidor (pero no limitándose a ello) basado en el lenguaje de programación ECMAScript. Fue creado con el enfoque de ser útil en la creación de programas de red altamente escalables, como por ejemplo, servidores web.

Al contrario que la mayoría del código JavaScript, no se ejecuta en un navegador, sino en el servidor.

Node.js + PostGIS además es una solución para crear una arquitectura WEB GIS. Para visualizar los datos (como geoJSON) podemos utilizar Google Maps, OpenLayers o Leaflet.

10. Turf.js

Turf es una librería JavaScript para realizar análisis espacial. 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 API JavaScript para webmapping

Let’s connect!

Date de alta en nuestro newsletter
y recibe este ebook gratuito

Y 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 web mapping en 2019”

  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.