topic Re: Nilu's TOC - collapsible property for layers not working. in ArcGIS JavaScript Maps SDK Questions

RE: Nilu's TOC - collapsible property for layers not working.

GaneshSolai_Sambandam — Tue, 14 Jan 2014 18:20:56 GMT

Hi Nilu, I need a help from you. Our organization Web mapping application is hosted on ArcGIS online server and it uses the webmap id from ARCGIS.com and all our dynamic layers are referenced via this webmap id. We have a function in the application which adds legends and layers using agsjs TOC. The problem is, I want to set this collapsible property of all layerinfos to true. Even though, I set this property to true, it is not collapsible. Can you fix this one or give some idea what would be the problem in my code. Here is my code below.

function addLegend(layerInfo) { var legendTb = new dijit.form.ToggleButton({ showLabel: true, label: i18n.tools.legend.label, title: i18n.tools.legend.title, checked: true, iconClass: 'esriLegendIcon', id: 'legendButton' }, dojo.create('div')); dojo.byId('webmap-toolbar-left').appendChild(legendTb.domNode); dojo.connect(legendTb, 'onClick', function () { navigateStack('legendPanel'); }); var legendCp = new dijit.layout.ContentPane({ title: i18n.tools.legend.title, selected: true, region: 'center', id: "legendPanel" }); dijit.byId('stackContainer').addChild(legendCp); dojo.addClass(dojo.byId('legendPanel'), 'panel_content'); var legendDijit = new agsjs.dijit.TOC({ map: map, layerInfos: layerInfo, collapsed: true, // slider: true }, dojo.create('div')); dojo.byId('legendPanel').appendChild(legendDijit.domNode); navigateStack('legendPanel'); if (dojo.isIE === 8) { setTimeout(function () { legendDijit.startup(); }, 100); } else { legendDijit.startup(); } }

Re: Nilu's TOC - collapsible property for layers not working.

GaneshSolai_Sambandam — Fri, 10 Dec 2021 21:33:59 GMT

function addLegend(layerInfo) { var legendTb = new dijit.form.ToggleButton({ showLabel: true, label: i18n.tools.legend.label, title: i18n.tools.legend.title, checked: true, iconClass: 'esriLegendIcon', id: 'legendButton' }, dojo.create('div')); dojo.byId('webmap-toolbar-left').appendChild(legendTb.domNode); dojo.connect(legendTb, 'onClick', function () { navigateStack('legendPanel'); }); var legendCp = new dijit.layout.ContentPane({ title: i18n.tools.legend.title, selected: true, region: 'center', id: "legendPanel" }); dijit.byId('stackContainer').addChild(legendCp); dojo.addClass(dojo.byId('legendPanel'), 'panel_content'); var legendDijit = new agsjs.dijit.TOC({ map: map, layerInfos: layerInfo, collapsed: true, // slider: true }, dojo.create('div')); dojo.byId('legendPanel').appendChild(legendDijit.domNode); navigateStack('legendPanel'); if (dojo.isIE === 8) { setTimeout(function () { legendDijit.startup(); }, 100); } else { legendDijit.startup(); } }

Can anyone look into my code and see where I am committing mistakes

Regards
Ganesh

Re: Nilu's TOC - collapsible property for layers not working.

JonathanUihlein — Fri, 10 Dec 2021 21:34:02 GMT

function addLegend(layerInfo) { var legendTb = new dijit.form.ToggleButton({ showLabel: true, label: i18n.tools.legend.label, title: i18n.tools.legend.title, checked: true, iconClass: 'esriLegendIcon', id: 'legendButton' }, dojo.create('div')); dojo.byId('webmap-toolbar-left').appendChild(legendTb.domNode); dojo.connect(legendTb, 'onClick', function () { navigateStack('legendPanel'); }); var legendCp = new dijit.layout.ContentPane({ title: i18n.tools.legend.title, selected: true, region: 'center', id: "legendPanel" }); dijit.byId('stackContainer').addChild(legendCp); dojo.addClass(dojo.byId('legendPanel'), 'panel_content'); var legendDijit = new agsjs.dijit.TOC({ map: map, layerInfos: layerInfo, collapsed: true, // slider: true }, dojo.create('div')); dojo.byId('legendPanel').appendChild(legendDijit.domNode); navigateStack('legendPanel'); if (dojo.isIE === 8) { setTimeout(function () { legendDijit.startup(); }, 100); } else { legendDijit.startup(); } }

Can anyone look into my code and see where I am committing mistakes

Regards
Ganesh

Hi Genash,

Can you recreate your issue using http://jsfiddle.net/ ?

Also, remove the trailing comma:

var legendDijit = new agsjs.dijit.TOC({ 
   map: map, 
   layerInfos: layerInfo,  
   collapsed: true, 
   // slider: true 
}, dojo.create('div'));

var legendDijit = new agsjs.dijit.TOC({ 
   map: map, 
   layerInfos: layerInfo,  
   collapsed: true
}, dojo.create('div'));

With that said, have you used any tools like jshint or jslint to clean up your code?
They are incredibly powerful!

*edit

Looking at Nliu's documentation:

toc = new TOC({    
   map: map,    
   layerInfos: [{       
      layer: featLayer1,       
      title: "FeatureLayer1"    
   }, {      
      layer: dynaLayer1,       
      title: "DynamicMapServiceLayer1"       
      //collapsed: false, 
      // whether this root layer should be collapsed initially, default false.       
      //slider: false // whether to display a transparency slider.    
   }] 
}, 'tocDiv');

I've never used Nliu's TOC widget but hope this helps. I found this from reading his documentation.

Re: Nilu's TOC - collapsible property for layers not working.

GaneshSolai_Sambandam — Wed, 22 Jan 2014 08:23:04 GMT

HI Jon,
Thank you very much and I really appreciate your support.
Before, posting here, I read the Nilu' documentation and tried setting the collapsible property true , but this doesn't work and I also tried removed the trailing comma, but it is not working.

var legendDijit = new agsjs.dijit.TOC({
   map: map,
   layerInfos: layerInfo,
   collapsed: true
   // slider: true
}, dojo.create('div'));

The problem is the "layerInfo" is getting the list of layers from webmapid, like this below.

var layerInfo =response.itemInfo.itemData.operationalLayers;

Although, the layerInfo is an array and all the sublayers within the layerInfo is visible, it is expanding by defualt on to the Nilu's TOC
widget on the map.

what I wanted to is to make the sublayers visibility to set to off, so when it is not visible, i think as per Nilu' Toc documentation, it should allow us to collapse. I don't know how to turn off sublayer visibility. If there is any code, can you send them.

Secondly, on the eg. code given on the Nilu's TOC and by you below, "layerInfos" collpasible property is to true or false for each individual layers on the arrary of layerInfo,
toc = new TOC({
   map: map,
   layerInfos: [{
      layer: featLayer1,
      title: "FeatureLayer1"
   }, {
      layer: dynaLayer1,
      title: "DynamicMapServiceLayer1"
      //collapsed: false,
      // whether this root layer should be collapsed initially, default false.
      //slider: false // whether to display a transparency slider.
   }]
}, 'tocDiv');

where as in our case, we have defined the collapsible property is set outside of the array of layerInfo and therefore it is not working.

var legendDijit = new agsjs.dijit.TOC({
   map: map,
   layerInfos: layerInfo,
   collapsed: true
   // slider: true
}, dojo.create('div'));

Any help, would be much appreciatd.
Thanks.
Ganesh

Re: Nilu's TOC - collapsible property for layers not working.

GaneshSolai_Sambandam — Thu, 23 Jan 2014 07:58:57 GMT

Hi Guys

I wanted to collapse all of my sublayers within the rootNode which has more than 10 sublayers.

Since, the layerInfo property has got many root nodes and each rootnode has got many sublayers, and I tried to the iterate array like this.
function addLegend(layerInfo) {

var layerlist = dojo.forEach(layerInfo, function(layer){

return(layer:layer.layer, title:layer.layer.name, collapsed: true);

});

var legendDijit = new agsjs.dijit.TOC({
   map: map,
   layerInfos: layerlist
// collapsed: true
   // slider: true
}, dojo.create('div'));

legendDijit.startup();

}

But, this doesn't work, can you anyone look into my code and tell where the problem is. I think, the problem is with iterating the array.

Please note "layerInfo" parmaeter passed in the function addLegend(layerInfo) is getting the layers from

var layerInfo = esri.arcgis.utils.getLegendLayers(response);

thanks.

Ganesh