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

Dynamically Create Layer List Help

MichaelLisovich

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?

Finde mehr Beiträge mit dem Tag

Accepted answers

kenbuja

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.

All comments

Mr_Kirkwood

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!

MarkCunningham1

Thank you, exactly what I was needing.

kenbuja

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>

MarkCunningham1

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>

Checkboxlabel.png

kenbuja

This is one way of altering the checkbox name.

MarkCunningham1

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

kenbuja

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.

AmeliaMalcolm

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.

kenbuja

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.

MichaelLisovich

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.

kenbuja

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.

MichaelLisovich

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

kenbuja

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

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.