View Code? Open in Web Editor NEW

✈ A React Leaflet library that allows developers to create custom markers that drifts to a certain point, computes their bearing angle using given coordinates and rotates accordingly.

License: MIT License

JavaScript 100.00%

leaflet-tracking-marker's Introduction

react-leaflet-tracking-marker

✈ A React Leaflet library that allows developers to create custom markers that drifts to a certain point, computes their bearing angle using given coordinates and rotates accordingly.

Supports `react-leaflet` v3.x

This library was inspired from leaflet-drift-marker and react-leaflet-rotatedmarker.

Installation

npm install --save react-leaflet-tracking-marker

react-leaflet-tracking-marker requires leaflet and react-leaflet as peerDependency

npm install --save leaflet react-leaflet

Usage

Inherits props from leaflet-drift-marker and still supports all existing props from react-leaflet marker

Props	Type	Default	Description
`position`	`LatLngExpression`		The current coordinates. This is mandatory.
`previousPosition`	`LatLngExpression`		The previous point coordinates, Allows the marker to automatically computes its rotation angle. This is mandatory.
`rotationOrigin`	`String`	`'center'`	The rotation center, as a `transform-origin` CSS rule.
`duration`	`number`		Required, duration in milliseconds marker will take to destination point
`keepAtCenter`	`boolean`	`false`	Makes map view follow marker

Example

import LeafletTrackingMarker from 'react-leaflet-tracking-marker'

function AirplaneMarker({ data }) {
  const { latitude, longitude } = data
  const [prevPos, setPrevPos] = useState([latitude, longitude])

  useEffect(() => {
    if (prevPos[1] !== longitude && prevPos[0] !== latitude) setPrevPos([latitude, longitude])
  }, [latitude, longitude, prevPos])

  return <LeafletTrackingMarker icon={icon} position={[latitude, longitude]} previousPosition={prevPos} duration={1000} />
}