Skip to main content

    DotLayer

    The DotLayer component renders data points on a map, accepting an array of data points with required properties like latitude and longitude. It provides support for various shapes, optional features like custom background for icons, rotation, and tooltips, along with granular color customization and integration with legends for color configuration.

    OverviewProperties

    DotLayer​

    DotLayerProps

    Signature:

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

    DotLayerBaseProps

    NameTypeDefaultDescription
    data
    T[]
    		-

    An array of location data items to be displayed in the DotLayer

    shape?
    | |
    		'pin'

    The shape of the dots

    bearing?
    | ((item: T) => )
    		0

    The bearing property, which determines the rotation angle of the dots. It can be a constant number or a function that calculates the bearing based on the data item

    background?
    | | ((item: T) => )
    		false

    The background setting for the DotLayer. As boolean, it toggles the visibility and sets a default color. As string, it defines the background color.

    shapeSize?
    		32

    The shapeSize property allows to edit the size of the shape, icon, emoji or ReactNode passed to the shape property in pixels, minimum value is 1.

    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

    Location

    NameTypeDefaultDescription
    latitude
    		-

    The latitude coordinate of the location.

    longitude
    		-

    The longitude coordinate of the location.

    Tooltip​

    DotLayerTooltipData

    NameTypeDefaultDescription
    color
    		-

    The hovered dot color

    bearing
    		-

    The hovered dot bearing

    data
    T
    		-

    The hovered dot custom data and location

    DotLayerTooltipHandler

    Signature:

    export declare type DotLayerTooltipHandler = (dotData: ) => . | ;

    DotLayerTooltipHandlerProps

    NameTypeDefaultDescription
    children?
    |
    		-

    The DotLayer tooltip handler template

    Still have questions?
    Find answers in the Dynatrace Community