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.

BubbleLayer

BubbleLayerProps

Signature:

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

BubbleLayerBaseProps

extends
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 accessor 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) => )
12

The 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

seriesActions?
(location: ) =>

Series actions callback for the default tooltip

hidden?

Whether the tooltip is hidden

symbolAlignment?
|

Overrides the horizontal alignment of series symbols

Still have questions?
Find answers in the Dynatrace Community