CARTO for deck.gl

CARTO for deck.gl

Using the CartoLayer

Introduction

The CartoLayer is a deck.gl CompositeLayer used to visualize geospatial data from the CARTO platform.

It is compatible with the different versions of the CARTO Maps API (v1, v2, and v3) and is responsible for connecting to the platform in order to retrieve the data for visualization.

Connecting to CARTO 3

  1. Go to the Workspace and create a new connection:

  1. Create a token using our token API with access to the required table.

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    
    curl --location -g --request POST 'https://gcp-us-east1.api.carto.com/v3/tokens?access_token=eyJhb...' \
     --header 'Content-Type: application/json' \
     --data-raw '{
         "grants": [
             {
                 "connection_name": "bqconn",
                 "source": "cartobq.public_account.populated_places"
             }
         ],
          
     }'
    
  2. Set connection parameters

    A function setDefaultCredentials is provided to define the connection parameters to CARTO:

    1
    2
    3
    4
    5
    
    setDefaultCredentials({
      apiBaseUrl: 'https://gcp-us-east1.api.carto.com',
      apiVersion: API_VERSIONS.V3,
      accessToken: 'eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfbHFlM3p3Z3UiLCJqdGkiOiI1YjI0OWE2ZCJ9.Y7zB30NJFzq5fPv8W5nkoH5lPXFWQP0uywDtqUg8y8c'
    });
    

    For more info about the parameters of this function, check the reference.

  3. Create a layer using the previously created connection:

    1
    2
    3
    4
    5
    6
    7
    8
    
    new CartoLayer({
      id: 'places',
      connection: 'bqconn',
      type: MAP_TYPES.TABLE,
      data: 'cartobq.public_account.populated_places',
      pointRadiusMinPixels: 2,
      getFillColor: [200, 0, 80],
    }),
    

    View the complete example here


Support for other deck.gl layers

The CartoLayer uses the GeoJsonLayer for rendering but you can also use any other deck.gl layer for rendering using the getData function from the CARTO module. This works for datasets with less than 200k rows but not for bigger datasets where you need to use a tileset.

This function expects the same connection parameters than the CartoLayer described above:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
import { getData, FORMATS } from '@deck.gl/carto';
import { H3HexagonLayer } from '@deck.gl/geo-layers/';

const data =  await getData({
  type: MAP_TYPES.QUERY,
  source: `SELECT bqcarto.h3.ST_ASH3(internal_point_geom, 4) as h3, count(*) as count
              FROM bigquery-public-data.geo_us_census_places.us_national_places 
            GROUP BY h3`,
  connection: 'connection_name',
  format: FORMATS.JSON
});

new H3HexagonLayer({
  data,
  filled: true,
  getHexagon: d => d.h3,
  getFillColor: d => [0, (1 - d.count / 10) * 255, 0],
  getLineColor: [0, 0, 0, 200],
});