Visualization with deck.gl

As explained in the Architecture section, CARTO uses deck.gl as the client-side visualization library. Therefore, using deck.gl will be a requirement if your application needs to visualize geospatial data coming from your connections in CARTO.

About deck.gl

deck.gl is an open source visualization library designed for large-scale geospatial datasets. It's powered by WebGL2 and WebGPU, achieving incredible visual results with high performance. It's part of the vis.gl framework, integrated into the OpenJS Foundation.

CARTO is a lead contributor as well as a member of the technical steering committee of deck.gl.

Using CARTO + deck.gl

At a high level, these are the building blocks you will use when building visualizations with CARTO + deck.gl

• The CARTO module (@deck.gl/carto): This is a submodule created and maintained by CARTO that allows you to easily use data from your CARTO-connected data warehouses in deck.gl. Learn more about the CARTO module.

• Core deck.gl functionalities: Layers built using @deck.gl/carto are integrated into a regular deck.gl canvas and inherit properties from other base layers. If you're not familiar with deck.gl we recommend you to check the official deck.gl documentation.

• Other deck.gl functionalities: deck.gl is an amazing framework with endless possibilities such as transitions, extensions and integrations that allow you to build incredible full-blown interactive applications such as our examples, this story map or this application.

Remember that to use the deck.gl layers from @deck.gl/carto, you will need to link them to data sources. Data sources are required to fetch data from your data warehouse (including live SQL queries), solving authentication to your CARTO organization and your data warehouse

The CARTO module (@deck.gl/carto)

Inside the CARTO module (@deck.gl/carto) you will find the following components:

• Tile Layers to build your visualization, using tiles to automatically solve performance and scalability for different types of data, such as:

  • Vector data

  • H3 data

  • Quadbin data

  • Raster data

• Style helpers: Built-in methods to quickly build data-driven visualizations, using a set of curated high-contrast color palettes known as CARTO colors.

• Basemaps: CARTO provides a set of free basemaps using OpenStreetMap data, but you can also use Google Maps, Amazon Location or other custom basemaps. Learn more about adding basemaps.

• Fetch map: A method to quickly re-use layers from your Builder maps in your deck.gl application.

You can find the reference for the CARTO module (@deck.gl/carto) in the deck.gl documentation.

Getting started

To get started, we recommend checking the CARTO + deck.gl examples and the official CARTO `+ deck.gl reference.

Examples

A collection of examples curated by the CARTO team to understand the possibilities of CARTO + deck.gl, ready to reproduce and edit in your browser.

Reference

The official @deck.gl/carto module reference in the deck.gl documentation

What's new

To stay up-to-date with the latest releases of deck.gl and the CARTO module you should check:

• The official what's new page for major deck.gl releases

• The CARTO module release notes

Community

Our community in Slack is a great place to ask questions, share your work with other CARTO users, and get help from CARTO experts. Join here ⬇️

Slack