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.

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

License

MIT License