Javascript - toggle layers on/off

LauraMiles1 · ‎07-23-2015

Hi everyone, I'm using the ESRI sample for turning my layers on and off: Toggle layer visibility | ArcGIS API for JavaScript

I've tried to modify things because I have some checkboxes that I'd like to be able to turn on and off as a group. As I've written the code, turning these on and off using the "Select All" link does seem to work fine, until it gets to this line (line 29 in the codeblock below):

var inputs = query(".enviro_list_item")

At this point it's passed the case test, but it seems that the variable "inputs" is empty.

I get an 'Uncaught TypeError: Cannot read property of 'length' of undefined' in my NetBeans Console, and the layers within the div (everything that just got checked) are not drawn. However if I check a checkbox with the same class, outside or inside the div (as long as I'm not using "Select All"), all the checked layers do get drawn. I tried to look up exactly what this query(".enviro_list_item") does but I can't find any information on query(). I'm guessing it polls the values of the checkboxes within the specified class and puts them in an array. But why would it not work because these are being turned on/off via the html link? It must be to do with the click or change event not being fired? I tried adding this jquery (line 13 below) but it didn't make a difference:

$(targetSelectMenu).find(':checkbox').trigger('change');

If I could get the above working, I think I would not need line 15 then?

Here is my code

HTML:

<label id="lblBIEAP" class="lblSubMenuItem"><img id="imgBIEAP" src="Images\plus.png" width="13"/>BIEAP</label><a class="aSelectAll" id="aBIEAPSelectAll"> Select All</a></br>

<div id='txtBIEAPShoreSeg' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkBIEAPShoreSeg' value=37 />Shoreline Segments</div>

<div id='txtBIEAPOverVeg' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkBIEAPOverVeg' value=36 />Overhanging Vegetation</div>

<div id='txtBIEAPShoreEros' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkBIEAPShoreEros' value=35 />Shoreline Erosion</div>

<div id='txtBIEAPOutfalls' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkBIEAPOutfalls' value=34 />Outfalls</div>

<div id='txtBIEAPIntFeat' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkBIEAPIntFeat' value=33 />Interesting Features</div>

<div id='txtBIEAPBirdNest' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkBIEAPBirdNest' value=32 />Bird Nests</div>

<div id='txtBIEAPIntPlant' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkBIEAPIntPlant' value=31 />Introduced Plants</div>

<div id='txtBIEAPIntVegFeat' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkBIEAPIntVegFeat' value=30 />Intertidal Vegetation Features</div>

<div id='txtBIEAPIntVegAreas' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkBIEAPIntVegAreas' value=29 />Intertidal Vegetation Areas</div>

<div id='txtBIEAPIntSubs' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkBIEAPIntSubs' value=28 />Intertidal Substrates</div>

</div>

<label id="lblFREMP" class="lblSubMenuItem"><img id="imgFREMP" src="Images\plus.png" width="13"/>FREMP</label><a class="aSelectAll" id="aFREMPSelectAll"> Select All</a></br>

<div id='txtFREMPColCode' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkFREMPColCode' value=43 />Colour Codes</div>

<div id='txtFREMPAreaDes' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkFREMPAreaDes' value=42 />Area Designation</div>

<div id='txtFREMPHabComp' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkFREMPHabComp' value=41 />Habitat Compensation</div>

<div id='txtFREMPHabOrd' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkFREMPHabOrd' value=40 />Habitat Order</div>

</div>

<div id='txtBoreholes' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkBoreholes' value=0 />Boreholes</div>

<div id='txtContSites' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkContSites' value=45 />Contaminated Sites</div>

<div id='txtEnviroLib' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkEnvLib' value= />Enviro Library</div>

<div id='txtHabComp' class='divMenuItem'><input type='checkbox' class='enviro_list_item' id='chkHabComp' value=17 />Habitat Compensation Sites</div>

</div>

Javascript:

//The following fires when a "Select All" link is clicked to turn all layers in a subgroup on/off

$(".aSelectAll").click(function(){

//cut off the "a" and "SelectAll" from the clicked link's id

//example id would be 'aBIEAPSelectAll'

var targetSelectAll = ((event.srcElement.id).replace("SelectAll", '')).slice(1);

//piece together the id of the menu targeted

//example result would be "#divMenuBIEAP

var targetSelectMenu = "#divMenu" + targetSelectAll;

//find all the checkboxes in the divMenu and toggle them

var checked = $(this).data('checked');

$(targetSelectMenu).find(':checkbox').prop('checked', !checked);

$(this).data('checked', !checked);

$(targetSelectMenu).find(':checkbox').trigger('change');

//run the function to update the visibility of layers

updateLayerVisibility();

});

on(document.body, ".cadastral_list_item:change", updateLayerVisibility);

on(document.body, ".enviro_list_item:change", updateLayerVisibility);

function updateLayerVisibility () {

switch(event.srcElement.className) {

case "cadastral_list_item":

var inputs = query(".cadastral_list_item");

var serviceLayer = layerCadastral;

break;

case "enviro_list_item":

var inputs = query(".enviro_list_item");

var serviceLayer = layerEnvironment;

break;

}

var inputCount = inputs.length;

visibleLayerIds = [1001];

for (var i = 0; i < inputCount; i++) {

if (inputs.checked) {

visibleLayerIds.push(inputs.value);

}

if (visibleCadastralLayerIds.length === 0) {

visibleLayerIds.push(-1);

}

serviceLayer.setVisibleLayers(visibleLayerIds);

// run the identify task setup every time the layer visibility is updated

identifyTaskSetup();

//refresh the legend

legendDijit.refresh();

}

LauraMiles1 · ‎07-29-2015

Update: I found my error was that in the switch statement, the event.srcElement.className being returned was, of course, the class name of the aSelectAll href. It was not in the end any problem with the changed event being triggered. I changed the switch statement to the following, which works:

switch(event.srcElement.className) {
                case "cadastral_list_item":
                    var inputs = query(".cadastral_list_item");
                    var serviceLayer = layerCadastral;
                    break;    
                
                case "enviro_list_item":
                
                    var inputs = query(".enviro_list_item");
                    var serviceLayer = layerEnvironment;
                    break;
                
                case "aSelectAll":
                    switch(event.srcElement.id){
                      case "aBIEAPSelectAll":
                      case "aFREMPSelectAll":  
                        var inputs = query(".enviro_list_item");
                        var serviceLayer = layerEnvironment;
                    }                        
            }