topic Re: How do I get my layer checkboxes to update layer visibility? in ArcGIS JavaScript Maps SDK Questions

How do I get my layer checkboxes to update layer visibility?

ChrisSergent — Fri, 10 Dec 2021 21:18:40 GMT

I am trying to use this sample to toggle layers: Toggle layer visibility | ArcGIS API for JavaScript but I receive this error message:

"in domReady callback"

"TypeError: Cannot read property 'on' of null

and here is my code:

var visibleLayerIds = [];
    on(dom.byId("lyrSigns"), "change", updateLayerVisibility);
    on(dom.byId("lyrSupports"), "change", updateLayerVisibility);


    function updateLayerVisibility() {
        var inputs = query(".list_item");
        var inputCount = inputs.length;
               


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


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


        layer.setVisibleLayers(visibleLayerIds);
    }

And here is my project on github: csergent45/streetSigns · GitHub

Re: How do I get my layer checkboxes to update layer visibility?

KellyHutchins — Fri, 01 May 2015 19:33:11 GMT

Try checking to see what the value is for dom.byId("lyrSigns") and dom.byId("lyrSupports"). If you set a breakpoint in the code at that line and check the values are they correct?

Re: How do I get my layer checkboxes to update layer visibility?

roemhildtg — Fri, 01 May 2015 19:39:50 GMT

Your input's id is actually lyrSupport but you're looking for lyrSupports.

In index.html:

<input type="checkbox" id="lyrSupport" checked value="1" /> Supports

Change lyrSupport to lyrSupports.

Re: How do I get my layer checkboxes to update layer visibility?

StevenGraf1 — Fri, 01 May 2015 20:01:06 GMT

I just replied to your other post and then saw this one. Here was my response:

I checked out your toggle layer code and the code that you pulled from is using DynamicMapService found here Toggle layer visibility | ArcGIS API for JavaScript

In your application you are using feature layers. I am using feature layers and toggling like this:

var layer1 = new FeatureLayer("https://myurl/MapServer/1",{  
          mode: FeatureLayer.MODE_ONDEMAND,  
          outFields: ["*"],  
          infoTemplate: template  
        });  
  
  var checkBox = new CheckBox({  
  name: "checkBox1",  
  value: "agreed",  
  checked: false,  
  onChange: function(b){  
  if (b == true) {  
  map.addLayer(layer1);  
  } else {  
  map.removeLayer(layer1);  
  } }  
  }, "checkBox1").startup();

Be sure to call the "dijit/form/CheckBox", module with function(CheckBox)

<input type='checkbox' id='checkBox1' value=1 />Layer1<br />

Hope this helps you out with that issue.

Steven

Re: How do I get my layer checkboxes to update layer visibility?

StevenGraf1 — Fri, 01 May 2015 20:03:49 GMT

Ignore the <span> </span>....It put that in there because I copied my original post.

Re: How do I get my layer checkboxes to update layer visibility?

ChrisSergent — Mon, 04 May 2015 16:01:57 GMT

I am receiving this error immediately:

"in domReady callback"

And I just added these two line to try to get the value of the checkboxes:

on(dom.byId("lyrSigns"), "change", console.log(on(dom.byId("lyrSigns").value)));

on(dom.byId("lyrSupports"), "change", console.log(on(dom.byId("lyrSupports").value)));

Re: How do I get my layer checkboxes to update layer visibility?

ChrisSergent — Fri, 10 Dec 2021 21:18:43 GMT

I modified the code as follows:

var checkBox = new CheckBox({
        name: "lyrSigns",
        value: "agreed",
        checked: false,
        onChange: function (b) {
            if (b == true) {
                app.map.addLayer("signLayerUrl");
            } else {
                app.map.removeLayer("signLayerUrl");
            }
        }
    }, "lyrSigns").startup();

And I get the following error: Uncaught lang.hitch: scope["onLoad"] is null (scope="[object Window]")

Re: How do I get my layer checkboxes to update layer visibility?

KellyHutchins — Mon, 04 May 2015 19:29:10 GMT

Did you try Gregg Roemhildt's suggestion because I suspect that its the solution to this issue.

Re: How do I get my layer checkboxes to update layer visibility?

ChrisSergent — Fri, 10 Dec 2021 21:18:46 GMT

I tried Gregg Roemhildt 's solution by entering the following:

var visibleLayerIds = [];

  on(dom.byId("lyrSigns"), "change", updateLayerVisibility);
    //on(dom.byId("lyrSupports"), "change", updateLayerVisibility);


    function updateLayerVisibility() {
        var inputs = query(".list_item");
        var inputCount = inputs.length;
             
        visibleLayerIds = [0];


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


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

I have been referencing this sample: https://developers.arcgis.com/javascript/jssamples/map_explicitlayerlist.html

And I wondered, since I am working with two separate feature layers, do I need to work with them individually as the example just uses a single dynamic layer.

Either way, when I update the code from above I get the following error: ncaught ReferenceError: signLayerUrl is not defined

But it's defined in the config section of the page.

I have updated my code with this modification on github: https://github.com/csergent45/streetSigns

Re: How do I get my layer checkboxes to update layer visibility?

KellyHutchins — Mon, 04 May 2015 20:04:19 GMT

If you are using feature layers you will want to use the feature layer's setVisibility method instead of setVisibleLayers.

The error saying the variable (signLayerUrl) is not defined generally means that the variable you are using isn't available. Perhaps there's a typo in your app or maybe its a scope issue. Try setting a breakpoint in your app at line 22 and inspect the signLayerUrl variable to see if its undefined.

Re: How do I get my layer checkboxes to update layer visibility?

ChrisSergent — Mon, 04 May 2015 20:38:05 GMT

Line 22? I have that as my require statements.

Re: How do I get my layer checkboxes to update layer visibility?

KellyHutchins — Mon, 04 May 2015 20:39:32 GMT

line 22 in your code snippet above not in your source.

Re: How do I get my layer checkboxes to update layer visibility?

ChrisSergent — Fri, 10 Dec 2021 21:18:48 GMT

I have updated it as follows and there are no errors, but nothing is happening:

var visibleLayerIds = [];
   


    on(dom.byId("lyrSigns"), "change", updateLayerVisibility);
    //on(dom.byId("lyrSupports"), "change", updateLayerVisibility);


    function updateLayerVisibility() {
        var inputs = query(".list_item");
        var inputCount = inputs.length;
             
        visibleLayerIds = [0];


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


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

But app.signLayer does define as my sign layer.

Re: How do I get my layer checkboxes to update layer visibility?

KellyHutchins — Mon, 04 May 2015 23:55:48 GMT

In your updated sample you are setting the featureLayer.setVisiblity to an array of ids which is not valid for that method. The setVisiblity method accepts true or false. So your code should be something like:

myLayer.setVisibility(false);

Re: How do I get my layer checkboxes to update layer visibility?

StevenGraf1 — Tue, 05 May 2015 00:00:42 GMT

Add in the following module dojo/_base/lang — The Dojo Toolkit - Reference Guide and see if that corrects the error.

Re: How do I get my layer checkboxes to update layer visibility?

ChrisSergent — Fri, 10 Dec 2021 21:18:51 GMT

I appreciate everyone's help. Thanks to everyone for your help. I clicked like and helpful to give you all points. Here is the final code that I came up with:

on(dom.byId("lyrSigns"), "change", updateSignLayerVisibility);
    on(dom.byId("lyrSupports"), "change", updateSupportLayerVisibility);





    function updateSignLayerVisibility() {
        if (document.getElementById('lyrSigns').checked) {
            app.signLayer.setVisibility(true);
        } else {
            app.signLayer.setVisibility(false);
        }
    }


    function updateSupportLayerVisibility() {
        if (document.getElementById('lyrSupports').checked) {
            app.supportLayer.setVisibility(true);
        } else {
            app.supportLayer.setVisibility(false);
        }
    }

I was hoping for a single loop, but this works.

Re: How do I get my layer checkboxes to update layer visibility?

RobertScheitlin__GISP — Fri, 10 Dec 2021 21:18:54 GMT

Chris,

Seems like you could lessen your code a little by doing this:

    on(dom.byId("lyrSigns"), "change", updateLayerVisibility); 
    on(dom.byId("lyrSupports"), "change", updateLayerVisibility); 

    function updateLayerVisibility() { 
        if (document.getElementById('lyrSigns').checked) { 
            app.signLayer.setVisibility(true); 
        } else { 
            app.signLayer.setVisibility(false); 
        }
        if (document.getElementById('lyrSupports').checked) { 
            app.supportLayer.setVisibility(true); 
        } else { 
            app.supportLayer.setVisibility(false); 
        }
    }

Re: How do I get my layer checkboxes to update layer visibility?

ChrisSergent — Tue, 05 May 2015 13:30:25 GMT

Awesome! That worked nicely.

Re: How do I get my layer checkboxes to update layer visibility?

RobertScheitlin__GISP — Fri, 10 Dec 2021 21:18:57 GMT

Chris,

Even better:

    on(dom.byId("lyrSigns"), "change", updateLayerVisibility); 
    on(dom.byId("lyrSupports"), "change", updateLayerVisibility); 

    function updateLayerVisibility() { 
        app.signLayer.setVisibility(document.getElementById('lyrSigns').checked);
        app.supportLayer.setVisibility(document.getElementById('lyrSupports').checked); 
    }

Re: How do I get my layer checkboxes to update layer visibility?

ChrisSergent — Tue, 05 May 2015 13:47:17 GMT

Very nice. So this is setting visibility based on the value of checked. Is that correct?