React-leaflet: How to make a moving marker like Uber cars?

[robin-chilliapple]

I create a marker now how do I move this marker like a car on location updates?
I use states to update the position of the marker but it doesn't animate. How do I do this?

My issue is when a latlng is updated the marker jumps from one place to another but I want it to move the car animation smoothly. Have you ever tracked an Uber ride on the web? something like that.

This above gif might help you understand my requirement better.

[Phocea]

Try with https://github.com/ewoken/Leaflet.MovingMarker

[robin-chilliapple]

Try with https://github.com/ewoken/Leaflet.MovingMarker

I want to make it in React Js. Do you have any example in React?
It will really help me. Thanks

[hugobarragon]

Try with https://github.com/ewoken/Leaflet.MovingMarker

I want to make it in React Js. Do you have any example in React?
It will really help me. Thanks

hi there, i have a package that supports react-leaflet out of the box, please give it a try and feedback me hehe, pacakge name:leaflet-drift-marker
you just need to pass the car icon

leaflet-drift-marker npm
leaflet-drift-marker github

[hugobarragon]

hi all, i need help to create moving marker in anguar, i cant find an example and good packege that works in angular, any help, leaflet moving marker

i am not into angular, but you can use leaflet-drift-marker pure class( that is just pure javasvript/typescript) and use it as this:
https://github.com/hugobarragon/leaflet-drift-marker#drift_marker-with-leaflet

[abelgalef]

Thanks @hugobarragon, works like a charm 😊

[toderitagcristian]

@hugobarragon thanks a lot !

My needs were a bit more specific and I modified your code and made it compatible with https://github.com/bbecquet/Leaflet.RotatedMarker

Basically I added :
// Enhanced marker with Rotate Marker
if (props.rotationAngle !== prevProps.rotationAngle) {
marker.setRotationAngle(props.rotationAngle);
}
if (props.rotationOrigin !== prevProps.rotationOrigin) {
marker.setRotationOrigin(props.rotationOrigin);
}

Of course there are a lot to consider when using these 2 libraries, but it works for me.
For example watch out for 'rotationAngle' from 'rotateMarke'r which is 0 if undefined as props and will cause a reset of angle on component update, followed by the correct angle. => weird marker dancing on the map :))

My case was that I update car position and also the car angle to align with the road.
Typical transportation dashboard :))