I want to implement an animation of flowing rivers on top of an Openlayers map. My doubts are if I simply should make a new canvas and position it on top of the map or if there is a more elegant way using a OL layer?

What I try to do is similar to this example using Leaflet. This animation is done using canvas lineTo() function with an interval and works with pixel coordinates drawn on a second canvas. Leaflet offers map.createPane() function which then handles the positioning for you and allows you to link a second canvas to the map.

enter image description here

I have the animation working in OL (jsfiddle) drawing it directly on the map canvas. The problem now is that I have to set the canvas globalAlpha property to simulate the trail effect which makes all other layers disappear. Another possibility would be to draw a semitransparent rectangle over the whole canvas, with the same negative effect of making disappear everything else on this canvas:

context.fillStyle = 'rgba(255, 255, 255, 0.1)';
context.fillRect(0, 0, canvas.width, canvas.height);

I could get it working positioning a new canvas on top of the map, but then I would have to handle all the interactions by myself.

So does there exist something similar to Leaflets map.createPane() function or any other possibility to use a second canvas linked to the same map?

PS: just to make it clear, I want something like that.

PPS: There is a new OL plugin based on windjs which looks really promising.


Have you give ol-ext a try? They have a lot of cool stuff you can do on the map and this way you won't require an additional canvas or transparent layers.

The closest thing I can see they have that might work for you is this one here.

  • Actually this one is technically more close what I want to do. I use a control for the animation, but can't manage to make the trail effect happen. What this example shows is the combination of postcompose event and render function. So based on this example it should be possible to make the desired effect.
    – geraldo
    Jan 21 '18 at 20:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.