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

ChrisSergent · ‎05-01-2015

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

KellyHutchins · ‎05-04-2015

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);

View solution in original post

KellyHutchins · ‎05-01-2015

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?

ChrisSergent · ‎05-04-2015

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)));

KellyHutchins · ‎05-04-2015

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

ChrisSergent · ‎05-04-2015

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

KellyHutchins · ‎05-04-2015

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.

ChrisSergent · ‎05-04-2015

Line 22? I have that as my require statements.

KellyHutchins · ‎05-04-2015

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

ChrisSergent · ‎05-04-2015

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.

KellyHutchins · ‎05-04-2015

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);