Skip to main content

DotLayer

The DotLayer component renders data points on a map, accepting an array of data points with required properties like latitude and longitude. It provides support for various shapes, optional features like custom background for icons, rotation, and tooltips, along with granular color customization and integration with legends for color configuration.

Import

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

Use cases

To render data points as dots or simple shapes a DotLayer component can be used. The component accepts an array of data points as data prop. Each data point must contain latitude and longitude properties as a bare minimum.

CodeSandbox

Data point shapes and sizes

The DotLayer component supports various shapes for the data points using the shape prop. The supported shapes are circle, square, diamond heart, cross, star, triangle and pin. The default shape is pin. The pin act as a location marker and the tip of the pin will be placed at the location of the datapoint, instead of the center.

The size of the shape can be adjusted using the shapeSize prop, which receives a number (in pixels) as a value. The default shape size is 32 pixels.

CodeSandbox

Additionally, emojis, single character strings, and Strato icons are supported as data point shapes.

Note: Strato icons must be imported from @dynatrace/strato-icons namespace.

CodeSandbox

Icon background

The DotLayer component provides an optional feature to include a background for the rendered data points' icons. This feature enhances the visual representation of the data points on the map.

To enable the optional icon background, use the background prop when defining the DotLayer. The background prop can take either a boolean or a string value:

  • If set to false, the icon background feature is disabled for the DotLayer.
  • If set to true, the feature is enabled, and the default background color is applied.
  • If a string is provided, the feature is enabled with a custom background color specified by the string.
CodeSandbox

Bearing

The DotLayer component supports rotation of the data points using the bearing prop. The bearing prop accepts a number or a callback that returns a number. The bearing number can between 0 and 360. The default value is 0.

CodeSandbox

Tooltip

The DotLayer component has an optional tooltip that displays additional information when hovering over data point.

By default, the tooltip will display the location information of the hovered point, but it can be heavily customized.

CodeSandbox

Coloring

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

DotLayer

DotLayerProps

Signature:

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

DotLayerBaseProps

NameTypeDefaultDescription
data
T[]
-An array of location data items to be displayed in the DotLayer
shape?
| |
'pin'The shape of the dots
bearing?
| ((item: T) => )
0The bearing property, which determines the rotation angle of the dots. It can be a constant number or a function that calculates the bearing based on the data item
background?
|
falseThe background setting for the DotLayer. As boolean, it toggles the visibility and sets a default color. As string, it defines the background color.
shapeSize?
32The shapeSize property allows to edit the size of the shape, icon, emoji or ReactNode passed to the shape property in pixels.

LocationColorProps

NameTypeDefaultDescription
color?
| ((item: T) => )
-Custom 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

Location

NameTypeDefaultDescription
latitude
-The latitude coordinate of the location.
longitude
-The longitude coordinate of the location.

Tooltip

DotLayerTooltipData

NameTypeDefaultDescription
color
-The hovered dot color
bearing
-The hovered dot bearing
data
T
-The hovered dot custom data and location

DotLayerTooltipHandler

Signature:

export declare type DotLayerTooltipHandler = (dotData: ) => . | ;

DotLayerTooltipHandlerProps

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