Animated lines and line styles in Javascript

Question

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.

Answer 1

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.

Answer 2

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

http://dynmeth.github.io/RaphaelLayer/

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/