Hi,
I need to set up a template (such as this one) where some layer visibility is controlled by simple on/off switches (ie a checkbox - this is the default), but the visibility of certain layer pairs are held in an either-or state (ie a radio button - you turn layer B on and layer A turns off automatically, so you can never view them both at the same time).
There would probably be a mix of checkboxes and radio buttons in the layer list - so in the following, I can choose to see either, both or neither or Layer A and Layer B, but can only ever see one of Layer C and Layer D at a time.
Has anyone found a way to do this using the code in a template? I'm not locked into using a particular template as this is a request I get for a lot of different situations.
What I've done is use Nianwei Liu's TOC widget, which contains the event "toc-node-checked". This allows you to set layers that will act like a radio button when turned on (turning off other layers). I have also been able to set up layers (an array of layerIDs, such as [0, 1, 2], called benthicLayers in the code below) within the same service (layerBenthic) that can remain on when manipulating the "radio button" layers.
toc.on('toc-node-checked', function (evt) { var isBoundary = false; if (evt.checked && evt.rootLayer && evt.serviceLayer && evt.rootLayer === layerBenthic) { arrayUtils.forEach(boundaryLayers, function (item, i) { if (evt.serviceLayer.id === item) { isBoundary = true; } }); if (!evt.serviceLayer.subLayerIds) { layerBenthicID = evt.rootLayer.visibleLayers; if (!isBoundary) { arrayUtils.forEach(evt.rootLayer.visibleLayers, function (layer) { var removeLayer = true; arrayUtils.forEach(boundaryLayers, function (item, i) { if (layer === item) { removeLayer = false; } }); if (evt.serviceLayer.id === layer) { removeLayer = false; } if (removeLayer) { var j = arrayUtils.indexOf(layerBenthicID, layer); if (j !== -1) { layerBenthicID.splice(j, 1); } } }); } evt.rootLayer.setVisibleLayers(layerBenthicID); } else { evt.rootLayer.setVisibleLayers(layerBenthicID); } } else if (!evt.checked && evt.rootLayer && evt.serviceLayer && evt.rootLayer === layerBenthic) { if (!evt.serviceLayer.subLayerIds) { layerBenthicID = evt.rootLayer.visibleLayers; } } });