topic Re: AGSJS TOC control only one layer visible at a time in ArcGIS JavaScript Maps SDK Questions

AGSJS TOC control only one layer visible at a time

wadsonmakari — Wed, 26 Mar 2014 16:08:04 GMT

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,

Re: AGSJS TOC control only one layer visible at a time

DavidColey — Wed, 26 Mar 2014 18:48:31 GMT

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.

Re: AGSJS TOC control only one layer visible at a time

JonathanUihlein — Wed, 26 Mar 2014 21:40:51 GMT

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.

Re: AGSJS TOC control only one layer visible at a time

wadsonmakari — Mon, 31 Mar 2014 13:12:56 GMT

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,

Re: AGSJS TOC control only one layer visible at a time

JonathanUihlein — Tue, 01 Apr 2014 19:51:14 GMT

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.

Re: AGSJS TOC control only one layer visible at a time

NianweiLiu — Sat, 11 Dec 2021 07:52:56 GMT

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

Re: AGSJS TOC control only one layer visible at a time

KenBuja — Sat, 11 Dec 2021 07:52:59 GMT

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

Re: AGSJS TOC control only one layer visible at a time

wadsonmakari — Mon, 07 Apr 2014 13:49:34 GMT

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,

Re: AGSJS TOC control only one layer visible at a time

KenBuja — Mon, 07 Apr 2014 14:00:35 GMT

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