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

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>

Find more posts tagged with

Accepted answers

kenbuja

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

All comments

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

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!

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

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

kenbuja

Hi Vince,

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

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/

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.

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.

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

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

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

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.

JonathanUihlein

Hi Vince!

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

Thanks!

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.