AGSJS TOC control only one layer visible at a time

1255
8
Jump to solution
03-26-2014 09:08 AM
wadsonmakari
New Contributor III
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,
Reply
0 Kudos
1 Solution

Accepted Solutions
NianweiLiu
Occasional Contributor II

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

View solution in original post

Reply
0 Kudos
8 Replies
DavidColey
Regular Contributor III
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.
Reply
0 Kudos
JonathanUihlein
Regular Contributor II
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.
Reply
0 Kudos
wadsonmakari
New Contributor III
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,
Reply
0 Kudos
JonathanUihlein
Regular Contributor II
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.
Reply
0 Kudos
NianweiLiu
Occasional Contributor II

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

View solution in original post

Reply
0 Kudos
KenBuja
MVP Honored Contributor
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]);
  }
});
Reply
0 Kudos
wadsonmakari
New Contributor III
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,
Reply
0 Kudos
KenBuja
MVP Honored Contributor
Could you make an example in a Fiddle or JSBin to show this issue? I haven't experienced any problems
Reply
0 Kudos