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

Name	Type	Default	Description
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.

LocationColorProps

Name	Type	Default	Description
color?	| ((item: T) => )	-	Custom color to apply to the layer

LegendColorLayerProps

Name	Type	Default	Description
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

Location

Name	Type	Default	Description
latitude		-	The latitude coordinate of the location.
longitude		-	The longitude coordinate of the location.

Tooltip

DotLayerTooltipData

Name	Type	Default	Description
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

Name	Type	Default	Description
children?	|	-	The DotLayer tooltip handler template