CARTO es una plataforma abierta, potente e intuitiva que permite que cualquier usuario pueda analizar, visualizar y extraer información a partir de la localización de datos.
Dentro de todo el ecosistema de CARTO encontramos CARTO VL, que es una librería JavaScript de código abierto, que interactúa con diferentes APIs de CARTO, para que los desarrolladores puedan crear aplicaciones y visualizaciones personalizadas de Location Intelligence sobre renderizados vectoriales.
Según su cuenta de GitHub, sus principales características son:
- Los mapas se renderizan del lado del cliente en lugar de ser renderizados en el servidor. Como resultado, proporciona tiempos de carga más rápidos y un rendimiento general de la aplicación eliminando posibles problemas del servidor.
- Incorpora agregaciones de puntos inteligentes y simplificaciones de la geometría que hacen más fácil que nunca visualizar e interactuar con conjuntos de datos más grandes. CARTO VL lo hace de forma dinámica y automática, lo que significa que no es necesario volver a ejecutar los costosos pasos de preprocesamiento sobre la geometría.
- Capacidad de modificar las geometrías directamente en el navegador. Esta es una poderosa solución para la visualización animada de puntos, líneas y polígonos.
- Control total sobre todo lo que ocurre en el mapa y puede proporcionar ricas reacciones a las interacciones del usuario.
- Nuevo e intuitivo lenguaje de estilo de mapas diseñado específicamente para la cartografía temática y a múltiples escalas. Con sólo unas pocas líneas, se pueden crear visualizaciones complejas. Las personas que no son expertas en programación pueden crear su primer mapa fácilmente, mientras que los programadores podrán explotar todo el potencial del ecosistema CARTO.
Otro dato a destacar es que CARTO VL se basa en Mapbox GL para renderizar los mapas base. Mapbox GL también se puede utilizar para ampliar funciones en nuestra aplicación creada con CARTO VL. Sin embargo, hay que tener en cuenta que las capas de CARTO VL sólo pueden ser controladas con el API de CARTO VL y que las capas nativas de Mapbox GL sólo pueden ser controladas con el API de Mapbox GL. Por lo tanto, las expresiones de CARTO VL no pueden ser usadas en las capas de Mapbox GL y viceversa.
En nuestro artículo Cómo crear un mapa web con Mapbox GL JS ya vimos como crear un mapa web sencillo con la librería Mapbox GL.
Crear un mapa con CARTO VL
Para poder crear un mapa web con CARTO VL se debe estar familiarizado con HTML, CSS y JavaScript. La forma de crear los mapas es muy parecida a la que se usa en otras librerías, tan conocidas y utilizadas, como Leaflet, OpenLayers o Mapbox GL JS.
Para crear mapas web y aplicaciones se debe disponer de una API Key. Este tipo de clave es necesario para realizar cualquier tipo de interacción con las API de CARTO, como por ejemplo crear y/o desarrollar aplicaciones web o móviles. Para disponer de una API Key hace falta disponer de una cuenta de pago, aunque con la prueba de 12 meses que nos ofrece CARTO disponemos de una API publica que también podemos utilizar. En este enlace disponéis de más información al respecto.
Partiendo de que disponemos de una cuenta de CARTO, el primer paso que debemos realizar para la creación de cualquier mapa web JavaScript es elaborar el marco HTML básico. Esta es la estructura que tendrá nuestro HTML:
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <div id = 'map'> </div> </body> </html>
Cargar las librerías
El siguiente paso es incluir en la cabecera <head> de nuestra página web las librerías CARTO VL y Mapbox GL. También añadiremos un título.
<head>
<title>Mi primer mapa CARTO VL</title>
<!-- Cargamos CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v1.2.4/carto-vl.min.js"></script>
<!-- Cargamos Mapbox GL -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet">
<style> </style>
</head>
Definir cuerpo y contenedor
Dentro de la etiqueta <body> encontramos el marcado para el mapa, que genera un único elemento de documento. También damos al contenedor <div> un atributo id para que podamos hacer referencia a él en nuestro código:
<body>
<div id="map"></div>
</body>
Estilo del mapa (CSS)
Dentro de la etiqueta <style> definimos el estilo que tendrá el contenedor de mapa en CSS.
<style>
#map {
position:absolute;
width:100%;
height: 100%;
}
</style>
Crear el mapa
Debajo del cuerpo <body> agregamos el script para cargar el mapa base Voyager de CARTO centrado sobre España con un nivel de zoom de 5. Para agregar el mapa base de CARTO utilizamos el constructor de mapas Mapbox GL. Concretamente la clase mapboxgl.Map.
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [0, 40],
zoom: 5
})
</script>
Se puede cambiar el mapa base Voyager por el Positron o Darkmatter sólo cambiando la propiedad style por carto.basemaps.positron o carto.basemaps.darkmatter respectivamente.
El código completo de nuestro mapa sería este:
<!DOCTYPE html>
<html>
<head>
<title>Mi primer mapa CARTO VL</title>
<!-- Cargamos CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v1.2.4/carto-vl.min.js"></script>
<!-- Cargamos Mapbox GL -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet">
<style>
#map {
position:absolute;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id = 'map'></div>
</body>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [0, 40],
zoom: 5
})
</script>
</html>
Y así quedaría nuestro mapa insertado en una página web:
En el próximo post veremos cómo añadir a nuestro mapa una capa de datos y aplicarle un estilo.
Let’s connect!
Date de alta en nuestra newsletter y te enviaremos GRATIS el ebook que te ayudará a impulsar tu perfil GIS:
Vitaminas MappingGIS
Tan solo una vez al mes recibirás las últimas novedades del sector GIS y de nuestros cursos
Licenciado en Geografía con un Máster en Técnicas para la Gestión del Medio Ambiente y del Territorio. Especializado en GIS, Web Mapping y análisis y visualización de datos geoespaciales. Sígueme en Twitter.