AnsweredAssumed Answered

Collapsible Layer List

Question asked by jay.kapalczynski on Nov 14, 2018
Latest reply on Nov 14, 2018 by jay.kapalczynski

Looking for any examples of a collapsible layer list that Auto fills with my layers.

I have seen some really basic layer list examples on the api page but nothing that allows collapsible areas and auto filling of your layers.

 

I am trying to create 3 different areas as seen below.  Were the box next to the ------------- would collapse that section.

But I want it to auto fill the layers from my .js page.

 

 

Right now I am adding layers to the list and adding check boxes BUT THERE it is not collapsible 

 

legendLayers.push({ layer: FloodZonelayer, title: 'Flood Zones' });


// ADD CHECK BOXES FOR LAYERS
map.on('layers-add-result', function () {
//add check boxes
arrayUtils.forEach(legendLayers, function (layer) {
var layerName = layer.title;
var checkBox = new CheckBox({
name: "checkBox" + layer.layer.id,
value: layer.layer.id,
checked: layer.layer.visible
});
checkBox.on("change", function () {
var targetLayer = map.getLayer(this.value);
targetLayer.setVisibility(!targetLayer.visible);
this.checked = targetLayer.visible;
});
//add the check box and label to the toc
domConstruct.place(checkBox.domNode, dom.byId("toggle"), "after");
var checkLabel = domConstruct.create('label', {
'for': checkBox.name,
innerHTML: layerName
}, checkBox.domNode, "after");
domConstruct.place("<br />", checkLabel, "after");
});
});

//ADD THE LEGEND AND XY COORDINATES
map.on("layers-add-result", function (evt) {

// CYCLE through and grab all the layer names to add to the LEGEND PLUS
// Remove layers not inteneted for the legend.
var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
if (layer.layer.id === "PastLocations" || layer.layer.id === "District" || layer.layer.id === "weatherlayer") { return { }; } //Hides Layers in the Legend
else { return { layer: layer.layer, title: layer.layer.name }; } //Else return All others
});
// CYCLE through and grab all the layer names to add to the LEGEND
if (layerInfo.length > 0) {
var legendDijit = new Legend({
map: map,
layerInfos: layerInfo,
}, "legend");
legendDijit.startup();
legendDijit.refresh();
}

});

Outcomes