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.

    OverviewProperties

    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.

    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
    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

    CodeSandbox

    Coloring countries and regions​

    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
    Still have questions?
    Find answers in the Dynatrace Community