Curved line animation does not follow the direction as per lat/lon coordinates.

[digrich]

I am trying to draw (animate) a curved line on a map by giving 3 points coordinates but it seems it always draws a curve line from right to left. When I make it straight, it follows the correct sequence of coordinates.

I am trying to animate a curved line between 3 coordinates (moving from 1st -> 2nd -> 3rd) as it is in an airplane example. It works perfectly fine with a straight line but it's completely broken with a curved line.

[martynasma]

Hi there,

Do you have an example of the behavior?

By design, it should animate in the direction of the sequence of the lat/long coordinates.

Here's an example:

https://codepen.io/team/amcharts/pen/9fbb0c4fa15d4e9da10711463e4a6128?editors=0010

It has two lines with the same start/end coordinates, with planes animating along them. The difference is only that start and end coordinates are flipped in both lines, which reverses the direction of animation.

[digrich]

Hi martynasma, Thanks for quick response. I am trying to animate the line itself not the image(plane) along the line. When it starts drawing the curved line, it always starts from right-hand side coordinates, while in case of a straight line, it goes as per the coordinates sequence.

I will try to put the example also.

[martynasma]

Oh OK. So are you using CSS to animate the line?

CSS animations are applied differently. They will work from left to right. So if you want to reverse the animation, you'd need to modify animation parameters.

[digrich]

Yes, I am using css to animate the line. Is there a way to do without CSS? I actually want to animate the line to hop on multiple coordinates given to its lon/lat arrays in a sequence.

[martynasma]

Hm, no I'm afraid. There are no built-in animation options of the line itself. Only possible with CSS.

[digrich]

@martynasma here is the example, I was trying to explain. https://codepen.io/dig_rich/pen/KXPPWQ It draws a straight line from Washington --> London --> Singapore. If we uncomment the 'line.arc' within drawLines() function, it does not follow the same path and draws two line separately from left to right.

[martynasma]

This is because with straight line, it draws a single path object for the whole multi-section line.

There's no multi-section arc element in SVG, so it creates multiple elements for each segment, hence animation being applied to each segment individually.

The only workaround I can think of is to apply differently timed animations for each segment using CSS.

I know it's inconvenient, but it could be done.

[digrich]

Thanks for the detail explanation, getting few more questions now.

If we see MoveTo (M) coordinates of both paths, the straight line starts from right coordinates as per path direction whereas the first segment of arc path starts from middle coordinates and end on the first coordinates and the second segment starts from third coordinates and end on middle one.

Don't you think, MoveTo (M) coordinates of arc segments should start or follow the coordinates sequence as we mention in line object? I was expecting, the first segment would start from Washington and end on London and second would start from London and end on Singapore because that's the way coordinates are defined to line object.

Arc Path M 186.748 25.7046 A 217.531 217.531 0 0 0 102.012 45.4786 M 301.321 90.4971 A 329.063 329.063 0 0 0 186.748 25.7046

Straight Line Path M 102.012 45.4786 L 186.748 25.7046 L 301.321 90.4971

[martynasma]

Thanks for additional details.

Yes, we had a closer discussion with the team, and we think we might able to fix this on our end.

I've set up internal TODO list item. While I can't provide ETA on the fix, we will definitely make a stab at including it in the next release. (hopefully within week or two)

Will keep you posted here.

Thank you for your patience!

[digrich]

Thanks @martynasma.

[digrich]

@martynasma - Any tentative plan, when this fix is getting released?

[martynasma]

Sorry, not yet. I might be able to provide an ETA (if not fix) at some point next week.

[martynasma]

Looks like I forgot to notify you. This should have been fixed in the latest version.

[digrich]

Thanks, I will test it out.

On Mon, Nov 20, 2017 at 7:24 AM, Martynas Majeris notifications@github.com wrote:

Looks like I forgot to notify you. This should have been fixed in the latest version.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/amcharts/ammap3/issues/21#issuecomment-345727988, or mute the thread https://github.com/notifications/unsubscribe-auth/AJAIvIVuZsMEjnDc290EUVL7TJGL2GYaks5s4ZmRgaJpZM4PSf9z .