Layer Visibility in Legend

RoxanneWilson · ‎01-31-2017

I'm working on a very minimalist webmap (only my 2nd to date). The jpeg shows the look I'm going for, but the functionality isn't quite there yet. In the legend, the checkbox function does not make layers visible and not visible. Is there a way to add that functionality?

The code for my legend is below:

</head>
<body class="soria">
      <div id="header">Point Locations in Pleasant Prairie, WI</div>
      <div id="HomeButton"></div>
      <div id="map"></div>
      <span id="messages"><input type="checkbox" id="myCheck" checked> Village Maintained Points
<p><input type="checkbox" id="myCheck" checked> Commercial Points</p>
<p><input type="checkbox" id="myResCheck" checked> Residential Points</p></span>
</div>
</body>

RobertScheitlin__GISP · ‎01-31-2017

Roxanne,

Here is a sample that will help then:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Explicitly Create Map Service Layer List</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.19/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.19/esri/css/esri.css">
    <script src="http://js.arcgis.com/3.19/"></script>

    <script>
      var map;

      require([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ImageParameters",
        "dojo/dom",
        "dojo/on",
        "dojo/query",
        "dojo/domReady!"
      ],
        function (Map, ArcGISDynamicMapServiceLayer, ImageParameters, dom, on, query) {
          var layer, visibleLayerIds = [];

          map = new Map("map");

          //Use the ImageParameters to set the visibleLayerIds layers in the map service during ArcGISDynamicMapServiceLayer construction.
          var imageParameters = new ImageParameters();
          imageParameters.layerIds = [2];
          imageParameters.layerOption = ImageParameters.LAYER_OPTION_SHOW;
          //can also be: LAYER_OPTION_EXCLUDE, LAYER_OPTION_HIDE, LAYER_OPTION_INCLUDE

          layer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map...",
            {"imageParameters": imageParameters});
          map.addLayer(layer);

          on(dom.byId("layer0CheckBox"), "change", updateLayerVisibility);
          on(dom.byId("layer1CheckBox"), "change", updateLayerVisibility);

          function updateLayerVisibility () {
            var inputs = query(".list_item");
            var inputCount = inputs.length;
            //in this application layer 2 is always on.
            visibleLayerIds = [2];

            for (var i = 0; i < inputCount; i++) {
              if (inputs[i].checked) {
                visibleLayerIds.push(inputs[i].value);
              }
            }

            if (visibleLayerIds.length === 0) {
              visibleLayerIds.push(-1);
            }

            layer.setVisibleLayers(visibleLayerIds);
          }
        });
    </script>
  </head>

  <body>
  This sample loads an ArcGISDynamicMapServiceLayer and presents check boxes for only the layers that should be toggled on and off by users.  <br />
    <br />
        Layer List : <span id="layer_list"><input type='checkbox' class='list_item' id='layer0CheckBox' value=0 />Cities  
          <input type='checkbox' class='list_item' id='layer1CheckBox' value=1 />Rivers  
        </span><br />
        <br />
    <div id="map" class="claro" style="width:600px; height:400px; border:1px solid #000;"></div>
  </body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎01-31-2017

Roxanne,

Where is your code for responding to the state of the checkbox?

RoxanneWilson · ‎01-31-2017

There isn't any yet. That's what I'm needing help in understanding. Essentially right now, the checkboxes in the 'legend' are just for show and don't do anything responsive in the map.

RobertScheitlin__GISP · ‎01-31-2017

Roxanne,

Here is a sample that will help then:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Explicitly Create Map Service Layer List</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.19/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.19/esri/css/esri.css">
    <script src="http://js.arcgis.com/3.19/"></script>

    <script>
      var map;

      require([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ImageParameters",
        "dojo/dom",
        "dojo/on",
        "dojo/query",
        "dojo/domReady!"
      ],
        function (Map, ArcGISDynamicMapServiceLayer, ImageParameters, dom, on, query) {
          var layer, visibleLayerIds = [];

          map = new Map("map");

          //Use the ImageParameters to set the visibleLayerIds layers in the map service during ArcGISDynamicMapServiceLayer construction.
          var imageParameters = new ImageParameters();
          imageParameters.layerIds = [2];
          imageParameters.layerOption = ImageParameters.LAYER_OPTION_SHOW;
          //can also be: LAYER_OPTION_EXCLUDE, LAYER_OPTION_HIDE, LAYER_OPTION_INCLUDE

          layer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map...",
            {"imageParameters": imageParameters});
          map.addLayer(layer);

          on(dom.byId("layer0CheckBox"), "change", updateLayerVisibility);
          on(dom.byId("layer1CheckBox"), "change", updateLayerVisibility);

          function updateLayerVisibility () {
            var inputs = query(".list_item");
            var inputCount = inputs.length;
            //in this application layer 2 is always on.
            visibleLayerIds = [2];

            for (var i = 0; i < inputCount; i++) {
              if (inputs[i].checked) {
                visibleLayerIds.push(inputs[i].value);
              }
            }

            if (visibleLayerIds.length === 0) {
              visibleLayerIds.push(-1);
            }

            layer.setVisibleLayers(visibleLayerIds);
          }
        });
    </script>
  </head>

  <body>
  This sample loads an ArcGISDynamicMapServiceLayer and presents check boxes for only the layers that should be toggled on and off by users.  <br />
    <br />
        Layer List : <span id="layer_list"><input type='checkbox' class='list_item' id='layer0CheckBox' value=0 />Cities  
          <input type='checkbox' class='list_item' id='layer1CheckBox' value=1 />Rivers  
        </span><br />
        <br />
    <div id="map" class="claro" style="width:600px; height:400px; border:1px solid #000;"></div>
  </body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RoxanneWilson · ‎01-31-2017

I get an access denied error when I open this script in IE.

RobertScheitlin__GISP · ‎01-31-2017

I rarely even open IE. But I am not sure why you would be getting that error unless you were trying to run the html from the file system (i.e. url file://blah blah blah)

RoxanneWilson · ‎02-01-2017

The error issue has been resolved.

I've got the code you sent yesterday working outside my app with my data. As I'm incorporating it into my map, I'm not quite sure how to proceed. The code you sent is based on the layerID. In my existing map, I'm adding each layer individually as it's own variable (there's like 5), and assigning it a renderer. Is there a way to keep the var names I've already assigned to each layer but keep the functionality you sent yesterday with the layerIDs?

RobertScheitlin__GISP · ‎02-01-2017

Roxanne,

The code I provided is actually based on the value property of the checkbox (i.e. 0, 1, etc). Then the sublayer ids array is used to set the layer.setVisibleLayers. The sample is based on a single ArcGISDynamicMapServiceLayer.