CARTO for React
Widgets
You can use widgets in your application to provide advanced functionality for exploring and filtering the information. CARTO for React comes with several widgets out-of-the-box that you can add really easily to your spatial apps:
- Category
- Formula
- Geocoder
- Histogram
- Pie
The widgets are implemented combining the functionality of three different library packages:
-
@carto/react-ui. This package provides the user interface functionality for widgets. This means you can reuse the UI with your own business logic if you need to provide custom functionality. -
@carto/react-widgets. This package takes advantage of the UI components from the@carto/react-uipackage and provides the business logic for the filters, including the integration with other components through the Redux store. -
@carto/react-workers. This package implements the calculations needed by the widgets. Everything is implemented using web workers to improve the performance and the user experience.
Data sources
The widgets work with vector tiles provided by the Maps API. The workers retrieve the information from the tiles and execute the different calculations needed by each widget. Every time we change the viewport, new tiles are downloaded and the widgets are updated.
Common properties
There are some properties that are used by all the widgets, except the geocoder widget:
| Property | Description |
|---|---|
id |
ID for the widget instance |
title |
Title to show in the widget header |
dataSource |
ID of the data source to get the data from |
column |
Name of the data source’s column to get the data from |
operation |
Aggregation operation to apply on the column or operationColumn values |
Category widget
Groups features into categories (column) and executes an operation on another column (operationColumn) for each group. Displays 5 categories at the same time.
Requires/accepts the following additional properties:
| Property | Description |
|---|---|
formatter |
Formatter for the aggregated value |
labels |
Labels to show for each category |
operationColumn |
Column to use int the aggregation operation |
Formula widget
Calculates a value executing an aggregation operation on a data source column.
Requires/accepts the following additional properties:
| Property | Description |
|---|---|
formatter |
Formatter for the aggregated value |
Geocoder widget
Provides geocoding functionality through a search bar, requiring credentials with access to geocoding services. It works by executing the cdb_geocode_street_point function through the SQL API.
When the results are returned, the widget performs an automatic zoom to the best result (no autocomplete) and adds a marker.
Histogram widget
Groups features into buckets after executing an aggregation operation on a column.
Requires/accepts the following additional properties:
| Property | Description |
|---|---|
formatter |
Formatter for the aggregated value |
ticks |
Breaks to define the buckets |
xAxisFormatter |
Formatter for X axis values |
Pie widget
Groups features into categories (column) and executes an operation on another column (operationColumn) for each group.
Requires/accepts the following additional properties:
| Property | Description |
|---|---|
formatter |
Formatter for the aggregated value |
height |
Chart height (CSS) |
operationColumn |
Column to use int the aggregation operation |
tooltipFormatter |
Formatter for the tooltip |