1/11/24, 1:15 p.m.

Las 10 mejores librerías JavaScript para crear mapas web

MappingGIS · Atención al cliente: (+34) 657 76 76 65 · formacion@[Link]

MappingGIS    Menú

Las 10 mejores librerías JavaScript para

crear mapas web
por Aurelio Morales

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:

Índice [cerrar]

1. OpenLayers
2. Leaflet
3. ArcGIS API
Utilizamos for JavaScript
Cookies propias y de terceros para realizar análisis de navegación de los usuarios y mejorar
4. [Link]
nuestros servicios. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración
5. MapBox GL JS
u obtener más información aquí >> Más información Acepto No acepto
6. HERE Maps API for JavaScript
[Link] 1/19
1/11/24, 1:15 p.m. Las 10 mejores librerías JavaScript para crear mapas web

7. D3
8. Google Maps API
9. Cesium
10. [Link]
Otras 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.

Utilizamos Cookies propias y de terceros para realizar análisis de navegación de los usuarios y mejorar
nuestros servicios. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración

u obtener más información aquí >> Más información Acepto No acepto 

[Link] 2/19
1/11/24, 1:15 p.m. Las 10 mejores librerías JavaScript para crear mapas web

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.

Utilizamos Cookies propias y de terceros para realizar análisis de navegación de los usuarios y mejorar
nuestros servicios. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración

u obtener más información aquí >> Más información Acepto No acepto 

[Link] 3/19
1/11/24, 1:15 p.m. Las 10 mejores librerías JavaScript para crear mapas web

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.
Utilizamos Cookies propias y de terceros para realizar análisis de navegación de los usuarios y mejorar
nuestros servicios. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración
Por contra, Leaflet soporta muy pocos sistemas de coordenadas (EPSG:3857, EPSG;4236 y
u obtener más información aquí >> Más información Acepto No acepto 
EPSG:3395). Si queremos utilizar otros sistemas de coordenadas en Leaflet necesitaremos
[Link] 4/19
1/11/24, 1:15 p.m. Las 10 mejores librerías JavaScript para crear mapas web

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.

Utilizamos Cookies propias y de terceros para realizar análisis de navegación de los usuarios y mejorar
nuestros servicios. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración

u obtener más información aquí >> Más información Acepto No acepto 

[Link] 5/19
1/11/24, 1:15 p.m. Las 10 mejores librerías JavaScript para crear mapas web

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 [Link] o ArcGIS Online. Además es compatible con jQuery
y ExtJS.

4. [Link]

[Link] 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.

Utilizamos Cookies propias y de terceros para realizar análisis de navegación de los usuarios y mejorar
nuestros servicios. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración

u obtener más información aquí >> Más información Acepto No acepto 

[Link] 6/19
1/11/24, 1:15 p.m. Las 10 mejores librerías JavaScript para crear mapas web

5. MapBox GL JS
Construido sobre Leaflet, [Link] es, junto a [Link], 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.
Utilizamos Cookies propias y de terceros para realizar análisis de navegación de los usuarios y mejorar
nuestros servicios. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración
Como en el caso de CARTO contamos con un plan gratuito.
u obtener más información aquí >> Más información Acepto No acepto 

[Link] 7/19
1/11/24, 1:15 p.m. Las 10 mejores librerías 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:

Geocodificación.
Calcular rutas.
Mostrar datos de tráfico en el mapa.
Soporte para archivos kml.
Usar React.
Utilizamos Cookies propias y de terceros para realizar análisis de navegación de los usuarios y mejorar
nuestros servicios. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración

u obtener más información aquí >> Más información Acepto No acepto 

[Link] 8/19
1/11/24, 1:15 p.m. Las 10 mejores librerías JavaScript para crear mapas web

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
Utilizamos cony las
Cookies propias herramientas
de terceros y tecnologías
para realizar análisis deexistentes, como
navegación de CSS y y mejorar
los usuarios
nuestros depuradores.
servicios. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración

u obtener más información aquí >> Más información Acepto No acepto 

[Link] 9/19
1/11/24, 1:15 p.m. Las 10 mejores librerías JavaScript para crear mapas web

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 [Link].

8. Google Maps API

Google ha conseguido democratizar el uso de los mapas digitales como ningún otro Sistema
Utilizamos Cookies propias y de terceros para realizar análisis de navegación de los usuarios y mejorar
de Información Geográfica. Su librería JavaScript para crea mapas web es muy popular y
nuestros servicios. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración
utilizada, pese a que ha pasado ser un servicio de pago por uso.
u obtener más información aquí >> Más información Acepto No acepto 

[Link] 10/19
1/11/24, 1:15 p.m. Las 10 mejores librerías JavaScript para crear mapas web

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.

Utilizamos Cookies propias y de terceros para realizar análisis de navegación de los usuarios y mejorar
nuestros servicios. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración

u obtener más información aquí >> Más información Acepto No acepto 

[Link] 11/19
1/11/24, 1:15 p.m. Las 10 mejores librerías JavaScript para crear mapas web

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. [Link]
[Link] 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.
Utilizamos Cookies propias y de terceros para realizar análisis de navegación de los usuarios y mejorar
nuestros servicios. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración
En esta entrada hablamos en profundidad de Turf.
u obtener más información aquí >> Más información Acepto No acepto 

[Link] 12/19
1/11/24, 1:15 p.m. Las 10 mejores librerías JavaScript para crear mapas web

Otras librerías JavaScript para crear mapas web

Yahoo Maps API
Bing Maps API

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

 Web Mapping
 Carto, d3, HERE, JavaScript, Leaflet, Mapbox, OpenLayers
 Novedades de QGIS 2.8 Wien
 Iniciación a D3: Creando un mapa sencillo

6 comentarios en «Las 10 mejores librerías

JavaScript para crear mapas web»

Eduardo Mazzucchelli
31 marzo,
Utilizamos Cookies 2016
propiasa ylas
de 3:26 ampara realizar análisis de navegación de los usuarios y mejorar
terceros
nuestros servicios. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración

u obtener más información aquí >> Más información Acepto No acepto 

[Link] 13/19
1/11/24, 1:15 p.m. Las 10 mejores librerías JavaScript para crear mapas web

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

Aurelio Morales
31 marzo, 2016 a las 2:54 pm

Hola Eduardo,
ESRI no frece una API para crear mapas web: ArcGIS API for JavaScript. Te dejo el
enlace: [Link]
Un saludo!

Gerardo B.
14 abril, 2015 a las 6:24 am

Utilizamos Cookies propias y de terceros para realizar análisis de navegación de los usuarios y mejorar
Hola Aurelio, antes que nada gracias por compartir tus conocimientos.
nuestros servicios. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración
Te escribo para pedirte consejo, el tema es que tengo que diseñar un sitio muy
parecidou aobtener
esto: más información aquí >> Más información Acepto No acepto 

[Link] 14/19
1/11/24, 1:15 p.m. Las 10 mejores librerías JavaScript para crear mapas web

[Link]
o
[Link]
y
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

Aurelio Morales
14 abril, 2015 a las 10:55 am

Hola Gerardo, Pues una solución, teniendo en cuanta que no es posible utilizar
servidores externos, es utilizar .mbtiles, y pregenerar las teselas raster con
TileMill. te dejo un tutorial: [Link] y
utilizarlo en combinación con Leaflet. Aunque ahora Mapbox le está dando más
importacia a MapBox Studio y las teselas vectoriales… Saludos!

Gerardo B.
14 abril, 2015 a las 2:40 pm
Utilizamos Cookies propias y de terceros para realizar análisis de navegación de los usuarios y mejorar
nuestros servicios. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración

u obtener más información aquí >> Más información Acepto No acepto 

[Link] 15/19
1/11/24, 1:15 p.m. Las 10 mejores librerías JavaScript para crear mapas web

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

Aurelio Morales
14 abril, 2015 a las 7:31 pm

Bueno, se trataría sería de generar un único archivo .mbtiles y llamar a ese

archivo en local desde Leaflet. De esta forma tendrías un visor totalmente
offline. Esto no está explicado en el post pero se podría hacer. Revisa ese
enlace: [Link] Saludos

Los comentarios están cerrados.

Utilizamos Cookies propias y de terceros para realizar análisis de navegación de los usuarios y mejorar
nuestros servicios. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración

u obtener más información aquí >> Más información Acepto No acepto 

[Link] 16/19
1/11/24, 1:15 p.m. Las 10 mejores librerías JavaScript para crear mapas web

Imprescindibles

10 compañías que suministran imágenes de satélite de alta resolución

Diferencias entre QGIS y ArcGIS Pro
Requisitos mínimos de un equipo para trabajar con GIS
Lenguajes de programación para GIS
10 habilidades para usar eficazmente un SIG
Utilizamos Cookies propias y de terceros para realizar análisis de navegación de los usuarios y mejorar
8 buenas
nuestros prácticas
servicios. en nuestros
Si continua proyectos
navegando, GIS que acepta su uso. Puede cambiar la configuración
consideramos
10 pasos para encontrar
u obtener más un empleo aquí
información en el>>sector GIS
Más información Acepto No acepto 

[Link] 17/19
1/11/24, 1:15 p.m. Las 10 mejores librerías JavaScript para crear mapas web

Ideas para regalar a un cartógrafo, gisero o amante de los mapas

Cómo descargar imágenes de Google, Bing, etc
Dónde encontrar respuestas a tus preguntas y dudas de SIG
Requisitos para acceder a un empleo SIG
10 sitios de descarga de datos cartográficos mundiales

Etiquetas

3D (12) ArcGIS (62) ArcGIS Pro (16) ArcPy (16) Carto (19) datos (12) GDAL (9) geoJSON (14) GeoPackage
(14) GeoServer (33) google (10) google earth (10) Google Earth Engine (11) google maps (10) GRASS (9) gvSIG (22)
habilidades GIS (18) Inteligencia Artificial (8) JavaScript (28) Leaflet (66) libros (13) LiDAR (17) mapas
(11) Mapbox (21) metadatos (8) Novedades (18) nube (13) OpenLayers (35) OpenStreetMap (15) OSM (12)

pdf (10) plugins (33) PostGIS (53) PyQGIS (16) Python (54) QField (11) QGIS (234)
QGIS Server (10) R (20) raster (16) Sentinel (11) shapefile (11) SIG (10) wfs (12) WMS (9)

Contacto
Utilizamos Cookies propias y de terceros para realizar análisis de navegación de los usuarios y mejorar
nuestros servicios. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración
📍C/ Almendrera, 16 – Arroyo de la Encomienda, Valladolid (España)
☎️ +34 657u76
obtener más información aquí >> Más información Acepto
76 65 No acepto 

[Link] 18/19
1/11/24, 1:15 p.m. Las 10 mejores librerías JavaScript para crear mapas web

formacion@[Link]

    

Empresa

Quienes somos
Ofertas de empleo
Convenios y partners

Formación

Todos los cursos

Máster SIG
Preguntas frecuentes
Opiniones

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

2012 – 2024 MappingGIS SLU ©

Utilizamos Cookies propias y de terceros para realizar análisis de navegación de los usuarios y mejorar
nuestros servicios. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración

u obtener más información aquí >> Más información Acepto No acepto 

[Link] 19/19