I would like to group wms and vector layer together but with some constraints in openlayers. The requirement is, if lets say vector layer 1 is selected then its corresponding wms layer should also be visualized as the merged layer instead of showing two different overlays. I tried to load the wms layer by checking if vector layer is visible or not using changelayer event with evt.property === "visibility". Is there any way I can do the grouping without using events check? Thanks


You can use a visibilitychanged event listener to handle hide/show events. I have created a fiddle (based on this OL example) demonstrating a possible approach, together with an example datastructure to describe required and forbidden layers:


In the example above the zoning layer turns off the building layer whenever it is selected.Try playing with both layers to see the effect in action.

The data structure for expressing conditions could be like the following:

var conditions = { "zoning" : {"requires": [], "forbids": ["building"] } };

and the event listener code that you need to register with each layer:

var working=false;

function visChanged(o) {
if(working) return;

if(conditions[o.object.name]) {
    if(o.object.visibility) {
        var requires=conditions[o.object.name].requires;
        for(var i=0, l=requires.length;i<l;i++) {
        var forbids=conditions[o.object.name].forbids;
        for(var i=0, l=forbids.length;i<l;i++) {
    // add code to handle non vibile case

Note the global variable called working introduced to avoid infinite loops. Last, this is the event registration code snippet (here layer is a dummy variable, you will have to replace it with your own):


Please note that the solution does not handle the initial situation when both layers are on because it would have taken too much time (and left nothing for you to do ;-))

Disclaimer: the code was written quickyl as a POC and does little error checking, but should get you started on the right path.

| improve this answer | |

you have to customize the openlayers layerswitcher: - create a datastructure that contains the coupling between a master layer and a slave layer - create a method where you toggle a layer on or off. - add the following code to the onButtonClick method (i.e. the method that handles the click event): a) read the id of the layer that is being clicked b) fetch its slave layers c) for each slave layer, trigger a click event by calling the onButtonClick

| 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.