ArcGIS JavaScript Table of Content (TOC checkboxes)

[VincentAwino]

Please help, everything else is working well, but the checkboxes for the table of content are not displaying. what I'm I doing wrong? im trying to follow the sample code in this link here but with AMD. please help. the code is as shown below.

<script>  require(    [ "dojo/parser", "dijit/layout/BorderContainer",      "dijit/layout/ContentPane",      "dijit/layout/AccordionContainer", "esri/map",      "esri/dijit/BasemapToggle", "esri/layers/FeatureLayer",      "dojo/on", "esri/dijit/Legend", "dojo/_base/array",      "dijit/form/CheckBox", "dojo/dom-construct",      "dojo/domReady!" ],    function(parser, BorderContainer, ContentPane, AccordionContainer,      Map, BasemapToggle, FeatureLayer, on, Legend, arrayUtils,      array, CheckBox, domConstruct) {     parser.parse();     //Add Basemap     var map = new Map("map", {      sliderOrientation : "horizontal",      center : [ 34.942, -0.143 ],      zoom : 14,      basemap : "osm",     });     //toggle Basemap     var toggle = new BasemapToggle({      map : map,      basemap : "satellite"     }, "BasemapToggle");     toggle.startup();     //Add layer     var schemeBoundary = new FeatureLayer(       "http://192.168.1.234:6080/arcgis/rest/services/NIB/Ahero_Map_FeatureLayer/MapServer/10",       {        mode : FeatureLayer.MODE_ONDEMAND,        outFields : [ "*" ]       });     var settlement = new FeatureLayer(       "http://192.168.1.234:6080/arcgis/rest/services/NIB/Ahero_Map_FeatureLayer/MapServer/7",       {        mode : FeatureLayer.MODE_ONDEMAND,        outFields : [ "*" ]       });     var emptyParcel = new FeatureLayer(       "http://192.168.1.234:6080/arcgis/rest/services/NIB/Ahero_Map_FeatureLayer/MapServer/6",       {        mode : FeatureLayer.MODE_ONDEMAND,        outFields : [ "*" ]       });     var parcels = new FeatureLayer(       "http://192.168.1.234:6080/arcgis/rest/services/NIB/Ahero_Map_FeatureLayer/MapServer/5",       {        mode : FeatureLayer.MODE_ONDEMAND,        outFields : [ "*" ]       });     var irrigationBlock = new FeatureLayer(       "http://192.168.1.234:6080/arcgis/rest/services/NIB/Ahero_Map_FeatureLayer/MapServer/4",       {        mode : FeatureLayer.MODE_ONDEMAND,        outFields : [ "*" ]       });     var buildings = new FeatureLayer(       "http://192.168.1.234:6080/arcgis/rest/services/NIB/Ahero_Map_FeatureLayer/MapServer/3",       {        mode : FeatureLayer.MODE_ONDEMAND,        outFields : [ "*" ]       });     var river = new FeatureLayer(       "http://192.168.1.234:6080/arcgis/rest/services/NIB/Ahero_Map_FeatureLayer/MapServer/2",       {        mode : FeatureLayer.MODE_ONDEMAND,        outFields : [ "*" ]       });     var road = new FeatureLayer(       "http://192.168.1.234:6080/arcgis/rest/services/NIB/Ahero_Map_FeatureLayer/MapServer/1",       {        mode : FeatureLayer.MODE_ONDEMAND,        outFields : [ "*" ]       });     var canal = new FeatureLayer(       "http://192.168.1.234:6080/arcgis/rest/services/NIB/Ahero_Map_FeatureLayer/MapServer/0",       {        mode : FeatureLayer.MODE_ONDEMAND,        outFields : [ "*" ]       });     //add the legend     map.on("layers-add-result", function(evt) {      var layerInfo = arrayUtils.map(evt.layers, function(layer,        index) {       return {        layer : layer.layer,        title : layer.layer.name       };      });      if (layerInfo.length > 0) {       var legendDijit = new Legend({        map : map,        layerInfos : layerInfo       }, "legendDiv");       legendDijit.startup();      }      //add check boxes       array.forEach(layerInfo,        function(layer) {         var layerName = layer.title;         var checkBox = new CheckBox({          name : "checkBox" + layer.layer.id,          value : layer.layer.id,          checked : layer.layer.visible,          onChange : function(evt) {           var clayer = map.getLayer(this.value);           clayer.setVisibility(!clayer.visible);           this.checked = clayer.visible;          }         });         //add the check box and label to the TOC         domConstruct.place(checkBox.domNode, "toggle",           "after");         var checkLabel = domConstruct.create('label', {          'for' : checkBox.name,          innerHTML : layerName         }, checkBox.domNode, "after");         domConstruct.place("<br />", checkLabel,           "after");        });     });     map.addLayers([ schemeBoundary, settlement, emptyParcel,         parcels, irrigationBlock, buildings, river,         road, canal ]);    }); </script>

[KenBuja]

Your info is really very very helpful! I just have one question: when I tried to use ArcGISDynamicLayer, instead of FeatureLayer, the label of the checkbox is always 'undefined'.  Is there anyway we can let Dynamic layer's label to display for the checkbox? Thanks a lot!

I've updated the sample to use an ArcGISDynamicLayer and it shows the label properly. It might show undefined if the service is not up and running, however. For example, look at Vince's latest Fiddle. Since the services he is using are not public, they will show up as undefined (eventually).

[PeggyCorey]

Ken,

Can you please supply the whole URL to your updated sample in a new post, as I am having much difficulty understanding things without being able to click on these in-line links, since the links no loner function in the new forums page.

Thanks so much!

[KenBuja]

Hi Peggy,

Unfortunately, I cannot locate this Fiddle. It's not showing up in the list of Fiddles I've created.

It's a real loss to have all these links turning out to be useless in the GeoNet!

Ken

[LeiZhou]

Hi,

I did not quiet understand this.  When quakeLayer is ArcGISDynamicMapServiceLayer, the label is always 'undefined'.  You mean it should be label properly? Thanks a lot!

I've updated the sample to use an ArcGISDynamicLayer and it shows the label properly. It might show undefined if the service is not up and running, however. For example, look at Vince's latest Fiddle. Since the services he is using are not public, they will show up as undefined (eventually).