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