topic Re: ArcGIS JavaScript Table of Content (TOC checkboxes) in ArcGIS JavaScript Maps SDK Questions

ArcGIS JavaScript Table of Content (TOC checkboxes)

VincentAwino — Thu, 23 Jan 2014 13:29:16 GMT

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>

Re: ArcGIS JavaScript Table of Content (TOC checkboxes)

JonathanUihlein — Thu, 23 Jan 2014 13:43:51 GMT

Hi Vince!

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

Thanks!

Re: ArcGIS JavaScript Table of Content (TOC checkboxes)

VincentAwino — Fri, 24 Jan 2014 04:56:59 GMT

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.

Re: ArcGIS JavaScript Table of Content (TOC checkboxes)

GaneshSolai_Sambandam — Fri, 24 Jan 2014 13:37:41 GMT

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

Re: ArcGIS JavaScript Table of Content (TOC checkboxes)

KenBuja — Fri, 24 Jan 2014 14:46:34 GMT

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

Re: ArcGIS JavaScript Table of Content (TOC checkboxes)

VincentAwino — Mon, 03 Feb 2014 13:15:57 GMT

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.

Re: ArcGIS JavaScript Table of Content (TOC checkboxes)

KenBuja — Tue, 04 Feb 2014 15:13:10 GMT

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.

Re: ArcGIS JavaScript Table of Content (TOC checkboxes)

LeiZhou — Tue, 04 Feb 2014 20:28:18 GMT

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.

Re: ArcGIS JavaScript Table of Content (TOC checkboxes)

VincentAwino — Thu, 06 Feb 2014 05:23:33 GMT

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/

Re: ArcGIS JavaScript Table of Content (TOC checkboxes)

KenBuja — Thu, 06 Feb 2014 11:51:29 GMT

Hi Vince,

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

Re: ArcGIS JavaScript Table of Content (TOC checkboxes)

KenBuja — Thu, 06 Feb 2014 12:41:18 GMT

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

Re: ArcGIS JavaScript Table of Content (TOC checkboxes)

LeiZhou — Thu, 13 Feb 2014 12:57:47 GMT

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

Re: ArcGIS JavaScript Table of Content (TOC checkboxes)

PeggyCorey — Mon, 18 Aug 2014 15:51:32 GMT

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!

Re: ArcGIS JavaScript Table of Content (TOC checkboxes)

KenBuja — Mon, 18 Aug 2014 16:24:31 GMT

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