title: How can I animate a route path on a custom map in javascript?
body: <p>I would like to overlay a dynamic route path on a custom geographical map image in a web application. The path displaying the route should dynamically fill (and animate on page load) with a different colour as the user achieves their distance goal. An example might be:</p>
  
  <ul>
  <li>User browses to map page </li>
  <li>World map displays with a route overlay
  showing e.g. London-> Cairo -> LA -> London </li>
  <li>Page finishes loading.</li>
  <li>JS calculates how much of total distance user has covered (from server
  side data)</li>
  <li>overlay line fills in a different colour gradually (animated - think Indiana Jones!)</li>
  </ul>
  
  <p>I'm liking leaflet maps (<a href="http://leaflet.cloudmade.com/" rel="nofollow">leaflet</a>) for the map tiles and possibly Raphael to draw and animate the polylines.</p>
  
  <p>The initial version will be quite simple with a predefined route so I will know the coordinates of the the cities up front. My question is how can I animate polylines added to a leaflet (or other) map? Would Raphael be appropriate for his?</p>