topic Re: Dynamically create layer list in ArcGIS JavaScript Maps SDK Questions

Dynamically create layer list

MeghanRyan — Wed, 18 May 2011 17:24:23 GMT

I am new to JavaScript. I am using the provided Base Map: AzureTwitter. I would like to add in the code for dynamically creating the layer lists. I found the thread link below with the coding to add in. However I am not sure how to incorporate this code into my existing index.html and layout.js, as the code in the link below is all shown in one file.

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/map_dynamiclayerlist.html

My questions:
How do I add the code.
Where do I put in the link to my dynamic layer list

Below is the layer code.. I know I change the address.. but do I put in my unique ArcGIS Map ID in that line or a http address that is provided to me in my map settings.

layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer");

Is there additional code I need to add to my javascript layout to call the layers into my index file?

Thank you for your help. I have no prior experience with Java.. only using CSS coding, html, and ArcView Software, but no online experience. I want to learn though.

Any recommendations for passing the learning curve? I went through the readme.html but it helped only a little bit.

Thank you for your help
Meghan

Re: Dynamically create layer list

KellyHutchins — Sat, 11 Dec 2021 06:45:20 GMT

Here's an example of how you can dynamically generate a layer list using the twitter template from ArcGIS.com.

Download the attached js file and place it in the javascript folder of your application. Note: this is the location where the layout.js file is located.
Next, open the layout.js file in a text editor and add the following script tag directly below the line that adds the layout.js file (approx line 21):

 <script type="text/javascript" src="javascript/layerVis.js"></script>

Next search the layout.js file and find the section of code that checks if the map is loaded and calls the initUI function and replace it with this:

     if(map.loaded){
        initUI(itemInfo);
      }
      else{
        dojo.connect(map,"onLoad",function(){
          initUI(itemInfo);
        });
      }

Finally, update the initUI function in layout.js to read as follows:

  function initUI(itemInfo) {
      //add theme for popup
      dojo.addClass(map.infoWindow.domNode, "chrome");
      var scalebar = new esri.dijit.Scalebar({
        map: map,
        scalebarUnit: "english" //metric or english
      });
      displayLayerList(itemInfo);
    }

Re: Dynamically create layer list

RobertKirkwood — Sat, 11 Dec 2021 06:45:23 GMT

Here is some code to create the checkbox list. However, when i pan the map the check boxes in the list become unchecked. Is there a way to stop this from happening?

function buildLayerList() {
    require(["dojo/on", "dojo/dom", "dojo/_base/array"], function (on, dom, arrayUtils) {
        var mapLayer = map.layerIds;
        var myItems = [];
        arrayUtils.map(mapLayer, function (layerName) {
            var myLayer = map.getLayer(layerName);
            if (myLayer.id !== "NAIP2012" && myLayer.id !== "NAIP2009" ) {
                if (myLayer.visibleLayers) {
                    //console.log(myLayer.id + " : " + "has vis Layers");
                    var items = arrayUtils.map(myLayer.layerInfos, function (info, index) {
                        if (info.name === "Label  SEO wells by depth" || info.name === "Label  SEO wells by actual yield" || info.name === "Label  SEO wells by MWBZ top") {
                            // console.log(info.name);
                        } else {
                            if (myLayer.visibleLayers.indexOf(info.id) > -1) {
                                return "<input type='checkbox' class='list_item'" + (info.defaultVisibility ? "checked=checked" : "") + "' id='" + info.name + "CB'' /><label for='" + info.id + "'>"
                                        + info.name + "</label><br>";
                            }


                        }


                    });


                    myItems = myItems.concat(items);
                }
            }


        });


        var ll = dom.byId("legendDiv");
        ll.innerHTML = myItems.join(' ');
        document.getElementById("legendDiv").style.display = "block";


    });


}

I am calling on the buildLayerListin the map:

mapLayer.on('update-end', buildLayerList);