JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 824
  • Score
    100M100P100Q109223F
  • License MIT

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

Package Exports

  • react-leaflet-tracking-marker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-leaflet-tracking-marker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-leaflet-tracking-marker MIT License npm version

A React leaflet marker that drifts to a certain point, computes its bearing angle using 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
previousPosition LatLngExpression The previous point coordinates, Allows the marker to automatically computes its rotation angle.
rotationAngle Number 0 Rotation angle, in degrees, clockwise. ⚠ This will override the computed rotation angle
rotationOrigin String 'center' The rotation center, as a transform-origin CSS rule.
duration number Required, duration im miliseconds marker will take to destination point
keepAtCenter boolean false Makes map view follow marker

Example

import LeafletTrackingMarker from "react-leaflet-tracking-marker";

<LeafletTrackingMarker
  icon={icon}
  position={[latitude, longitude]}
  previousPosition={[prevPos.latitude, prevPos.longitude]}
  duration={1000}
/>;

License

MIT License