How can I draw an animated line which illustrates flow between two points via OpenLayers?

Question

I need to be able to illustrate water flowing from one point to another.

I have been trying to design a line similar to the progress bar from Bootstrap (https://getbootstrap.com/docs/4.3/components/progress/#animated-stripes) without luck. I have researched for quite a while and not able to find a way or extension which were able to solve my problem.

I am therefore asking an OpenLayers export for help.

Answer 1

You can do this by setting the line styles up in the following manner:

1. Draw a solid stroke/line
2. Draw a dashed stroke/line over the top with a smaller width
3. On a timer, increment the lineDashOffset of the dashed line, which will give an animation effect

Example here: https://stackblitz.com/edit/ol-line-animation