Return to Question

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.

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.

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.

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.

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.

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?

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.

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.

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 new canvas to the map:

var pane = map.createPane('flow');
var flowCanvas = document.createElement('canvas');
pane.appendChild(flowCanvas);

I have it working in OL drawing the animation 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?

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.

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?