BubbleLayer

The BubbleLayer component renders data points as bubbles on a map, accepting an array of data points with required properties like latitude and longitude. It supports customization of bubble size using the radius prop and optional tooltips for displaying additional information.

OverviewProperties

Import

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

Use cases

Use the BubbleLayer component to render data points with customizable radius. The BubbleLayer component accepts an array of data points as the data prop. Each data point must have latitude and longitude as minimum required properties.

[
  {
    radius: 85,
    longitude: -115.195615,
    latitude: 36.171462,
  },
  {
    radius: 35,
    longitude: -94.556725,
    latitude: 39.104532,
  },
  {
    radius: 40,
    longitude: -73.998772,
    latitude: 40.717575,
  },
];

Learn more about the data format here.

Size interpolation

The sizeInterpolation prop determines how the size of the bubbles changes with zoom level.

• 'zoom': The size of the bubbles adjusts dynamically based on the zoom level of the map. As the user zooms in or out, the bubble sizes change accordingly to maintain relative proportions.
• 'fixed':The size of the bubbles remains constant regardless of the zoom level. This means that as the user zooms in or out, the size of the bubbles on the map remains the same, offering consistent visual representation.

Scale and radius

The scale prop controls how the size of the bubbles is scaled, affecting their visual representation on the map.

Linear Scaling

This is the default scaling mode, in which the size of the bubbles is scaled linearly based on the data range provided. The size of the bubbles increases or decreases proportionally to data values.

In this scaling mode, the value accessor has to be explicitly provided by passing to the radius prop a callback that returns the value which will be used to calculate the scale.

Additionally, when using linear scaling, you have the option to specify a radiusRange, which is an array or the minimum and maximum sizes for the bubble radius in pixels. This allows more control over the size range of bubble displayed on the map.

Logarithmic Scaling

Alternatively, setting the scale prop to 'log' applies logarithmic scaling to the bubble sizes. Logarithmic scaling is useful for representing data that spans several orders of magnitude, as it compresses the range of values into a more visually manageable scale.

Similar to linear scaling, logarithmic scaling also allows for specifying a radiusRange to define the minimum and maximum sizes for the bubble radius.

In this scaling mode, the radius prop must be callback function that dynamically calculates the radius based on the data points.

No Scaling

In contrast, when the scale prop is set to 'none', no automatic scaling is applied to the bubble size. A constant number must be provided for the radius prop to set the size of all bubbles uniformly, or a callback function that will be run for each data point and the returned value used as a radius. When radius prop is not set, the default radius of 12px will be applied.

Be aware, that the radiusRange prop is not supported in none scaling mode because it's not possible to derive the scaling mechanism for the provided range.

Tooltip

The BubbleLayer component displays a tooltip by default when hovering over a data point. By default, the tooltip will display the location information of the hovered bubble, but it can be heavily customized.

Custom tooltip

Pass a render function as the BubbleLayer.Tooltip slot children to take full control over what is displayed when a bubble is hovered. The render function receives two arguments:

1. closestBubble — a BubbleLayerTooltipData<T> object for the bubble nearest to the cursor.
2. nearbyBubbles — an array of BubbleLayerTooltipData<T> objects for any neighbouring bubbles that overlap the hovered position.

Each BubbleLayerTooltipData<T> exposes color, radius, and data (the original data point with latitude, longitude, 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.

Coloring

The BubbleLayer 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.

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

Threshold legend

Categorical legend