Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-leaflet-tracking-marker

alexandra-c2kMIT1.0.16TypeScript support: included

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

react-leaflet-v3, react, leaflet, moving, rotated, marker, react, leaflet marker, react leaflet marker, leaflet-moving-marker, leaflet moving marker, leaflet rotating marker, leaflet bearing marker, leaflet sliding marker, sliding marker, leaflet-drift-marker, leaflet drift marker, drift marker, drift-marker

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.

Check-out a working example here:

Edit leaflet-tracking-marker

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