Props – Nextra

Note:
T represents a generic type. In fact, react-leaflet-hotline is build with the idea that coordinates can be represented in many ways, with many different terminologies. Therefore, the package allows developers to directly plug-in their data and use the getLat, getLng and getValue props to fit their data type to the Hotline package.

Name	Type	Default Value	Required?	Description
data	`T[] \| T[][]`	-	✔	Array containing the line(s) coordinates
getLat	`(t: T) => number`	-	✔	Get latitude from a point of type `T`
getLng	`(t: T) => number`	-	✔	Get longitude from a point of type `T`
getValue	`(t: T) => number`	-	✔	Get value from a point of type `T`
options	`HotlineOptions`	`object` (see default values of HotlineOptions)	✘	Hotline options to modify lines appearance
eventHandlers	`HotlineEventHandlers`	-	✘	Hotline event handlers

HotlineOptions

Name	Type	Default Value	Required?	Tracked?	Description
min	number	0	~ (Recommended)	✔	Minimum value of your data, `min` will correspond to the color at t=0 on the palette
max	number	1	~ (Recommended)	✔	Maximum value of your data, `max` will correspond to the color at t=1 on the palette
weight	number	7	✘	✔	Hotline thickness
outlineWidth	number	0	✘	✔	Hotlines can be displayed with an outline, this parameter controls its thickness
outlineColor	string `('red', '#ff0')`	`'black'`	✘	✔	Outline color if outlineWidth is set to a number > 0
palette	Palette	`defaultPalette`	✘	✔	Colors used for calculating the gradients on the hotline
tolerance	number	3	✘	✔	Thickness of the hotline for the events to trigger, you might want to change this if you changed the `weight`

Palette

Palette is a typescript type representing an array of colors Color[].

interface Color {
    r: number; // Red channel
    g: number; // Green channel
    b: number; // Blue channel
    t: number; // Offset at which the value of a data point becomes this exact color
}

Suppose your palette is the following array:

const palette: Palette = [
    {r: 1, g: 0, b: 0, t: 0},
    {r: 0, g: 0, b: 1, t: 1}
]

Then, any data points with values less or equal to 0 will appear red, any data points with values superior or equal to 1 will appear blue and any data points with values between 0 and 1 will appear as a linear interpolation between the two colors.

defaultPalette

The default palette called defaultPalette is an array of length 3 containing the red, yellow and green colors with offsets of 0, 0.5 and 1 respectively. See the effect of changing the palette colors in the playground!

HotlineEventHandlers

Hotlines support all leaflet events thanks to the eventHandlers prop.
The eventHandlers prop can be tracked by wrapping your handler object with a useMemo hook.
See /events for an example on how to use eventHandlers or take a look at the playground.

Introduction Events