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.
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.
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.
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 a boolean, a string, or a
callback function:
- If set to
false, the icon background feature is disabled for theDotLayerand the default background is only shown on a data point hover. - If set to
true, the background color is visible without hovering, and the default background color is applied. - If a string is provided, the feature is enabled with a custom background color specified by the CSS string or color token.
- When a callback function is provided, the function should return a string that specifies the background color for each data point.
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.
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.
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.
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.