Skip to main content

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.

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. The minimum required property for each Connection is the path, which represent an array of data points (with latitude and longitude as the minimum required properties).

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.

CodeSandbox

Tooltip

As for the ConnectionLayer, when hovering on a connection the tooltip will output data of the connected points.

CodeSandbox

Props

ConnectionLayer

ConnectionLayerProps

NameTypeDefaultDescription
data
T[]
-Set of data related to the connections
line?
|
'solid'Specifies the line type.
directionIndicator?
| |
-Position of the arrows in relation of the connection direction
curve?
'linear'Declare whether the curve is linear or smooth
color?
| ((connection: T) => )
Colors.Charts.Categorical.Color03.DefaultSpecifies the color of the connection layer.
thickness?
2Specifies the thickness of the connection path. It can accept numbers from 1 to 64 (included).

Connection

Signature:

export declare type Connection = { /** Array of connections */ path: []; };
NameTypeDefaultDescription
path
[]
-Array of connections

Location

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

CurvedLine

Signature:

export declare type CurvedLine = | ;

Tooltip

ConnectionLayerTooltipData

NameTypeDefaultDescription
color
-The hovered connection color
thickness
-The hovered connection thickness
data
T
-The hovered connection custom data and path locations

ConnectionLayerTooltipHandler

Signature:

export declare type ConnectionLayerTooltipHandler = (connectionData: ) => .;

ConnectionLayerTooltipHandlerProps

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