Acceder y mostrar capas de CARTO en OpenLayers

CARTO (anteriormente conocido como cartoDB) es una herramienta para publicar mapas online, que permite importar capas, darle estilo, realizar análisis espacial  publicar los mapas online.

Allá por octubre de 2012 publicábamos nuestro primer artículo sobre cartoDB, y desde entonces se ha convertido en una de las empresas más punteras en el panorama actual de SIG. Lo que no pasa desapercibido para nadie: Carto es utilizada por Google, Twitter, AXA, BBVA e ING DIRECT.

Gracias a la API de mapas de CARTO podemos generar mapas basados en los datos almacenados en nuestra cuenta de CARTO, aplicar consultas SQL y personalizar el estilo a nuestros datos mediante CartoCSS.

La API genera url basadas en XYZ para recuperar teselas en la proyección Mercator usando los clientes web Leaflet, Google Maps o OpenLayers.

De este modo es posible crear Mapas anónimos o Mapas con nombre con la API de mapas de CARTO.

• Los mapas anónimos nos permiten crear instancias de un mapa utilizando SQL y CartoCSS. También es posible añadir capacidades de interacción utilizando UTFGrid.
• Los mapas con nombre son esencialmente los mismos que los mapas anónimos, excepto que la configuración del mapa MapConfig se almacena en el servidor, y al mapa se le da un nombre único. Podemos crear mapas con nombre de datos privados, y los usuarios sin una clave API pueden ver el mapa con nombre (manteniendo nuestros datos como privados). El flujo de trabajo Mapa nombre consiste en subir un archivo MapConfig a los servidores de Carto, seleccionar los datos de nuestra base de datos de CARTO y utilizar SQL y CartoCSS en el mapa.

Vamos a enseñarte cómo conectar a los datos guardados en nuestra cuenta de CARTO desde OpenLayers, utilizando la opción mapas anónimos, que es la más sencilla.

La comunidad que desarrolla OpenLayers ha creado una fuente de datos (ol.source.cartoDB) para acceder a las capas teseladas de CARTO. Esta fuente de datos está disponible desde la versión de OpenLayers 3.15.0. Aunque debido al cambio de branding de CARTO (anteriormente denominado CartoDB) ha sido en la versión de OpenLayers 4.4.1 el momento en el que todo ha vuelto a funcionar bien.

En primer lugar debemos definir el archivo de configuración dentro de nuestro script:

var mapConfig = {
    'layers': [{
       'type': 'cartodb',
       'options': {
            'cartocss_version': '2.1.1',
            'cartocss': '#cities { marker-fill: #FF5C00;}',
            'sql': 'select * from cities'
        }
    }]
;

El fichero de configuración requiere varios parámetros, algunos obligatorios y otros opcionales. Vamos a centrarnos en los parámetros que son obligatorios, de lo contrario podríamos extendernos muchísimo. Todos los parámetros de mapconfig se explican en la documentación de Carto.

Básicamente necesitamos especificar las capas (layers) y dentro de las capas especificar:

• type: Un valor de texto que define el tipo de capa. Se pueden definir los siguientes valores: mapnik, cartodb, torque, http, plain, named.
• options: Un valor de objeto que establece diferentes opciones para cada tipo de capa: sql, cartocss y cartocss_version.

Una vez definido nuestro archivo de configuración creamos un objeto denominado carto, que será una capa teselada.

var carto = new ol.layer.Tile({
   source: new ol.source.CartoDB({
      account: 'mappinggis',
      config: mapConfig
   })
});

En las propiedades de la clase ol.layer.Tile añadimos la fuente (source). En este caso la fuente será ol.source.cartoDB con las propiedades account y config.

• En account incluimos el nombre de nuestra cuenta.
• En config añadimos la referencia al fichero de configuración que hemos creado anteriormente.

Con esto ya podemos visualizar las capas de CARTO en un visor web OpenLayers.

Agregar simbología a nuestro mapa es sencillo utilizando cartoCSS, si nos fijamos en el apartado cartoCSS de la interfaz web, podemos utilizar ese código y trasladarlo a nuestro visor.

y lo agregamos al código:

'cartocss': '#cities{  marker-fill-opacity: 0.9;'+
	'marker-line-color: #FFF;'+
	'marker-line-width: 1.5;'+
	'marker-line-opacity: 1;'+
	'marker-placement: point;'+
	'marker-type: ellipse;'+
	'marker-width: 10;'+
	'marker-fill: #229A00;'+
	'marker-allow-overlap: true;}',

Aquí vemos el mapa web que hemos creado con la librería de OpenLayers al que hemos añadido como capas una capa base de Stamen y la capa de ciudades que tenemos almacenada en nuestra cuenta de CARTO:

Código completo:

<!DOCTYPE html> 
<html>
<meta http-equiv="Content-Type" content="text/html; charset="LATIN1">
<head>
	<title>Capas en ol3</title>
	<script src="https://openlayers.org/en/v4.4.1/build/ol.js" type="text/javascript"></script>
	<link rel="stylesheet" href="https://openlayers.org/en/v4.4.1/css/ol.css" type="text/css">
	<style>
       #map{
		position: absolute;
		width: 100%;
		height: 75%;
		box-shadow: 5px 5px 5px #888;
      }
	
    </style>
    </head>
  <body>
      <h1> Datos de Carto en OpenLayers 3 </h1>
	  <div id="map"></div>
      <script>	
	var layerStamenWater = new ol.layer.Tile({
		source: new ol.source.Stamen({
			layer: 'watercolor'
		})
	});
		
	var mapConfig = {
        'layers': [{
          'type': 'cartodb',
          'options': {
            'cartocss_version': '2.1.1',
            'cartocss': '#cities{  marker-fill-opacity: 0.9;'+
			'marker-line-color: #FFF;'+
			'marker-line-width: 1.5;'+
			'marker-line-opacity: 1;'+
			'marker-placement: point;'+
			'marker-type: ellipse;'+
			'marker-width: 10;'+
			'marker-fill: #229A00;'+
			'marker-allow-overlap: true}',
            'sql': 'select * from cities'
          }
        }]
      };

	var carto = new ol.layer.Tile({
		source: new ol.source.CartoDB({
			account: 'mappinggis',
			config: mapConfig
      })
    });

	var map = new ol.Map({
		layers: [layerStamenWater, carto],
		target: 'map',
		view: new ol.View({
			center: ol.proj.transform([-4.72, 41.66], 'EPSG:4326', 'EPSG:3857'),
			zoom: 2
		})
	});
	</script>
 </body>
</html>