ConnectionLayer

The ConnectionLayer component renders connections between points on a map, accepting an array of Connection data points with required properties like latitude and longitude. It supports customization of color, thickness, direction the connection indicators.

OverviewProperties

Import

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

Use cases

The ConnectionLayer visually represents connections between points on a world map. Its ConnectionLayer subcomponent requires an array of Connection objects as its data prop.

Each Connection object must contain at least one path. A path is defined by an array of data points, and each data point must at least have latitude and longitude.

The ConnectionLayer automatically connects the points in the paths with lines. It's commonly utilized to depict networks combined with geographical data, flight connections, or any type of connection between different locations.

CodeSandbox

Customize connection styling

Each ConnectionLayer exposes some additional properties as line and connectionIndicator to customize the layer's styling.

To alter the color, the thickness, or any of the other styles of a specific Connection you can utilize the corresponding props.

It is also possible to modify the way the connection is displayed, to do this, use the curve parameter, which allows two values line or smooth.

CodeSandbox

CodeSandbox

CodeSandbox

Tooltip

The Connection Layer provides a tooltip that displays additional information about the connected points, when hovering over a connection.

CodeSandbox