Hide Table of Contents
View Dynamically create layer list sample in sandbox
Dynamically create layer list

Description

This sample loops through all the layers in a map service and adds each to a list with a checkbox that can toggle the layer on and off. One advantage of dynamically creating the list is that all layers will be included, even if the server administrator removes or adds layers. If you don't want all layers to be included, just an explicit subset, see the sample Toggle layer visibility.

Notice that this sample checks to see if the layer is fully loaded before building the layer list.

The function buildLayerList() loops through each layer and adds it as an HTML checkbox. This builds the layer list. The default visibility of each layer is preserved in the list.

The function updateLayerVisibility() is called whenever someone checks or unchecks a box. It loops through each layer in the list, recording in an array which layers are visible, then calls ArcGISDynamicMapServiceLayer.setVisibleLayers(). The array of layers in the map service that should be visible is passed to this method.

Code

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Dynamically Create Map Service Layer List</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.22/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
 
    <script src="https://js.arcgis.com/3.22/"></script>

    <script>
      var layer, map, visible = [];

      require([
        "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer",
        "dojo/dom", "dojo/on", "dojo/query", "dojo/_base/array",
        "dojo/domReady!"
      ], function(
        Map, ArcGISDynamicMapServiceLayer,
        dom, on, query, arrayUtils
      ) {
        map = new Map("map");
        layer = new ArcGISDynamicMapServiceLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer");
        // layer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer");

        layer.on("load", buildLayerList);
        map.addLayer(layer);

        function buildLayerList() {
          var items = arrayUtils.map(layer.layerInfos, function(info, index) {
            if (info.defaultVisibility) {
              visible.push(info.id);
            }
            return "<input type='checkbox' class='list_item'" + (info.defaultVisibility ? "checked=checked" : "") + "' id='" + info.id + "'' /><label for='" + info.id + "'>" + info.name + "</label>";
          });
          var ll = dom.byId("layer_list");
          ll.innerHTML = items.join(' ');
          layer.setVisibleLayers(visible);
          on(ll, "click", updateLayerVisibility);
        }

        function updateLayerVisibility() {
          var inputs = query(".list_item");
          var input;
          visible = [];

          arrayUtils.forEach(inputs, function(input) {
            if (input.checked) {
              visible.push(input.id);
            }
          });
          //if there aren't any layers visible set the array to be -1
          if (visible.length === 0) {
            visible.push(-1);
          }
          layer.setVisibleLayers(visible);
        }
      });
    </script>
  </head>

  <body>
    This sample loads an ArcGISDynamicMapServiceLayer.<br />
    It determines the layers in the map service and presents them as checkboxes that can be used to toggle their visibility.<br />
    <br />
    Layer List : <span id="layer_list"></span><br />
    <br />
    <div id="map" class="claro" style="width:600px; height:400px; border:1px solid #000;"></div>
  </body>
</html>