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.

OverviewProperties

Import

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

Use cases

Use the DotLayer component to render data points as dots or simple shapes. The component accepts an array of data points as the data prop. Each data point must have latitude and longitude properties as the bare minimum.

[
  {
    name: 'Vienna International Airport',
    latitude: 48.1049967,
    longitude: 16.5848987,
  },
  {
    name: 'Barcelona El Prat Josep Tarradellas Airport',
    latitude: 41.2969439,
    longitude: 2.0790474,
  },
];

Learn more about the data format here.

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 a boolean, a string, or a callback function:

• If set to false, the icon background feature is disabled for the DotLayer and 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.

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