Package Exports

react-leaflet-tracking-marker
react-leaflet-tracking-marker/index.js

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

✈ 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