react-leaflet-drift-marker


| Support | Tested | |
| --------------- | ------ | ------- |
| react-leaflet | v2.x | ☑ |
| react-leaflet | v3.x | ☑ |
| react-leaflet | v4.x | ☑ |

| react-leaflet | react-leaflet-drift-marker |
| ------------- | -------------------------- |
| v2.x | v2.0 |
| v3.x | v3.x |
| v4.x | v4.x |

!"IMG"

A plugin for react-leaflet, that allows a marker to move smoothly instead of jump to a new position.

$3

Installation

$3

``bash
npm install --save react-leaflet-drift-marker
`

react-leaflet-drift-marker requires leaflet and react-leaflet as peerDependency

`bash
npm install --save leaflet react-leaflet
`

Usage

![Edit react-leaflet-drift-markerv3](https://codesandbox.io/s/react-leaflet-drift-markerv3-nxzht?fontsize=14&hidenavigation=1&theme=dark)

Still supports all existing props from react-leaflet marker check component

| Added Props | Type | Default | Description |
| -------------- | --------- | ------- | ----------------------------------------------------------------------- |
| duration | number | | Required, duration im miliseconds marker will take to destination point |
| keepAtCenter | boolean | false | Makes map view follow marker |

DriftMarker Component, is the same as react-leaflet Marker Componet, but DriftMarker on update, instead of doing a setLatLng does a slideTo new position.

#### DriftMarker (with react-leaflet) example and with position generator

`javascript
import React from 'react'
import { MapContainer, TileLayer, Popup, Tooltip } from "react-leaflet";
import ReactLeafletDriftMarker from "react-leaflet-drift-marker"

function gen_position() {
return {
lat:(Math.random()*360-180).toFixed(8),
lng:(Math.random()*180-90).toFixed(8):
}
}
class SampleComp extends Component {
// initial position
state={ latlng:gen_position()}

componentDidMount() {
setTimeout(() => {// updates position every 5 sec
this.setState({latlng:gen_position()})
}, 5000);
}

render() {
return
attribution='&copy OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
// if position changes, marker will drift its way to new position
position={this.state.latlng}
// time in ms that marker will take to reach its destination
duration={1000}
icon={iconPerson} >
Hi this is a popup
Hi here is a tooltip


}
}
``

License

MIT License