Currently I'm developing a WebGIS app using OpenLayers 2.13.1, GeoServer, and PostGIS. The app has buffer analysis feature which is working fine like the picture below.


What I'm looking for is: is there a 'color blend' mode (or creating one) for the vector feature in OL?

Like 'multiply' or 'overlay', such as those in image editing software. The feature style properties in OL (of course) only allow me to set the fillOpacity to max. value of 1 (100% / opaque). Thus will only result like the picture above.

What I want is the more amount of overlaying features the darker the color will be, so that it's easier to see the density of the buffer result. That's why, I guess 'color-blend' mode should solve my problem. I've searched over the internet but didn't get what I want.

Maybe someone here might have some clue on how to do that?

Or is that even possible to do?

Any other approaches to achieve the same goal besides 'color-blend' would be fine too.


After searching a little deeper, I just remembered that vector layer in OL is drawn on canvas. So it's easier to work with since HTML5 canvas has the 'color-blend' property called globalCompositeOperation.

//First get the DOM Element of the layer   
var div = document.getElementById(buffer_layer.id);

//Then get the canvas element;
//it returns an array, so we will take the first index only
var canvas = div.getElementsByTagName("canvas")[0];
var context = canvas.getContext("2d");

//Now set the blending mode
context.globalCompositeOperation = "blending_mode";

//blending mode can be replaced with normal | multiply | screen | overlay | darken |
//lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | 
//hue | saturation | color | luminosity

Finally, I get this picture with "color-dodge" applied:

buffer with color-dodge

I hope this will be useful for those who face the same problem.


| improve this answer | |
  • I can do this for the whole map (and therefore apply it to all layers at once) but is there a way to do it only for particular layers, or ideally for particular features/styles? – tremby Mar 22 '15 at 22:59
  • Hi @tremby , the answer I posted above should be applied to only one layer. I honestly don't have any idea how you could apply it to all layers at once. So, the div variable is the vector layer that OL generates; we can access the div id by accessing it's 'id' parameter (vector_layer.id) -> see doc(dev.openlayers.org/releases/OpenLayers-2.10/doc/apidocs/files/…) . Therefore we only get 1 div, thus, 1 layer. I think it's not possible to do this for particular features, since this method is layer-dependent. hope this helps. :) – ariespranata Mar 24 '15 at 22:04
  • I only have one canvas element on the whole page. Not one for each layer. I didn't notice until now that you're on OL2. I'm on OL3 -- I guess that's why we see different things. So when I apply the blend mode to my canvas it affects the entire map. I've opened a feature request for OL3 at github.com/openlayers/ol3/issues/3379 – tremby Mar 24 '15 at 22:21
  • I see, hehe.. In OL2, the vector layer generated has 1 canvas in its each div. I don't know how it works in OL3, because I haven't tried that. OK, good luck with that, sorry for not helping much :) – ariespranata Mar 25 '15 at 2:45

For anybody stumbling upon this, here is an example for using blend modes in OpenLayers 3 without any hacks.

| improve this answer | |

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.