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.

OverviewProperties

Import

import { ChoroplethLayer } from '@dynatrace/strato-geo';

Use cases

To apply color to a specific region a ChoroplethLayer subcomponent can be used. The ChoroplethLayer subcomponent accepts an array of data entries as data prop. Each entry is required to contain a ISO 3166-2 region code data.

The regionAccessor prop of the ChoroplethLayer can then be used to access the region were the color needs to be applied, it could be either as string in the form of a value accessor, or a callback to dynamically construct the region code

CodeSandbox

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.

CodeSandbox

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.

CodeSandbox

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.

Sequential legend

CodeSandbox

Threshold legend

CodeSandbox

Categorical legend

CodeSandbox