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.