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.

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