React Leaflet marker that drifts to a certain point, computes its bearing angle using coordinates and rotates accordingly.
npm install 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:
``bash`
npm install --save react-leaflet-tracking-marker
react-leaflet-tracking-marker requires leaflet and react-leaflet as peerDependency
`bash`
npm install --save leaflet react-leaflet
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
`js
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
}
``
MIT License