topic Re: Sample of AMD version Toggle Layer Visibility in ArcGIS JavaScript Maps SDK Questions

Sample of AMD version Toggle Layer Visibility

StevenGraf1 — Mon, 27 Jan 2014 19:42:33 GMT

Is there a sample out there for this. I tried to convert the legacy version here but it wouldn't display or toggle my layer on and off.

Re: Sample of AMD version Toggle Layer Visibility

RobertWinterbottom — Mon, 27 Jan 2014 20:01:48 GMT

Can you post your code that you are trying to do this with. I do not think there is anything that you specifically need to require to make this work. You should be able to just get a valid reference to your layer object, and call setVisibleLayers with a valid array of layer id's and it should work.

Re: Sample of AMD version Toggle Layer Visibility

StevenGraf1 — Sun, 12 Dec 2021 03:51:53 GMT

I added in

"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ImageParameters"

function(...ArcGISDynamicMapServiceLayer, ImageParameters,...)

var layer, map, visible = [];

changed...

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

        layer = esri.layers.ArcGISDynamicMapServiceLayer("http://my/MapServer", {"imageParameters":imageParameters});
        map.addLayer(layer);

 function updateLayerVisibility() {
        var inputs = dojo.query(".list_item"), input;
        //in this application layer 2 is always on.
        visible = [0];
        for (var i=0, il=inputs.length; i<il; i++) {
          if (inputs.checked) {
            visible.push(inputs.id);
          }
        }
         //if there aren't any layers visible set the array value to = -1
        if(visible.length === 0){
          visible.push(-1);
        }

        layer.setVisibleLayers(visible);
      }

[HTML]<label class="chkLabel"><input type='checkbox' class='list_item' id='0' value=0 onclick='updateLayerVisibility();'>Interior Space</label>[/HTML]

Re: Sample of AMD version Toggle Layer Visibility

StevenGraf1 — Mon, 27 Jan 2014 23:13:25 GMT

I got it to show but I can't turn it off and on.

Re: Sample of AMD version Toggle Layer Visibility

KenBuja — Tue, 28 Jan 2014 12:17:05 GMT

Can you put your code at JS Bin to show what you've done? I'm suspecting that you have the function "updateLayerVisibility" inside the require statement, where the check boxes cannot get access. Take a look at this thread

Re: Sample of AMD version Toggle Layer Visibility

KenBuja — Tue, 28 Jan 2014 13:55:56 GMT

Also, take a look at this thread, which adds the check boxes dynamically and uses a Legend.

Re: Sample of AMD version Toggle Layer Visibility

RobertWinterbottom — Sun, 12 Dec 2021 03:51:55 GMT

Sounds Like what Ken is saying is right, attaching the function to the checkbox inline via the "onclick" attribute will look for a global function by that name. However if you defined that function inside the require statement, it will be scoped to that require and not globally which will probably show some errors in the console when you try to check them. Putting it in JSBin or JSFiddle so we could see the whole code would be really helpful or you can try adding the listeners programmatically via document.addEventListener (or attachEvent depending what browsers you want to support) or just use dojo's on module. It would look something like this.

require(["dojo/on", "dojo/dom"], function (on, dom) {
  function updateLayerVisibility() {
    ...
  }  

  on(dom.byId("myCheckbox"),"click",updateLayerVisibility);

});

Make sure the modules you require map to your aliases and remember that your aliases are case-sensitive, for example:

require(["dojo/dom"], function (dom) {
  Dom.byId(); // This will fail because its using a capital, 
  dom.byId(); // This is the right way
});

and if you require dojo/dom, then dojo/on, and in the function parameters you specify them in a different order (on, dom) they will not work as expected, the order must match the order in which they were required.