CARTO for deck.gl
deck.gl is one of the most popular Open Source map visualization libraries and is the preferred library to use with CARTO. With deck.gl and CARTO you can create highly scalable applications that visualize location data in many different ways. We have created a submodule
@deck.gl/cartothat you can use to work with CARTO datasets and tilesets in a very easy and straightforward way.
The CartoLayer is the deck.gl layer that provides the integration with the CARTO platform. This layer can be used from different frameworks like React, Angular, or Vue.js. It works with both CARTO 2 and CARTO 3.
About Carto Platform Versions
In this documentation we use the term “CARTO 3” to refer to the latest version of the CARTO platform launched on October 2021, and “CARTO 2” to refer to the previous version. We provide examples for both versions and we add notes when there are differences in the way you need to work with each of them. Note that each platform version has its own set of account credentials.
It is important that you begin by learning the core deck.gl concepts. Please check the official deck.gl documentation site.
Are you a React user?
If you are a React user and want to build a web application using CARTO, we recommend you to check CARTO for React.
Starting with version 8.3, deck.gl includes a submodule
@deck.gl/cartofor integration with the CARTO platform. This module provides all that you need to:
- Access data from the CARTO platform. Using the setDefaultCredentials function you supply the parameters needed to connect with the CARTO platform, then you use the CartoLayer to visualize the datasets.
- Use CARTO basemaps. With deck.gl you can choose between different basemaps for your visualizations. CARTO provides a set of free basemaps from OpenStreetMap, but you can also use Google Maps, Mapbox, or any other provider with MVT support.
- Create data-driven visualizations. Using our style helpers you can easily create choropleth maps for numerical and categorical data.
Two different flavors are provided:
- Scripting. Useful to build prototypes.
<script src="https://unpkg.com/[email protected]/dist.min.js"></script>
<script src="https://firstname.lastname@example.org/[email protected]/dist.min.js"></script>
In the Examples section you can find interactive examples using the scripting API, like the Hello World example:
You just need to add the deck.gl dependency to your project using the package manager. When you install this dependency, the CARTO submodule is already included:
npm install deck.gl
In the viz-doc repo we provide additional examples that you can download and run, using the following instructions:
- Change directory to the example you are interested in, e.g.,cd viz-doc/deck.gl/examples/pure-js
- Then install the dependencies using the installer of your choice:npm installoryarn
- Finally run the example using:npm startoryarn start