topic Re: Dynamically Create Layer List Help in ArcGIS JavaScript Maps SDK Questions

Dynamically Create Layer List Help

MichaelLisovich — Sat, 01 Mar 2014 21:40:05 GMT

I'm trying to use the script from https://developers.arcgis.com/javascript/jssamples/map_dynamiclayerlist.html in order to create checkboxes for the layers on the map. I've managed to get the script working, but can only add one array of layers. If I try to add another ArcGISDynamicMapServiceLayer line it overwrites the first one. Is there a way to add multiple arrays to the same script?

Re: Dynamically Create Layer List Help

KenBuja — Mon, 03 Mar 2014 10:43:31 GMT

Can you post your code at JSBin (or Fiddle) to show what you've done so far?

Re: Dynamically Create Layer List Help

MichaelLisovich — Mon, 03 Mar 2014 20:03:28 GMT

I've included the relevant parts of the code here: http://jsbin.com/rewopido/2/edit?html

Re: Dynamically Create Layer List Help

KenBuja — Sat, 11 Dec 2021 19:22:24 GMT

You have a problem in the first script where the modules and arguments are not in the correct order. The arguments in the function must be in the same order that they are called in require. The modules that don't need an argument in the function can come in any order after the ones that need the argument in the function. You're also repeating several modules (BorderContainer and ContentPane)

    require([
      "esri/map", "esri/layers/FeatureLayer", "esri/dijit/Legend","esri/dijit/BasemapGallery", "esri/arcgis/utils",
      "dojo/_base/array", "dojo/parser", "esri/dijit/LocateButton", "esri/dijit/HomeButton", "esri/dijit/OverviewMap", "esri/layers/ArcGISDynamicMapServiceLayer",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane","dijit/layout/AccordionContainer",
      "dojo/domReady!"
    ], function(
      Map, FeatureLayer, Legend,BasemapGallery, arcgisUtils,
      arrayUtils, parser , LocateButton, HomeButton, OverviewMap, ArcGISDynamicMapServiceLayer
    )

I'm still working on how to add layers from multiple services.

Re: Dynamically Create Layer List Help

MichaelLisovich — Wed, 05 Mar 2014 00:08:40 GMT

I will work on rectifying that situation. I've tried over the last few days to find a way to add multiple layers, but no such luck thus far.

Re: Dynamically Create Layer List Help

KenBuja — Wed, 05 Mar 2014 13:51:30 GMT

This example adds checkboxes for each layer in two different services. The code uses indexOf, which doesn't work in IE8 and below. If you need that, take a look at this thread.

Re: Dynamically Create Layer List Help

AmeliaMalcolm — Sat, 11 Dec 2021 19:22:26 GMT

Wow! I think this is exactly what I've been looking for.

        
         map.on("layers-add-result", function (evt) {
                         buildLayerList(evt)
                     });

                     function buildLayerList(evt) {
                         array.forEach(evt.layers, function (layer) {
                             var vis = [];
                             visible.push(vis);
                             buildCheckboxes(layer);
                         });
                     }

                     function buildCheckboxes(layer) {
                         array.forEach(layer.layer.layerInfos, function (info, index) {
                             var checkBox = new CheckBox({
                                 name: "checkBox" + layer.layer.id + info.id,
                                 value: layer.layer.id + "_" + info.id,
                                 checked: info.defaultVisibility,
                                 onChange: function (evt) {
                                     var thisArray = this.value.split("_")
                                     var layerID = thisArray[0];
                                     var infoID = parseInt(thisArray[1]);
                                     var clayer = map.getLayer(thisArray[0]);
                                     var visArray = clayer.visibleLayers;
                                     var ind = visArray.indexOf(infoID);
                                     if (ind > -1) {
                                         visArray.splice(ind, 1);
                                     }
                                     else {
                                         visArray.push(infoID);
                                     }
                                     if (visArray.length == 0) { visArray.push(-1);}
                                     clayer.setVisibleLayers(visArray);
                                 }
                             });

Unfortunately I have no idea how to integrate it into my (or more precisely my retired boss') code.

I have managed to find only two places which refer to a layer list and buildLayerList in our own code (almost a copy of the original javascript sample)

Up near the variables -

layers = dojo.queryToObject(URLparams).layers;
layerList = (layers) ? layers.split(',') : [];
for (a in layerList ) {
 layerList = parseInt(layerList);
}

and after we have defined the three map services (two of which I want to appear in the layer list - the third is the background map)

 if (layer.loaded) {
  buildLayerList(layer);
 } else {
  dojo.connect(layer, "onLoad", buildLayerList);
 }

I'm confused about what I need to keep as layer and what I need to change to layer1 or layer2.

Appologies for being such a newbie, but any help most appreciated.

Re: Dynamically Create Layer List Help

KenBuja — Tue, 08 Apr 2014 15:30:20 GMT

I would suggest that you start a new thread and give a full description of what you're trying to do. There are sites like JSFiddle or JSBin where you can post your code that works or doesn't work and lets others see and adapt it.

Re: Dynamically Create Layer List Help

MarkCunningham1 — Tue, 08 Apr 2014 15:57:29 GMT

What would be the best way to add/use a custom label next to check box instead of using the layer name?
http://jsbin.com/majom/1/edit

Re: Dynamically Create Layer List Help

KenBuja — Tue, 08 Apr 2014 16:57:05 GMT

This is one way of altering the checkbox name.

Re: Dynamically Create Layer List Help

MarkCunningham1 — Sat, 11 Dec 2021 19:22:29 GMT

Perhaps I should start a new Thread? I am wanting to add a label to a kml layer currently it displays as "undefined" I have tried to
add a {<title> </title> } element to the raw kml file without any success. [ATTACH=CONFIG]32954[/ATTACH]

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>RssToggle</title>

<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/tundra/tundra.css">

<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<style>
  html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
  #map { height: 100%; margin: 0; padding: 0; }
  #metaLegend {
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: 20em;
    height: 5em;
    z-index: 40;
    background: #fff;
    color: #777;
    padding: 5px;
    border: 2px solid #666;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
    font-family: arial;
    font-size: 0.9em;
  }
  #metaLegend h3 {
    color: #666;
    font-size: 1.1em;
    padding: 0px;
    margin: 0px;
    display: inline-block;
  }
 #metac {
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: 20em;
    height: 5em;
    z-index: 40;
    background: #fff;
    color: #777;
    padding: 5px;
    border: 2px solid #666;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
    font-family: arial;
    font-size: 0.9em;
  }
   #metac h3 {
    color: #666;
    font-size: 1.1em;
    padding: 0px;
    margin: 0px;
    display: inline-block;
  }
  legendDiv {
    display:none;}
</style>

<script src="http://js.arcgis.com/3.8/"></script>
<script>
  var map;
  require([
    "esri/map", 
    "esri/layers/KMLLayer",
    "esri/layers/GeoRSSLayer",
    "esri/InfoTemplate",
    "dojo/parser", 
     "esri/layers/FeatureLayer",
    
    "dojo/_base/array",
              "esri/symbols/PictureMarkerSymbol", 
              "esri/renderers/SimpleRenderer",
        "esri/dijit/Legend",
        "dijit/form/CheckBox","dojo/dom", "dojo/dom-construct", 
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dojo/domReady!"
  ], function(
    Map, KMLLayer, GeoRSSLayer, InfoTemplate,
    parser, FeatureLayer,array, PictureMarkerSymbol, SimpleRenderer, Legend,CheckBox, dom, domConstruct
  ) {
    map = new esri.Map("map",{ 
      basemap: "oceans", 
      center: [-122.399, 37.78],
      zoom: 9
    });

    // create layout dijits
    parser.parse();
        
         var kmlUrl = "http://dl.dropbox.com/u/2654618/kml/Wyoming.kml";
    var kml = new KMLLayer(kmlUrl); 
        
        
           var cities = new FeatureLayer(
                "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0", {
                    mode: FeatureLayer.MODE_ONDEMAND,
                    outFields: ["*"]
                });




    // var georssUrl = "http://geocommons.com/overlays/116926.atom"; // S.F. and East Bay Breweries http://geocommons.com/overlays/116926
    var georss = new GeoRSSLayer("http://geocommons.com/overlays/116926.atom"); 
    georss.on("load", function() {
      //domStyle.set("loading", "display", "none");
      // create an info template
      var template = new InfoTemplate("${address}", "${zip}");
      // set the info template for the feature layers that make up the GeoRSS layer
      // the GeoRSS layer contains one feature layer for each geometry type
      var layers = georss.getFeatureLayers();
            var picRenderer = new PictureMarkerSymbol("http://static.arcgis.com/images/Symbols/Basic/RedShinyPin.png", 21, 21);
            var georssRenderer = new SimpleRenderer(picRenderer);
      array.forEach(layers, function(l) {
         l.setInfoTemplate(template);
         l.setRenderer(georssRenderer)
      });
    });
  ///////////////////////////////////////////////////////////////////////////  
    
    
    
    
 //////////////////////////////////////////////////////////   
    //add the legend
            map.on("layers-add-result", function (evt) {
                var layerInfo = array.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([georss,cities, kml]);
  });
</script>
</head>

<body class="tundra">
<div data-dojo-type="dijit/layout/BorderContainer" 
     data-dojo-props="design:'headline',gutters:false" 
     style="width: 100%; height: 100%; margin: 0;">
  <div id="map" 
       data-dojo-type="dijit/layout/ContentPane" 
       data-dojo-props="region:'center'"> 
    <div id="metaLegend"style="display: none;">
     
      <h3>Legend</h3>
      <br>
      <div id="legendDiv"></div>
     </div>
   
   <div id="metac">
     
      <h3>Layers</h3>
      <br>
       <div id="toggle" style="padding: 2px 2px;"></div>
    </div> </div> </div>
  </div>

</body>
</html>

Re: Dynamically Create Layer List Help

KenBuja — Sat, 11 Dec 2021 19:22:32 GMT

In this example, I added an id to the KMLLayer and if the layer has that id, I change the layer name.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>RssToggle</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/tundra/tundra.css">

    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <style>
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #metaLegend {
            position: absolute;
            left: 20px;
            bottom: 20px;
            width: 20em;
            height: 5em;
            z-index: 40;
            background: #fff;
            color: #777;
            padding: 5px;
            border: 2px solid #666;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            font-family: arial;
            font-size: 0.9em;
        }

            #metaLegend h3 {
                color: #666;
                font-size: 1.1em;
                padding: 0px;
                margin: 0px;
                display: inline-block;
            }

        #metac {
            position: absolute;
            left: 20px;
            bottom: 20px;
            width: 20em;
            height: 5em;
            z-index: 40;
            background: #fff;
            color: #777;
            padding: 5px;
            border: 2px solid #666;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            font-family: arial;
            font-size: 0.9em;
        }

            #metac h3 {
                color: #666;
                font-size: 1.1em;
                padding: 0px;
                margin: 0px;
                display: inline-block;
            }

        legendDiv {
            display: none;
        }
    </style>

    <script src="http://js.arcgis.com/3.8/"></script>
    <script>
        var map;
        require([
          "esri/map",
          "esri/layers/KMLLayer",
          "esri/layers/GeoRSSLayer",
          "esri/InfoTemplate",
          "dojo/parser",
           "esri/layers/FeatureLayer",

          "dojo/_base/array",
                    "esri/symbols/PictureMarkerSymbol",
                    "esri/renderers/SimpleRenderer",
              "esri/dijit/Legend",
              "dijit/form/CheckBox", "dojo/dom", "dojo/dom-construct",
          "dijit/layout/BorderContainer",
          "dijit/layout/ContentPane",
          "dojo/domReady!"
        ], function (
          Map, KMLLayer, GeoRSSLayer, InfoTemplate,
          parser, FeatureLayer, array, PictureMarkerSymbol, SimpleRenderer, Legend, CheckBox, dom, domConstruct
        ) {
            map = new esri.Map("map", {
                basemap: "oceans",
                center: [-122.399, 37.78],
                zoom: 9
            });

            // create layout dijits
            parser.parse();

            var kmlUrl = "http://dl.dropbox.com/u/2654618/kml/Wyoming.kml";
            var kml = new KMLLayer(kmlUrl, {
                id: "KML"
            });


            var cities = new FeatureLayer(
                 "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0", {
                     mode: FeatureLayer.MODE_ONDEMAND,
                     outFields: ["*"]
                 });




            // var georssUrl = "http://geocommons.com/overlays/116926.atom"; // S.F. and East Bay Breweries http://geocommons.com/overlays/116926
            var georss = new GeoRSSLayer("http://geocommons.com/overlays/116926.atom");
            georss.on("load", function () {
                //domStyle.set("loading", "display", "none");
                // create an info template
                var template = new InfoTemplate("${address}", "${zip}");
                // set the info template for the feature layers that make up the GeoRSS layer
                // the GeoRSS layer contains one feature layer for each geometry type
                var layers = georss.getFeatureLayers();
                var picRenderer = new PictureMarkerSymbol("http://static.arcgis.com/images/Symbols/Basic/RedShinyPin.png", 21, 21);
                var georssRenderer = new SimpleRenderer(picRenderer);
                array.forEach(layers, function (l) {
                    l.setInfoTemplate(template);
                    l.setRenderer(georssRenderer)
                });
            });
            ///////////////////////////////////////////////////////////////////////////




            //////////////////////////////////////////////////////////
            //add the legend
            map.on("layers-add-result", function (evt) {
                var layerInfo = array.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;
                    if (layer.layer.id === "KML") { layerName = "KML Layer";}
                    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([georss, cities, kml]);
        });
    </script>
</head>

<body class="tundra">
    <div data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design:'headline',gutters:false"
         style="width: 100%; height: 100%; margin: 0;">
        <div id="map"
             data-dojo-type="dijit/layout/ContentPane"
             data-dojo-props="region:'center'">
            <div id="metaLegend" style="display: none;">

                <h3>Legend</h3>
                <br>
                <div id="legendDiv"></div>
            </div>

            <div id="metac">

                <h3>Layers</h3>
                <br>
                <div id="toggle" style="padding: 2px 2px;"></div>
            </div>
        </div>
    </div>
    </div>

</body>
</html>

Re: Dynamically Create Layer List Help

MarkCunningham1 — Thu, 10 Apr 2014 11:41:39 GMT

Thank you, exactly what I was needing.

Re: Dynamically Create Layer List Help

RobertKirkwood — Wed, 18 Feb 2015 19:55:02 GMT

I have a similar question to all of this. i have several table of contents that are grouped by types of data. The client wants a separate legend that they can open and see a list of layers that are checked in the other TOCs and be able to check the layers in the new TOC for identifying. Here is a screenshot of what i have so far:

The bottom left is the new TOC that i want to just list visible layers that are turned on elsewhere. Thanks!

p.s. i know its redundant but that's what they want!