• Open in:

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.

Related tutorials

Demo source