nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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,

Find more posts tagged with

Accepted answers

NianweiLiu

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

All comments

kenbuja

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

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

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

NianweiLiu

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.

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

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.

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

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.

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.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.