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.

    OverviewProperties

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

    Still have questions?
    Find answers in the Dynatrace Community