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>

[JonathanUihlein]

Hi Vince!

I need a bit more code context.
Can you recreate the issue using http://jsfiddle.net ?

Thanks!

[VincentAwino]

Hi Jonathan,

Thanks for your prompt response. I have buillt the code in JSFiddle.net. Please find the code here. http://jsfiddle.net/vince_awino/D3J8H/9/. Looking forward to your reply.

[GaneshSolai_Sambandam]

HI vince
Can you check your feature services are working.

http://192.168.1.234:6080/arcgis/rest/services/NIB/Ahero_Map_FeatureLayer/MapServer/4

can you go to the browser and type above url and see if you get to the rest end points of your feature service.
I checked on my browser it is not working.
it may be because of this.


Regards
Ganesh

[KenBuja · Accepted solution]

You have a problem with your require and the functions aliases.  You had arrayUtil and array in the function aliases, but only "dojo/_base/array" in the require.

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) {

Then in your code, you used array.forEach, which was where it was failing.

I created a new Fiddle with known services that works as expected

[VincentAwino]

Hello Ken,

Thank you very much for the previous assistance. I was able to generate the table of content through your assistance. One more thing please. I have created a measurement widget and have enabled Popup for identifying features. the problem is when I try to take measurements, the popup still comes up. I have tried ways of using a checkbox to enable and disable the popup according to the code here http://jsfiddle.net/vince_awino/D3J8H/15/ without success. it returns the error: TypeError: clickHandler is undefined, each time I click the checkbox. Please assist. Urgent !!! Thanks for the help.

[KenBuja]

Glad to help, Vincent. If your original question was answered, then please click the checkmark on the post that best answered your question. This will help others when searching on this topic.

As for your other question, take a look at this thread that shows how one person was able to disable the InfoWindow when using the Measurement Tool.

[LeiZhou]

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!

Glad to help, Vincent. If your original question was answered, then please click the checkmark on the post that best answered your question. This will help others when searching on this topic.

As for your other question, take a look at this thread that shows how one person was able to disable the InfoWindow when using the Measurement Tool.

[VincentAwino]

Glad to help, Vincent. If your original question was answered, then please click the checkmark on the post that best answered your question. This will help others when searching on this topic.

As for your other question, take a look at this thread that shows how one person was able to disable the InfoWindow when using the Measurement Tool.

Dear Ken,

I'm quit new to ArcGIS JavaScript API, so its a little difficult to follow the thread you sent me. could you get me a simple example where you use a PopupTemplate  and disable the Popup when using the Measurement widget. id greatly appreciate. thanks a lot. In case you need to check out my code view here http://jsfiddle.net/vince_awino/D3J8H/15/

[KenBuja]

Hi Vince,

I would suggest either continuing the discussion in that thread or starting a new thread for this question.