Checkbox becomes unchecked when map pans

[RobertKirkwood]

I have a table of contents that is used to toggle visibility of layers. I also have a dialog box that populates with the visible layers so that the user can pick from the visible layers what layer they would like to identify on. They use a checkbox to do this. However, when the map is panned or a feature is zoomed to the checkbox becomes unchecked.  here is a screen shot.

Here is the code i am using for creating the visible layer checkbox:

//get layer names for layers window and create checkboxes
function buildLayerList() {
    require(["dojo/on", "dojo/dom", "dojo/_base/array"], function (on, dom, arrayUtils) {
        var mapLayer = map.layerIds;
        var myItems = [];
        arrayUtils.map(mapLayer, function (layerName) {
            var myLayer = map.getLayer(layerName);
            if (myLayer.id !== "NAIP2012" && myLayer.id !== "NAIP2009" && myLayer.id !== "NAIP2006" && myLayer.id !== "trLayer") {


                if (myLayer.visibleLayers) {
                    //console.log(myLayer.id + " : " + "has vis Layers");
                    var items = arrayUtils.map(myLayer.layerInfos, function (info, index) {
                        if (myLayer.visibleLayers.indexOf(info.id) > -1) {
                            return "<input type='checkbox' class='list_item'" + (info.defaultVisibility ? "checked=checked" : "") + "' id='" + info.name + "CB'' /><label for='" + info.id + "'>"
                                    + info.name + "</label><br>";
                        }


                    });


                    myItems = myItems.concat(items);
                }
            }


        });
        var ll = dom.byId("legendDiv");
        ll.innerHTML = myItems.join(' ');
        document.getElementById("legendDiv").style.display = "block";


    });


}

[RobertKirkwood · Accepted solution]

solution:

in the map.js we replaced all of the

myLayer.on('update-end', buildLayerList); with on(map, "update-end", buildLayerList);

here is the updated code:

function buildLayerList() {
    require(["dojo/on",
        "dojo/dom",
        "dijit/form/CheckBox",
        "dojo/_base/array"], function (on, dom, CheckBox, arrayUtils) {
        var mapLayer = map.layerIds;
        var myItems = [];
        var selectedLayers = [];
        arrayUtils.map(mapLayer, function (layerName) {
            var myLayer = map.getLayer(layerName);
            if (myLayer.id !== "basinLayer" && myLayer.id !== "NAIP2012" && myLayer.id !== "NAIP2009" && myLayer.id !== "NAIP2006" && myLayer.id !== "trLayer" && myLayer.id !== "Label SEO wells by actual yield" && myLayer.id !== "Label SEO wells by MWBZ top") {
                if (myLayer.visibleLayers) {
                    var items = arrayUtils.map(myLayer.layerInfos, function (info, index) {
                        if (document.getElementById(info.name + "CB")) {
                            if (document.getElementById(info.name + "CB").checked) {
                                selectedLayers.push(info.name);
                            }
                        }
                    });
                }
            }
        });
        arrayUtils.map(mapLayer, function (layerName2) {
            var myLayer2 = map.getLayer(layerName2);
            if (myLayer2.id !== "basinLayer" && myLayer2.id !== "NAIP2012" && myLayer2.id !== "NAIP2009" && myLayer2.id !== "NAIP2006" && myLayer2.id !== "trLayer" && myLayer2.id !== "Label SEO wells by actual yield" && myLayer2.id !== "Label SEO wells by MWBZ top") {
                if (myLayer2.visibleLayers) {
                    var items = arrayUtils.map(myLayer2.layerInfos, function (info, index) {
                        if (info.name === "Label  SEO wells by depth" || info.name === "Label  SEO wells by actual yield" || info.name === "Label  SEO wells by MWBZ top") {
                        }
                        else {
                            if (myLayer2.visibleLayers.indexOf(info.id) > -1) {
                                var layerWasSelected = '';
                                arrayUtils.map(selectedLayers, function (selectedLayerName) {
                                    if (selectedLayerName === info.name) {
                                        layerWasSelected = 'checked';
                                    }
                                }
                                );
                                return "<input type='checkbox' class='list_item' " + layerWasSelected + " id='" + info.name + "CB'" + "/><label for='" + info.id + "'>" + info.name + "</label><br>";
                            }
                        }
                    });
                    myItems = myItems.concat(items);
                }
            }
        });
        var legendList = dom.byId("legendDiv");
        legendList.innerHTML = myItems.join(' ');
        document.getElementById("legendDiv").style.display = "block";
        document.getElementById("blTree").style.display = "block";
    });
}