7

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

Community
  • 1
  • 1
codecowboy
  • 8,963
  • 17
  • 73
  • 129
  • Why not ask in the developer forums for the product? This seems really product specific, and not general JS. I Could be wrong. http://support.cloudmade.com/developers-forums – CrazyDart Aug 04 '11 at 18:46
  • There is no native animation as part of the leaflet product so I need to use something else to do the animation. I'm thinking I may need to duplicate the polylines and overlay some kind of transparent canvas on top of the existing map. – codecowboy Aug 04 '11 at 19:09
  • You mention required support for IE7+, but SVG isn't supported prior to IE9, thus the leaflet maps don't render the paths. If you want a script that would also draw the lines, then you should update your question to reflect that. – Mihai Alexandru Bîrsan Oct 27 '11 at 18:53
  • Using something like svgweb to support older browsers would be acceptable at this stage http://code.google.com/p/svgweb/. I will need to test this, though – codecowboy Oct 28 '11 at 09:47
  • Also, the leaflet API seems to suggest that older IEs will fall back to VML. http://leaflet.cloudmade.com/reference.html#polyline – codecowboy Oct 28 '11 at 09:58
  • I don't see a red polyline. I don't see anything that is red on that map. – gilly3 Nov 02 '11 at 01:19
  • @ gilly3 The page was broken (there are still bugs) but I have reset the user distance now – codecowboy Nov 03 '11 at 06:28

2 Answers2

13

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.)

Mihai Alexandru Bîrsan
  • 677
  • 6
  • 12
  • Thanks Mihai :) - this looks very promising. – codecowboy Oct 28 '11 at 09:48
  • If you look at the features page, you can see that IE 7-9 are supported http://leaflet.cloudmade.com/features.html – codecowboy Oct 30 '11 at 09:42
  • The features page says IE7-9 are supported, but in fact the paths feature doesn't work on IE7 and IE8. Here are a set of screenshots: [on Chrome](http://www.screenshots.cc/show/51046/173b1), [on IE9](http://www.screenshots.cc/show/51047/a4gg5), [on IE8 via IE9 Dev](http://www.screenshots.cc/show/51048/k9edk), [on IE7 via IE9 Dev](http://www.screenshots.cc/show/51049/r2bgp) – Mihai Alexandru Bîrsan Nov 02 '11 at 14:20
  • I think this may have been misleading as the page was broken as the user's total distance was huge. I have reset it now. – codecowboy Nov 03 '11 at 06:28
  • Turns out that I had forgotten to implement an IE css file which contains rules for the VML elements. Will your code work for VML paths do you think? – codecowboy Nov 29 '11 at 15:31
  • It could be adapted to work with VML elements. Show the VML source code when you have it available. – Mihai Alexandru Bîrsan Dec 01 '11 at 13:07
  • http://stackoverflow.com/questions/8314028/how-can-i-adapt-this-javascript-to-target-vml-objects-for-internet-explorer. – codecowboy Dec 01 '11 at 15:47
0

I highly recommend jquery_svg plugin. I've been using it and there are plenty of features, including animation, text on path, user interaction.

rubik
  • 43
  • 6
  • Thanks. However it seems that with all these libraries e.g Raphael and jquery svg, you can't access or animate anything which you didn't create using that library. Also, I would need to come up with something which works cross-browser. – codecowboy Aug 06 '11 at 05:18