Skip to main content

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

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

Props

ChoroplethLayer

ChoroplethLayerProps

Signature:

export declare type ChoroplethLayerProps<T extends <, >> = <T> & (<T> | );

ChoroplethLayerBaseProps

NameTypeDefaultDescription
data
T[]
-An array of data items representing regions to be displayed in the ChoroplethLayer
regionAccessor
| ((t: T) => )
-A string property or accessor function that specifies how to access the region identifier from the data items. It can be a string representing the key in the data object or a function that extracts the region identifier

ChoroplethCustomColorProps

NameTypeDefaultDescription
color?
| ((item: T) => )
-Color to apply to the layer

LegendColorLayerProps

NameTypeDefaultDescription
color
-When the color prop is set to 'legend', a value accessor is needed
valueAccessor
-The value accesor to map data point values to legend color

Tooltip

ChoroplethLayerTooltipData

NameTypeDefaultDescription
color
-The hovered region color
name
-The hovered region name
data
T
-The hovered region custom data

ChoroplethLayerTooltipHandler

Signature:

export declare type ChoroplethLayerTooltipHandler = (regionData: ) => .;

ChoroplethLayerTooltipHandlerProps

NameTypeDefaultDescription
children?
|
-The ChoroplethLayer tooltip handler template
Still have questions?
Find answers in the Dynatrace Community