Draw polyline

[tech4bot]

Hello,

Is there a easy way to draw a polyline while the marker is moving? To let behind the polyline, not to move over an existing polyline.

Thank you!

[wahisoufiane]

Use SnakeAnim plugin for leaflet

[julien-nc]

But the SnakeAnim plugin is hard to combine with MovingMarker because the way they define the speed is quite different. SnakeAnim speed is in pixel per second, which means if you zoom, the animation duration changes (not so great). I prefer MovingMarker's way. Animation duration is set and zoom events are not problematic.

After exploring a lot of complicated possibilities to draw a polyline progressively following the marker, i realized i just needed a "move" event from the marker. Here is a modified version of MovingMarker.js which fires this event. Then it looks like this :

var snakeLine, marker;
function updateSnakeLine(e) {
    var ll = e.target.getLatLng();
    snakeLine.addLatLng(ll);
}
// suppose we already have the pathLine polyline
snakeLine = L.polyline([]).addTo(map);
marker = L.Marker.movingMarker(pathLine.getLatLngs(), 10000).addTo(map);
marker.on('move', updateSnakeLine);
marker.start();

The snakeLine is drawn at the exact same time the marker moves.