Index – Nextra

Introduction

The demo below presents the hotline out of the box, with only the coordinates to draw the line.
Props can be passed to the component (and hook) to customize the hotline.
Please see the playground to see the effects of changing the various props.

See code

demo.js

import MapWrapper from "./map/MapWrapper";
import { Hotline } from 'react-leaflet-hotline';
 
const data = [
    { lat: 55.7620299, lng: 12.5197298, value: 1 },
    { lat: 55.7598755, lng: 12.5177353, value: 8 },
    { lat: 55.7587234, lng: 12.5158659, value: 4 },
]
 
export default function Demo() {
	return (
		<MapWrapper>
			<Hotline
				data={data} 
				getLat={t => t.lat} 
				getLng={t => t.lng} 
				getVal={t => t.value} />
		</MapWrapper>
	)
}

Options

Options can be passed to the Hotline component and the useHotline hook. Some options are 'tracked', i.e. they can be defined as a react state and changes will be reflected automatically on the hotline. See more

Event handlers

Events can be handled by the eventHandlers prop. Since the package is based on react-leaflet, all events supported by react-leaflet are also supported by the hotline.

MultiPolyline

MultiPolyline consists of multiple polylines grouped into one layer. They thus share the same options and eventHandlers, and are useful when working with multiple distinct lines that should behave similarly.

Hook

The Hotline component is based on the useHotline hook, which is also exported and can be used in the same way as the component.

Playground 🎨Props