A React Leaflet library that allows developers to create custom markers
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.
This library was inspired from leaflet-drift-marker and react-leaflet-rotatedmarker.
Supports react-leaflet v3.x
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} />
}
License
MIT License