Skip to main content

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.

Import

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

Use cases

For rendering data points with customizable radius a BubbleLayer component can be used. The BubbleLayer component accepts an array of data points as data prop. Data point's minimum required properties are latitude and longitude.

CodeSandbox

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.
CodeSandbox

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.

CodeSandbox

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.

CodeSandbox

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 has an optional tooltip that displays additional data point information when hovering over data points from any of the data layers. To enable the tooltip a BubbleLayer.Tooltip subcomponent should be passed inside the BubbleLayer component. When a BubbleLayer.Tooltip subcomponent is provided without any children, the default tooltip will be used.

By default, the tooltip will display the location information of the hovered bubble, but it can be heavily customized.

CodeSandbox

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.

CodeSandbox

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

CodeSandbox

Threshold legend

CodeSandbox

Categorical legend

CodeSandbox

Props

BubbleLayer

BubbleLayerProps

Signature:

export declare type BubbleLayerProps<T extends > = <T> & (<T> | ) & (<T> | <T>);

BubbleLayerBaseProps

NameTypeDefaultDescription
data
T[]
-An array of location data items to be displayed as bubbles in the BubbleLayer
sizeInterpolation?
|
'fixed'Determines the interpolation mode for bubble size. 'zoom': Bubble size changes with zoom. 'fixed': Constant bubble size regardless of zoom level.

LocationColorProps

NameTypeDefaultDescription
color?
| ((item: T) => )
-Custom color to apply to the layer

LegendColorLayerProps

NameTypeDefaultDescription
color
-When the color prop is set to 'legend', a value accessor is needed
valueAccessor
-The value accesor to map data point values to legend color

ScaleRadiusProps

NameTypeDefaultDescription
scale?
|
'linear'The way the radius is scaled.
radius
(item: T) =>
-The radius property, which determines the size of the bubbles. It requires a callback that is used as data accessor.
radiusRange?
[, ]
[10, 100]It determines the min and max size for the bubble radius

ScaleNoneProps

NameTypeDefaultDescription
scale
-The way to indicate that scale should not be used
radius?
| ((item: T) => )
12The radius property, which determines the size of the bubbles. It can be a constant number or a function that calculates the radius based on the data item

Location

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

Tooltip

BubbleLayerTooltipData

NameTypeDefaultDescription
color
-The hovered bubble color
radius
-The hovered bubble radius
data
T
-The hovered bubble custom data and location

BubbleLayerTooltipHandler

Signature:

export declare type BubbleLayerTooltipHandler = (closestDot: , dotsData: []) => . | ;

BubbleLayerTooltipHandlerProps

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