Map with Animated Lines
Connecting points on a map is a typical way to display relationships between these points. When you want to display the direction of that relationship you can either use arrows, like in the Maps with Curved Lines demo, or you can use animation like we are doing here.
Key implementation details
We setup our regular static MapLineSeries
to act as our guides and set strokeOpacity
on them to 0
(they are only used as guides). Then we add bullets based on our cities (again, invisible) using MapPointSeries
. Finally, we animate these bullets along their respective lines and use those bullet positions as end-point data items for our animated lines.