ChoroplethLayer
The ChoroplethLayer component allows users to display divided geographical areas or regions that are coloured in relation to a given data. It provides an easy way to visualize how a variable varies across a geographic area or show the level of variability within a region.
Import
import { ChoroplethLayer } from '@dynatrace/strato-geo';
Use cases
Use the ChoroplethLayer subcomponent to apply color to a specific region. The ChoroplethLayer subcomponent accepts an array of data entries as the data prop. Each entry must contain an ISO 3166-2 region code.
You can use the regionAccessor prop to access the region where the color needs to be applied. This can be either a string in the form of a value accessor or a callback to dynamically construct the region code.
[
{
country: 'DE',
color: '#f7c910',
population: 84724070,
},
{
country: 'AU',
color: '#012066',
population: 26473055,
},
{
country: 'BR',
color: '#029639',
population: 218689752,
},
];
Learn more about the data format here.
Tooltip
Finally, when hovering a region in the ChoroplethLayer, the tooltip will output the region name, the color and all the additional custom props inside a data object. It can be customized or hidden.
Custom tooltip
Pass a render function as the ChoroplethLayer.Tooltip slot children to take full control over what is displayed when a region is hovered. The render function receives a single ChoroplethLayerTooltipData<T> argument with the following properties:
color— the fill color of the hovered region.name— the display name of the region (e.g. "Germany").data— the original data record you provided for that region.
You can compose the tooltip using ChartTooltip primitives (or any custom markup) — exactly the same building blocks used by other Strato charts. You can also attach interactive actions via the actions prop on ChartTooltip.SeriesItem.
Coloring
The ChoroplethLayer supports two ways of color configuration: granular configuration using the color prop, or using a one of the available legend subcomponents (e.g. SequentialLegend, ThresholdLegend, or CategoricalLegend).
Note: Detailed information about coloring can be found in the MapView documentation page under the Coloring section.
Granular color configuration
For a granular color customization, layer's color prop should be used.
Custom color applied on singular country state
This type of display can be done by providing country/state array for include and exclude props in BaseLayer component
Coloring countries and regions
Color configuration using a legend
To connect a data layer to the legend, a color property of the layer should be set to legend string.