AGSJS TOC control only one layer visible at a time

[wadsonmakari]

Dear all,

I would like to change the behaviour of the agsjs TOC control so that only one layer is visible at any given time. If user clicks a layer to make it visible then the control should automatically uncheck the previous visible layer if any is visible.

Can someone advise on how best to achieve this?

Kind regards,

[DavidColey]

We are working on that behavior now and will let the community know if we find anything. Essentially the TOC code needs to change the visiblity of one layer based upon the visibility of another.

[JonathanUihlein]

You could modify the widget to emit an event when a layer is set to visible (and pass along the ID or reference to that layer).

Then you could set up a listener for that specific event, and hide all other layers based on that.

[wadsonmakari]

Thanks Jonathan,

Where is the best place to make this change? Do I need to change TOC.js. Can you provide a sample if possible. Sorry for asking too many questions, first time to use this control not sure where and how best to change its behaviour programmatically.

Cheers,

[JonathanUihlein]

I would generally try to avoid changing TOC.js because I would have to manually add these changes to any future updates to the TOC itself.

However, in this case, I think it would be easiest to modify TOC.js to fit your needs.

[NianweiLiu · Accepted solution]

only one layer is visible at any given time. If user clicks a layer to make it visible then the control should automatically uncheck the previous visible layer if any is visible.

A new 'toc-node-checked' event is added in the latest version. The event carries information about which root layer, service layer is checked, and whether its on/off, so your requirement can be simply:

toc.on('toc-node-checked', function(evt){ 
  if (evt.checked && evt.rootLayer && evt.serviceLayer){
// this basically tell the service only set the one layer clicked visible. TOC will automatically check off other layers. 
    evt.rootLayer.setVisibleLayers([evt.serviceLayer.id]) 
  } 
  } 
});

[KenBuja]

Nice addition! The one thing I noticed is that the layers that get turned off  automatically don't get closed like when you manually turn them off.

If you have several services in your TOC and want only one service to have this new capability, use the id of the service like this

toc.on('toc-node-checked', function (evt) {
  if (evt.checked && (evt.rootLayer.id === "theID") && evt.serviceLayer) {
    evt.rootLayer.setVisibleLayers([evt.serviceLayer.id]);
  }
});

[wadsonmakari]

Thanks both Ken and Nianwei,

Are you aware of any issues between versions of 2.08 and 2.09 of the TOC? The TOC works fine when I reference version 2.08 or earlier but does not work when I reference 2.09 or the latest versions (i.e. TOC does not load).

Is there anything that I need to watch out for when upgrading from 2.08 to 2.09/latest? I have wrapped the code that creates the TOC in a try catch block but it is not reporting any errors.

dojo.connect(map, 'onLayersAddResult', function (results) {

          layerInfo = dojo.map(results, function (layer, index) {
            
              return { layer: layer.layer, title: layer.layer.name, collapsed: true, slider: true, visible: false };

          });
          if (layerInfo.length > 0) {
             // alert(layerInfo.length);
             // alert("here");
             // alert(layerInfo[0].layer.id);
              try {
                  standardTOC = new agsjs.dijit.TOC({
                      map: map,
                      layerInfos: layerInfo
                  }, 'legendDiv');

                  standardTOC.startup();

                  appCamsService.setVisibleLayers([0, 1]);

                  //                  standardTOC.on('toc-node-checked', function (evt) {
                  //                      if (evt.checked && evt.rootLayer && evt.serviceLayer) {
                  //                          // this basically tell the service only set the one layer clicked visible. TOC will automatically check off other layers.
                  //                          evt.rootLayer.setVisibleLayers([evt.serviceLayer.id])
                  //                          //alert(evt.rootLayer.id);

                  //                      }

                  //                      //standardTOC.refresh();
                  //                  });

              } catch (e) {

                  alert(e);
              }


          }


      });

Have you seen this issue before?

Regards,

[KenBuja]

Could you make an example in a Fiddle or JSBin to show this issue? I haven't experienced any problems