React-leaflet-tracking-marker NPM

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

"IMG"

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

Check-out a working example here:

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. To set a fixed value, consider using `rotationAngle` property.
`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
`rotationAngle`	`number`	`0`	Rotation angle, in degrees, clockwise. Allows setting the marker rotation angle manually, replacing the rotation angle value that was automatically computed using the `previousPosition` property if provided.

Note: LatLngExpression type defines an array of latitude and longitude values. e.g. 51.505, -0.09

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} />
}