search

ewoken / Leaflet.MovingMarker

A Leaflet plug-in to create moving marker
MIT License
342 stars 177 forks source link

Draw polyline #15

Open tech4bot opened 8 years ago

tech4bot commented 8 years ago

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 commented 8 years ago

Use SnakeAnim plugin for leaflet

julien-nc commented 7 years ago

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.