1

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.

enter image description here

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

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" && myLayer.id !== "Label SEO wells by actual yield" && myLayer.id !== "Label SEO wells by MWBZ top") {

        if (myLayer.visibleLayers) {
          //console.log(myLayer.id + " : " + "has vis Layers");
          var items = arrayUtils.map(myLayer.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") {
              // console.log(info.name);
            } else {
              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";
  });
}
  • 1
    How are you calling your buildLayerList() function? Are you calling it through some map event listener, such as map.on("layer-add", ...) or map.on("update-end", ...)? – raykendo Mar 10 '15 at 20:17
  • I am calling the buildLayerList() function in the map.js file like this: myLayer.on('update-end', buildLayerList); – MrKirkwood Mar 11 '15 at 21:38
1

According to the documentation for the layer "update-end" event, it fires every time the layer finishes updating. Every time the user pans, zooms in or out, this event will be triggered.

The problem is, the layerInfo.defaultVisibility that you use to define the checkbox state doesn't change when you change the visibility of the layer. It only shows whether the map service had it on initially. When you pan or zoom, the checkbox is re-rendered, and the checkbox is set to the original map state.

If you're going to continue using the layer update-end event to refresh the checkboxes, you'll need another way to store whether the checkbox has been checked or not.

0

solution:

in the map.js we replaced all of the

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

then in the above code we created a array that called on the checkbox id if it was checked then nothing was done.

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

});

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.