[GIS] How to make the Overlays in OpenLayers exclusives using events at checkbox level

openlayers-2

On my map I have 3 overlay layers, all of which need to be mutually exclusives, i.e. can't be on (checked) at the same time. I thought of using events to trigger the overlays as the following in my index.html main file:

function init(){ 
 var map, kml_1Layer, kml_2Layer, kml_3Layer; 
...
kml_1Layer.events.register("visibilitychanged", this, layerChanged);
kml_2Layer.events.register("visibilitychanged", this, layerChanged);
kml_3Layer.events.register("visibilitychanged", this, layerChanged); 
...
}

function layerChanged(layer) {
     if (layer.object.visibility) {
     switch (layer.object.name) {
        case "kml_1Layer":
              kml_2Layer.setVisibility(false);
              kml_3Layer.setVisibility(false);
              break;
        case "kml_2Layer":
              kml_1Layer.setVisibility(false);
              kml_3Layer.setVisibility(false);
              break;
        case "kml_3Layer":
              kml_1Layer.setVisibility(false);
              kml_2Layer.setVisibility(false);
              break;
     }
  }
}

You can see the web site here: http://genepoulin.net/geo/index.html
Obviously the events are not triggered.

What am I missing here?

UPDATED and Resolved…

Corrected code (I was wrongly naming the switch cases):

function init(){ 
 var map, kml_1Layer, kml_2Layer, kml_3Layer; 
...
kml_1Layer.events.register("visibilitychanged", kml_1Layer, layerChanged);
kml_2Layer.events.register("visibilitychanged", kml_2Layer, layerChanged);
kml_3Layer.events.register("visibilitychanged", kml_3Layer, layerChanged); 
...
}

function layerChanged(layer) {
     if (layer.object.visibility) {
     switch (layer.object.name) {
        case "*given label of layer1*":
              kml_2Layer.setVisibility(false);
              kml_3Layer.setVisibility(false);
              break;
        case "*given label of layer2*":
              kml_1Layer.setVisibility(false);
              kml_3Layer.setVisibility(false);
              break;
        case "*given label of layer3*":
              kml_1Layer.setVisibility(false);
              kml_2Layer.setVisibility(false);
              break;
     }
  }
}

You can see the result on my page.

Best Answer

Hope it helps, I could not test it since out of office. This should be easier to maintain.

var radioLayer = [ kml_1Layer, kml_2Layer, kml_3Layer ];
var layerChanged = function( evt )
{
  var rList = this;
  if ( !evt.object.getVisibility() )
    return; // layer has been hidden, do not need check others
  for ( i = 0; i < rList.length; i++ )
    if ( rList[i] != evt.object )
      rList[i].setVisibility( false );
}

for ( i = 0; i < radioLayer.length; i++ )
  radioLayer[i].events.register( 'visibilitychanged', radioLayer, layerChanged );
Related Question