Skip to main content

@deck.gl/carto

Deck.gl is the preferred and official solution for creating modern geospatial web applications using CARTO Location Intelligence platform.

With deck.gl and the CARTO platform you can directly access spatial datasets and tilesets that are hosted in your current cloud data warehouse. CARTO provides seamless integrations with Google BigQuery, Amazon Redshift, Snowflake, Databricks and PostgreSQL-compatible databases, eliminating the need to move your data into CARTO.

The platform integrates with the CARTO Maps API to:

  • Provide a geospatial backend storage for your geospatial data.
  • Visualize large datasets overcoming browser memory limitations.
  • Provide an SQL spatial interface to work directly with your data.

Install package​

npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/layers @deck.gl/geo-layers @deck.gl/carto

Usage​

Automatically create layers configured in CARTO Builder​

import {Deck} from '@deck.gl/core';
import {fetchMap} from '@deck.gl/carto';

const cartoMapId = 'ff6ac53f-741a-49fb-b615-d040bc5a96b8';
fetchMap({cartoMapId}).then(map => new Deck(map));

Custom layers connected to CARTO datasource​

import {DeckGL} from '@deck.gl/react';
import {VectorTileLayer} from '@deck.gl/carto';
import {vectorQuerySource} from '@carto/api-client';

function App() {
  const data = vectorQuerySource({
    accessToken: 'XXX',
    connectionName: 'carto_dw',
    sqlQuery: 'SELECT * FROM cartobq.testtables.points_10k',
  });

  const layer = new VectorTileLayer({
    data,
    pointRadiusMinPixels: 2,
    getLineColor: [0, 0, 0, 200],
    getFillColor: [238, 77, 90],
    lineWidthMinPixels: 1
  });

  return <DeckGL layers={[layer]} />;
}

Examples​

You can view a collection of working examples on the CARTO documentation website.

CARTO Layers​

The CARTO module contains a number of custom layers which can be used to visualize the data, which work in conjunction with the data source functions:

CARTO Data sources​

There are a number of data source functions for accessing data from the CARTO platform. These provide a simple way to fetch data from the CARTO platform, which can then be used with deck.gl layers.

Authentication​

When defining a data source it is necessary to provide a:

Support for other deck.gl layers​

The CARTO module includes a collection of layers for easy visualization of data from the CARTO platfrom. For performace and scalability, this data is served as tiles.

It is also straightforward to request data directly using the CARTO SQL API. It can then be integrated with other deck.gl layers, for example:

import {DeckGL} from '@deck.gl/react';
import {GeoJsonLayer} from '@deck.gl/layers';
import {query} from '@deck.gl/carto';

function App() {
  const data = query({
    accessToken: 'XXX',
    connectionName: 'carto_dw',
    sqlQuery: 'SELECT * FROM cartobq.testtables.points_10k',
  });

  const layer = new ScatterplotLayer({
    data,
    dataTransform: data => data.rows,
    getPosition: d => d.geom.coordinates,
    getRadius: d => d.size
  });

  return <DeckGL layers={[layer]} />;
}