topic Re: Layer List in ArcGIS JavaScript Maps SDK Questions

Layer List

MathewSuran — Mon, 02 Jun 2014 19:37:19 GMT

Can anyone lend their expertise on how to edit what layers are displayed under the layerlist? I have an app that is 95% complete and their are 4 layers that are no longer functioning that I want to remove from the list. The app was prebuilt but not finished and I have been tasked to complete it. I have figured out most of the coding on my own as I have been going along. I can post whatever code you need to assist. I know this is vague but hopefully someone is knowledgeable in this area. Thanks!

Re: Layer List

JeffPace — Mon, 02 Jun 2014 19:43:57 GMT

what is a layerlist?

I think you are asking a custom code question, without showing code.

Re: Layer List

MathewSuran — Tue, 03 Jun 2014 11:55:48 GMT

Thanks for the respond. The layerlist is the function that they used to compile the list of layers that will be available for display (I assume). You can see the function in the code below. There is a right toolbar with a dropdown menu of layers that can be "checked" to be visible on the map (hopefully you can visualize that). See if you can figure out what they did, here's the code:

[HTML]var i18n;
      dojo.ready(function(){
        i18n = dojo.i18n.getLocalization("esriTemplate","template");
        var defaults = {
layerInfos: [
            /*{"id":"...","name":"...","url":"http://...","visibility":false,"opacity":0.7,"type":"MapService","description":"..."}
            ,*/
            {"id":"...","name":"...","url":"http://...","visibility":false,"opacity":1,"type":"FeatureLayer","description":"..."}
            ,{"id":"...","name":"...","url":"http://...","visibility":false,"opacity":0.7,"type":"FeatureLayer","description":"..."}
            /*,{"id":"...","name":"...","url":"http://...","visibility":false,"opacity":1,"type":"FeatureLayer","description":"..."}
            */,{"id":"...","name":"...","url":"http://...","visibility":false,"opacity":1,"type":"FeatureLayer","description":"..."}
          // ,{"id":"...","name":"...","url":"http://...","visibility":false,"opacity":1,"type":"FeatureLayer","description":"..."}
            ,{"id":"...","name":"...","url":"http://...","visibility":false,"opacity":1,"type":"FeatureLayer","description":"..."}
            /*,{"id":"...","name":"...","url":"http://...","visibility":false,"opacity":1,"type":"FeatureLayer","description":"..."}*/
            ,{"id":"...","name":"...","url":"http://...","visibility":false,"opacity":1,"type":"FeatureLayer","description":"..."}                                  ,{"id":"...","name":"...","url":"http://...","visibility":false,"opacity":1,"type":"KMLLayer","description":"..."}
            ,{"id":"...","name":"...","url":"http://...","visibility":true,"opacity":1,"type":"KMLLayer","description":"..."}
            ,{"id":"...","name":"...","url":"http://...","visibility":true,"opacity":1,"type":"KMLLayer","description":"..."}
            ,{"id":"...","name":"...","url":"http://...","visibility":true,"opacity":1,"type":"KMLLayer","description":"..."}
            ,{"id":"...","name":"...","url":"http://...","visibility":true,"opacity":1,"type":"KMLLayer","description":"..."}
            ,{"id":"...","name":"...","url":"http://...","visibility":true,"opacity":1,"type":"KMLLayer","description":"..."}
            ,{"id":"SBDE-50","name":"...","url":"http://...","visibility":true,"opacity":1,"type":"KMLLayer","description":"..."}
            ,{"id":"SBDE-20","name":"...","url":"http://...","visibility":true,"opacity":1,"type":"KMLLayer","description":"..."}
            ,{"id":"SBDE-10","name":"...","url":"http://...","visibility":true,"opacity":1,"type":"KMLLayer","description":"..."}
            ,{"id":"SBDE-05","name":"...","url":"http://...","visibility":true,"opacity":1,"type":"KMLLayer","description":"..."}
            ,{"id":"SBDE-02","name":"...","url":"http://...","visibility":true,"opacity":1,"type":"KMLLayer","description":"..."}

        ],
        layerInfos: [
            /*{"id":"...","name":"...","url":"http://...","visibility":false,"opacity":0.7,"type":"MapService","description":"..."}
            ,*/
            {"id":"...","name":"...","url":"http://...","visibility":false,"opacity":1,"type":"FeatureLayer","description":"..."}
            ,{"id":"...","name":"...","url":"http://...","visibility":false,"opacity":0.7,"type":"FeatureLayer","description":"..."}
            /*,{"id":"...","name":"...","url":"http://...","visibility":false,"opacity":1,"type":"FeatureLayer","description":"..."}
            */,{"id":"...","name":"...","url":"http://...","visibility":false,"opacity":1,"type":"FeatureLayer","description":"..."}
          // ,{"id":"...","name":"...","url":"http://...","visibility":false,"opacity":1,"type":"FeatureLayer","description":"..."}
            ,{"id":"...","name":"...","url":"http://...","visibility":false,"opacity":1,"type":"FeatureLayer","description":"..."}
            /*,{"id":"...","name":"...","url":"http://...","visibility":false,"opacity":1,"type":"FeatureLayer","description":"..."}*/
            ,{"id":"...","name":"...","url":"http://...","visibility":false,"opacity":1,"type":"FeatureLayer","description":"..."}                                  ,{"id":"...","name":"...","url":"http://...","visibility":false,"opacity":1,"type":"KMLLayer","description":"..."}
            ,{"id":"...","name":"...","url":"http://...","visibility":true,"opacity":1,"type":"KMLLayer","description":"..."}
            ,{"id":"...","name":"...","url":"http://...","visibility":true,"opacity":1,"type":"KMLLayer","description":"..."}
            ,{"id":"...","name":"...","url":"http://...","visibility":true,"opacity":1,"type":"KMLLayer","description":"..."}
            ,{"id":"...","name":"...","url":"http://...","visibility":true,"opacity":1,"type":"KMLLayer","description":"..."}
            ,{"id":"...","name":"...","url":"http://...","visibility":true,"opacity":1,"type":"KMLLayer","description":"..."}
            ,{"id":"SBDE-50","name":"...","url":"http://...","visibility":true,"opacity":1,"type":"KMLLayer","description":"..."}
            ,{"id":"SBDE-20","name":"...","url":"http://...","visibility":true,"opacity":1,"type":"KMLLayer","description":"..."}
            ,{"id":"SBDE-10","name":"...","url":"http://...","visibility":true,"opacity":1,"type":"KMLLayer","description":"..."}
            ,{"id":"SBDE-05","name":"...","url":"http://...","visibility":true,"opacity":1,"type":"KMLLayer","description":"..."}
            ,{"id":"SBDE-02","name":"...","url":"http://...","visibility":true,"opacity":1,"type":"KMLLayer","description":"..."}

        ],
      };
[/HTML]

Have to attach the js code in another post, went over 10000 characters.

Re: Layer List

MathewSuran — Fri, 10 Dec 2021 21:49:22 GMT

//Create a menu with a list of operational layers. Each menu item contains a check box
//that allows users to toggle layer visibility. 
function addLayerList(layers, operational) {
    var layerList = buildLayerVisibleList(layers, operational);
    if (layerList.length > 0) {
        //create a menu of layers
        //layerList.reverse();
        var menu = new dijit.Menu({
            id: 'layerMenu'
        });
        menu.addChild(new dijit.CheckedMenuItem({
            label: "Elevation",
            checked: false,
            onChange: function () {
                var e1 = map.getLayer("Elevation");
                e1.setVisibility(!e1.visible);
                var e2 = map2.getLayer("Elevation");
                e2.setVisibility(!e2.visible);
            }
        }));    
        menu.addChild(new dijit.CheckedMenuItem({
            label: "Water Depth",
            checked: true,
            onChange: function (checked) {
                for (var i = 0; i < SBDLayers.length; i++) {
                    SBDLayers.setVisibility(checked);
                    var e2 = map2.getLayer(SBDLayers.id);
                    e2.setVisibility(checked);
                }
            }
        }));
        menu.addChild(new dijit.CheckedMenuItem({
            label: "Dune Susceptibility",
            checked: true,
            onChange: function (checked) {
                for (var i = 0; i < SBDELayers.length; i++) {
                    SBDELayers.setVisibility(checked);
                    var e2 = map2.getLayer(SBDELayers.id);
                    e2.setVisibility(checked);
                }
            }
        }));                    
        dojo.forEach(layerList, function (layer) {
            menu.addChild(new dijit.CheckedMenuItem({
                label: layer.title,
                checked: layer.visible,
                onChange: function (checked) {
                    if (!operational) {
                        var e2 = map2.getLayer(layer.layer.id);
                        e2.setVisibility(checked);
                        layer.layer.setVisibility(!layer.layer.visible);
                    } else if (layer.layer.featureCollection) {
                        //turn off all the layers in the feature collection even
                        //though only the  main layer is listed in the layer list 
                        dojo.forEach(layer.layer.featureCollection.layers, function (layer) {
                            layer.layerObject.setVisibility(!layer.layerObject.visible);
                        });
                    } else {
                        layer.layer.setVisibility(!layer.layer.visible);
                    }

                }
            }));
        });
        var button = new dijit.form.DropDownButton({
            label: i18n.tools.layers.label,
            id: "layerBtn",
            iconClass: "esriLayerIcon",
            title: i18n.tools.layers.title,
            dropDown: menu
        });
        dojo.byId('webmap-toolbar-center').appendChild(button.domNode);
    }
}

//build a list of layers for the toggle layer list - this list
//is slightly different than the legend because we don't want to list lines,points,areas etc for each
//feature collection type. 
function buildLayerVisibleList(layers, operational) {
    var layerInfos = [];
    dojo.forEach(layers, function (mapLayer, index) {
        if (mapLayer.featureCollection && !mapLayer.layerObject) {
            if (mapLayer.featureCollection.layers) {
                //add the first layer in the layer collection... not all  - when we turn off the layers we'll 
                //turn them all off 
                if (mapLayer.featureCollection.layers) {
                    layerInfos.push({
                        "layer": mapLayer,
                            "visible": mapLayer.visibility,
                            "title": mapLayer.title
                    });
                }
            }
        } else if (mapLayer.layerObject) {
            layerInfos.push({
                layer: mapLayer.layerObject,
                visible: mapLayer.layerObject.visible,
                title: mapLayer.title
            });
        } else if (!operational) {//reallayers
            if (mapLayer.id.indexOf("SBD-") === -1 && mapLayer.id.indexOf("SBDE-") === -1 && mapLayer.id.indexOf("Elevation") === -1) {
                layerInfos.push({
                    "layer": mapLayer,
                    "visible": mapLayer.visible,
                    "title": mapLayer.title || mapLayer.displayname || mapLayer.name || mapLayer.folders[0].name
                });
            }            
        }
    });
    return layerInfos.sort(function(a,b){
        return (a.layer.id < b.layer.id) ? -1 : 1;
    });
}