How can I animate a route path on a custom map in javascript?

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:

• User browses to map page
• World map displays with a route overlay showing e.g. London-> Cairo -> LA -> London
• Page finishes loading.
• JS calculates how much of total distance user has covered (from server side data)
• overlay line fills in a different colour gradually (animated - think Indiana Jones!)

I'm liking leaflet maps (leaflet) for the map tiles and possibly Raphael to draw and animate the polylines.

开发者_C百科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?

You can overlay the map image with a canvas and draw the route on the canvas. You can use it also in the admin as a pin placing method, just handle canvas click events and store the x,y, coordinates.

Have a look at openlayers, and check out geoserver for your back-end.