How can I access, then animate an existing leaflet map polyline using Javascript?

Question

Can anyone suggest how I can access then animate the red polyline here using javascript:

http://gymloop.lukem.co.uk (login: User2/pass2, then select 'Challenges')

I want to animate the polyline from the first marker to the end of the red line (think Indiana jones but without the map moving and NOT using google maps). It needs to be dynamic as different users will have travelled different distances.

I need thew solution to work in FF, IE7+ & Chrome

I am using cloudmade's leaflet maps and am keen to avoid using google maps.

There is further information in my related question at gis.stackexchange

Answer 1

I've checked out your code and it seems you're using the leaflet API to draw the lines. Because of that, I've decided to write a somewhat generic function that animated those kinds of lines. (By the way, I'm confused why that API uses path tags instead of line tags, but I've rolled with it.)

Here's the code: http://jsfiddle.net/mihaibirsan/Wzvre/

I'd like to polish it a bit more, but I wanted to put a foot in the door for that bounty. :D (I'll get back to polishing and post an update in a few hours, once I've done some other work.)