I'm using Leaflet library and Mapbox. I need to create animated line from one city to another, slow motion "travelling" from one point to another point. Is that possible in javascript and how? I can add any tools if it's necessary.

Also, I would need some zig zag line, not just straight line, do you have some advices regards to that? Is there some library or something similar where we can choose line styles maybe?

Thank you.


you can use this javascipt for adding small piece of line with time delay to complete the entire line.

time = 0;
    for (var i = 0; i < 5; i++) {
        time += 1000;
        setTimeout(function(j) {
            return function() {
                console.log("var is now", j);
        }(i), time);

beside this you can check out here about animation examples for some inspiration.

i hope it helps you.

  • I'm beginner with Java, so I'm not sure how to use this coding. My polyline coding is this: var firstpolyline = new L.Polyline(pointList, { color: 'yellow', weight: 7, opacity: 0.8, smoothFactor: 3 }); map.addLayer(firstpolyline); – againstflow Jul 20 '12 at 10:25

You can use Raphael plugin for Leaflet. This enables you to use SVG animations from Raphael framework.


There is an example on using animated lines from point to point using Bezier lines on link above. You can look in the plugin code and make tweaks to functionality provided or add your own by using Raphael features.

You will need Raphael framework as well: http://raphaeljs.com/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.