CARTO for Development
Our goal is to make the development of web-based spatial applications as easy as possible. To achieve this, our developer toolkit includes industry-leading visualization, mapping, and application design components, giving developers unparalleled flexibility to create truly beautiful geospatial user experiences on the web and mobile.
The CARTO platform is based on industry standards like GeoJSON or vector tiles. You can use your choice of visualization library because most of them have support for these standards. We recommend using deck.gl with the CARTO module as we are actively contributing to ensure the best integration and performance. In this website you will find guides and examples for working with CARTO and different visualization libraries.
If you are developing a web application, the CARTO platform is framework-agnostic, so you can use Angular, Vue.js, React, or any other frontend framework/library. We recommend using React because we think reactive programming is a sound approach to spatial applications architecture. If you want to reduce development time, we encourage you to use CARTO for React, although you can build an application with CARTO and React without it. We also provide guides and examples for integrating CARTO with Angular and Vue.js.
CARTO for React is our product for building faster and better spatial apps. Kickstart your development environment with our templates for Create React App and take advantage of our advanced widgets and the custom theme for Material-UI user interface components.
In this guide we will show you how easy it is to create a great looking spatial app from scratch to visualize a dataset and filter it with an interactive widget.
CARTO for React provides templates for Create React App. The basic pre-requisite is to have Node.js installed in your computer, preferably using a version manager like nvm. You also need a package manager; by default Node.js comes with npm but you can also use other package managers like yarn. To create a new app in a folder called
my-app using the template for CARTO 3, you need to execute the following command in your terminal:If you want to use npm:
~ npx create-react-app my-app --template @carto/base-3
If you want to use yarn:
~ yarn create react-app my-app --template @carto/base-3
Then you can start a development server by changing the current directory and executing the following command:
For npm:
~ cd my-app
~ npm start
For yarn:
~ cd my-app
~ yarn start
You should see the following app in your browser with a default header, a sidebar, and an area dedicated to the map:
Now we are going to add a layer to visualize data from a data source that will be displayed in a new view. These are the three main components for working with CARTO for React and we provide a code generation tool based on Hygen to make it really easy to create them.
The data source is a dataset coming from a BigQuery table named
retail_stores. For this tutorial, we are using a token that provides access to the BigQuery table but you can also use OAuth for providing authenticated access. This means you also need to remove the oauth object from the initial state (or comment it out).First you need to edit the
src/store/initialStateSlice.js file and add the public access token to the credentials object:credentials: {
apiBaseUrl: 'https://gcp-us-east1.api.carto.com',
accessToken: 'eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfbHFlM3p3Z3UiLCJqdGkiOiI1YjI0OWE2ZCJ9.Y7zB30NJFzq5fPv8W5nkoH5lPXFWQP0uywDtqUg8y8c',
},
Then you create a new view named “Stores” and include the link in the header:
~ yarn hygen view new
$ hygen view new
✔ Name: · Stores
✔ Route path: · stores
✔ Do you want a link in the menu? (y/N) · true
You can now create a source pointing to the BigQuery table:
~ yarn hygen source new
$ hygen source new
✔ Name: · Stores
✔ Enter a valid connection name · bqconn
✔ Choose type · table
✔ Type a query · cartobq.public_account.retail_stores
Finally you can create a layer using the source and view created in the previous steps:
~ yarn hygen layer new
✔ Name: · Stores
✔ Choose a source · storesSource
✔ Do you want to attach to some view (y/N) · true
✔ Choose a view · Stores (views/Stores.js)
If we look at our browser, we should see a new link “Stores” in the header. If we click on this link, the stores layer will be displayed on top of the basemap:
Now we are going to add a widget to show the revenue by store type for stores in the current viewport. To do that, we are going to use the Category widget.
We need to open the
src/components/views/Stores.js folder and import the component and enumeration that we will use in the widget definition:import { AggregationTypes } from '@carto/react-core';
import { CategoryWidget } from '@carto/react-widgets';
Then we need to remove the “Hello World”
<Grid> component and add the following JSX code for the widget:<CategoryWidget
id='revenueByStoreType'
title='Revenue by store type'
dataSource={storesSource.id}
column='storetype'
operationColumn='revenue'
operation={AggregationTypes.SUM}
/>
In addition to giving the widget a unique ID and a title, we link it with the layer through the
dataSource property. The Category widget groups the features by the attribute specified in the column parameter and executes the aggregation operation specified in the operation parameter over the attribute specified in the operationColumn parameter.If you go to your browser, you will see the widget in the sidebar and if you click on any of the store types, you will see how the map is filtered.
In this documentation center you will find comprehensive documentation on CARTO for React. For visualization, CARTO for React uses our module for deck.gl. You can also use deck.gl with other frontend frameworks like Angular or Vue.js.
CARTO is an open ecosystem that does not force you to use a specific technology or library. Please read the following Basemaps guide if you want to work with CARTO and Google Maps, Mapbox, or Amazon Location.
Your application probably uses queries or tables located in your data warehouse, and the results should be accessed only by authenticated users. Please read this article on the different strategies for user authentication when developing apps with CARTO.
Last modified 24d ago