• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar al pie de página
logo web Geoinnova

Geoinnova

Consultoría y Formación en SIG y Medio Ambiente

  • Geoinnova
    • Equipo
    • Coworking
    • Asociación
    • Visor de proyectos Geoinnova
    • Alianzas Estratégicas
  • Consultoría y Desarrollo SIG
    • Productos
      • Planero Web
      • QElectricGIS
      • Plugins
  • Consultoría Territorial
    • Turismo sostenible
    • Planes Urbanos de Actuación Municipal – PUAM
    • Geomarketing
  • Consultoría Ambiental
    • Estudios ambientales para proyectos de energías renovables
    • Estudios de Impacto e Integración Paisajística
    • Evaluación Ambiental Estratégica de planes y programas
    • Estudio de Impacto Ambiental para proyectos
    • Cálculo huella de carbono
    • Educación Ambiental
  • Formación
    • Todos los cursos
    • Máster y Diplomas
    • Cursos de ArcGIS
    • Cursos de QGIS
    • Cursos de Teledetección
    • Cursos de Medioambiente
  • Contenidos
    • Blog
    • Tertulia Territorio Geoinnova
    • Noticias
    • Webinars
    • Geolibrería
    • Plugins
  • Contacto
    • Soporte de Clientes – Tickets
Programación y Desarrollo SIG

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

17/06/2021 Deja un comentario

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.

Contenidos ocultar
OpenLayers
Leaflet
D3.js
CesiumJs
Carto.js
ArcGIS API for JavaScript
Mapbox GL JS

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.

Apúntate a nuestra newsletter semanal

"*" señala los campos obligatorios

Consentimiento*
Este campo es un campo de validación y debe quedar sin cambios.

Información legal

Cumplimos el RGPD (Reglamenteo General de Protección de Datos) y esta en la primera información que debes saber. Responsable: Asociación Geoinnova. Finalidad: Apuntarte en nuestra base de datos para poder enviarte nuestra newsletter y cualquier otra información de interes. Legitimidad: Nos das tu consentimiento para comunicarnos contigo. Derechos: Tienes derecho a acceder, rectificar, limitar y suprimir tus datos. Para una información más ampliada entra a nuestra política de privacidad.

Artículos relacionados

Cómo convertir una web en PWA, para su instalación y uso offline
Cómo convertir una web en PWA, para su instalación y uso offline
17/04/2023
Terre3 - Caminado a un lugar entre el GIS y el BIM
Terre3 – Caminando a un lugar entre el GIS y el BIM
28/03/2023
OSGeo4W Shell en Windows Terminal
Integrar la consola de OSGeo4W Shell en Windows Terminal para simplificar tu flujo de trabajo
20/03/2023

Eva Rabasco

Full Stack Developer. Comprometida con el diseño y desarrollo de materiales innovadores basados en la Web. Amplia experiencia en tecnologías específicas del lado cliente y del servidor. Actualmente forma parte del equipo de Programación y Desarrollo SIG de la Asociación Geoinnova. Además desarrolla su labor como docente en algunos de los cursos de bases de datos y de programación SIG del catálogo de cursos de Geoinnova.

Interacciones con los lectores

¿Quieres comentarnos algo? Adelante! Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Footer

Menú Legal

  • Aviso Legal
  • Política de privacidad
  • Política de cookies
  • Términos y condiciones

Otras páginas de interes

  • Promociones y descuentos en formación
  • Formación bonificada FUNDAE

Contacto

Calle Luis Morondo Urra nº 8 Bajo A
31006 Pamplona (Navarra)
info@geoinnova.org
+34 948 117 137

Horario de atención

Lunes a Viernes - 09:00 a 14:00 y de 16:00 a 19:00.
Fines de semana y Festivos - Exclusivamente por mail.
Horario de Verano (01 de julio al 30 de agosto): De lunes a viernes de 8 a 15h.

Síguenos en Redes Sociales

Apúntate a nuestra newsletter

"*" señala los campos obligatorios

Consentimiento*
Este campo es un campo de validación y debe quedar sin cambios.

Entidad adherida a Confianza Online Certificado de inscripción en el Registro de huella de carbono, compensación y proyectos de absorción Logo Plazox

© 2023 · Desarrollada por Geoinnova en colaboración con OikosMSP

Gestionar el Consentimiento de las Cookies
Utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. Lo hacemos para mejorar la experiencia de navegación y para mostrar anuncios personalizados. El consentimiento a estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.
Funcional Siempre activo
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.
Preferencias
El almacenamiento o acceso técnico es necesario para la finalidad legítima de almacenar preferencias no solicitadas por el abonado o usuario.
Estadísticas
El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos. El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos anónimos. Sin una requerimiento, el cumplimiento voluntario por parte de su proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarlo.
Marketing
El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en un sitio web o en varios sitios web con fines de marketing similares.
Administrar opciones Gestionar los servicios Gestionar proveedores Leer más sobre estos propósitos
Preferencias
{title} {title} {title}