Move marker on Openstreet map - Leaflet API

Question

Guys i am complete newbie in using openstreetmaps. I have put some markers on it with custom icons, embedded with popups, etc. Now, I really need to know how to move a marker on Openstreet map. I am implementing it using Leaflet API. There is nothing on marker animation b/w two points on documentation of letlet offical website. Please help me out here because i am clueless. Give me some links or blogs or some kind of helping material on it.

Thanks.

Answer 1

Use Leaflet.MovingMarker:

    //MovingMarker Options
                        var animationMarker = L.Marker.movingMarker(
                            [[48.8567, 2.3508],[50.45, 30.523333]],
                            20000, {autostart: true});
    // Custom Icon Object
                        var greenIcon = L.icon({
                            iconUrl: 'icon.png',
                        });
   // Set icon to movingMarker
                        animationMarker.options.icon = greenIcon;
   // Add marker to Map
                        map.addLayer(animationMarker );

Answer 2

There is L.PosAnimation in the API to do things like this:

http://leafletjs.com/reference.html#posanimation

For a more sophisticated approach you could take a look at this plugin:

https://github.com/openplans/Leaflet.AnimatedMarker

Answer 3

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

Add the script then use:

var myMovingMarker = L.Marker.movingMarker([[48.8567, 2.3508],[50.45, 30.523333]], [20000]).addTo(map);

myMovingMarker.start();