topic Re: Layer Visibility in Legend in ArcGIS JavaScript Maps SDK Questions

Layer Visibility in Legend

RoxanneWilson — Tue, 31 Jan 2017 20:33:16 GMT

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>

Re: Layer Visibility in Legend

RobertScheitlin__GISP — Tue, 31 Jan 2017 20:38:55 GMT

Roxanne,

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

Re: Layer Visibility in Legend

RoxanneWilson — Tue, 31 Jan 2017 20:41:25 GMT

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.

Re: Layer Visibility in Legend

RobertScheitlin__GISP — Sat, 11 Dec 2021 09:00:05 GMT

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/MapServer",
            {"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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Layer Visibility in Legend

RoxanneWilson — Tue, 31 Jan 2017 21:42:05 GMT

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

Re: Layer Visibility in Legend

RobertScheitlin__GISP — Tue, 31 Jan 2017 21:52:20 GMT

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)

Re: Layer Visibility in Legend

RoxanneWilson — Wed, 01 Feb 2017 21:23:34 GMT

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?

Re: Layer Visibility in Legend

RobertScheitlin__GISP — Wed, 01 Feb 2017 21:30:29 GMT

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.