Display Radio Buttons at Mosaic Dataset Level in LayerList Widget?

[Gianna_BBSRC]

Hello, 

I'd like some checkboxes to act as radio buttons (ie with mutually exclusive viewing functionality) in the LayerList Widget at the mosaic dataset level and nowhere else.

I've managed to hide the checkboxes for group layers and make children sublayers mutually exclusive (where I've also posted this question).

The problem I'm facing is that I'm dealing with mosaic raster time-series data displayed different scenarios which are mutually exclusive (ie I don't want them displayed at the same time on top of each other). Additionally, within each mosaic dataset are three folders (boundary, footprint and image) which I'd like to hid from the end user. So I've managed to achieve this in WAB developer (with checkboxes shown acting as radio buttons):

But the only checkboxes I'd like to display should be at the mosaic dataset level (layer 2 and 3 in example) with boundary, footprint and image layers all ON but hidden AND I'd like those checkboxes to act like radio buttons with mutually exclusive viewing functionality, as below.

Any advice on how to achieve this will be much appreciated.

Many thanks,

Gianna

[Gianna_BBSRC · Accepted solution]

So I've solved my own problems thanks to past posts by Robert Scheitlin, GISP and Mehretab T.Sium.

Here's the solution to the mutual exclusivity problem (input in the LayerListView.js at _onCkSelectNodeClick):

_onCkSelectNodeClick: function(layerInfo, ckSelect, evt) {
 if (ckSelect.checked) {
  layerInfo.setTopLayerVisible(true);

  if (layerInfo.id === 'LayerID1') {

this.layerListWidget.operLayerInfos.getLayerInfoById('LayerID2').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('LayerID3').setTopLayerVisible(false);
}

  if (layerInfo.id === 'LayerID2') {

this.layerListWidget.operLayerInfos.getLayerInfoById('LayerID1').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('LayerID3').setTopLayerVisible(false);
}

  if (layerInfo.id === 'LayerID3') {

this.layerListWidget.operLayerInfos.getLayerInfoById('LayerID1').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('LayerID2').setTopLayerVisible(false);
}}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

else {
    layerInfo.setTopLayerVisible(false);
  }
  evt.stopPropagation();
},‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I repeated this code with a total 24 layers, creating a loong clunky string of combinations but it does what I want it to do, particularly between groups, so Thank You Mehretab from this post.

To remove certain checkboxes, I found the checkbox ID using Inspect Element in Chrome and inserted a bit of CSS into the style.css code. For example:

#jimu_dijit_CheckBox_1 {
  display: none;
}‍‍‍‍‍‍‍‍‍

[Mehretab]

It has been long since I posted the code and never revisited it, but it is nice to know it helped .

you are right it is a bit of repeating the same code again and again. Here is a shorter and a little flexible version of it. It is meant to hide all but the specified ID:

It worked on my side hopeful it will work for you.

_onCkSelectNodeClick: function(layerInfo, ckSelect, evt) {

      if (ckSelect.checked) {
        //layerInfo.setTopLayerVisible(true);
        this.operLayerInfos.getLayerInfoArray().forEach(function(layerInfo) {
        
          // console.log(this.map.LayerInfo);
          if (layerInfo.id !== "10") {
            layerInfo.setTopLayerVisible(false);
          }
          if (layerInfo.id !== "12") {
            layerInfo.setTopLayerVisible(false);
          }
          if (layerInfo.id !== "13") {
            layerInfo.setTopLayerVisible(false);
          }
          if (layerInfo.id !== "14") {
            layerInfo.setTopLayerVisible(false);
          }
          if (layerInfo.id !== "15") {
            layerInfo.setTopLayerVisible(false);
          }
        });
        layerInfo.setTopLayerVisible(true);

      } else {
        layerInfo.setTopLayerVisible(false);
      }
      evt.stopPropagation();
    },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Thanks again  Robert Scheitlin, GISP‌ for the original hint.

cheers!