react-leaflet-tracking-marker

React Leaflet marker that drifts to a certain point, computes its bearing angle using coordinates and rotates accordingly.

Usage no npm install needed!

<script type="module">
  import reactLeafletTrackingMarker from 'https://cdn.skypack.dev/react-leaflet-tracking-marker';
</script>

README

react-leaflet-tracking-marker MIT License npm version npm version

✈ 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.

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