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 |

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

For more performance use canvas or webgl options!!

Installation

Install via NPM

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

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

npm install --save leaflet react-leaflet

Usage

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

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 <MapContainer center={[2.935403, 101.448205]} zoom={10}>
        <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <ReactLeafletDriftMarker
            // 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} >
            <Popup>Hi this is a popup</Popup>
            <Tooltip>Hi here is a tooltip</Tooltip>
        </ReactLeafletDriftMarker>
    </MapContainer>
    }
}

License

MIT License