Esri JS Templates - using radio buttons rather than checkboxes for layer visibility

NatalieScott1

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.

kenbuja

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;
        }
    }

});