How can I access and then animate an existing polyline of a booklet map using Javascript?

Question

Can anyone suggest how I can access, animating the red polyline here using javascript:

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

I want to animate a polyline from the first marker to the end of the red line (I think Indiana Jones, but without moving the map and NOT using Google maps). It should be dynamic, as different users will travel at different distances.

I need your solution to work in FF, IE7 + and Chrome

I use a cloudmade leaflet and try to avoid using google maps.

There is more info in my related question in gis. stackexchange

Answer 1

I checked your code and it looks like you are using the leaflet API to draw lines. Because of this, I decided to write a somewhat general function that animated these lines. (By the way, I'm confused why the API uses route tags instead of line tags, but I rolled with it.)

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

I would like to polish it a bit, but I wanted to put my foot on the door for this generosity .: D (I will go back to polishing and send the update in a few hours, as soon as I have done some other work.)

Answer 2

I highly recommend the jquery_svg plugin . I used it, and there are many features, including animation, text on the way, user interaction.