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

Use the ConnectionLayer to visually represent connections between points on a world map. The ConnectionLayer subcomponent requires an array of Connection objects as its data prop.

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

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

[
  {
    path: [
      {
        name: 'Tangier',
        latitude: 35.76727,
        longitude: -5.79975,
      },
      {
        name: 'Nantes',
        latitude: 47.218102,
        longitude: -1.5528,
      },
    ],
  },
  {
    path: [
      {
        name: 'Barcelona',
        latitude: 41.3828939,
        longitude: 2.1774322,
      },
      {
        name: 'Vienna',
        latitude: 48.2083537,
        longitude: 16.3725042,
      },
    ],
  },
];

Learn more about the data format here.

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.

Tooltip

The Connection Layer provides a tooltip that displays additional information about the connected points, when hovering over a connection. It can be customized or hidden.

Custom tooltip

Pass a render function as the ConnectionLayer.Tooltip slot children to take full control over what is displayed when a connection is hovered. The render function receives a single ConnectionLayerTooltipData<T> argument with the following properties:

• color — the resolved color of the hovered connection.
• thickness — the line thickness of the connection.
• data — the original connection object, including its path array of locations and any extra properties you provided.

You can compose the tooltip using ChartTooltip primitives (or any custom markup) — exactly the same building blocks used by other Strato charts.