I'm working with a single group layer in the layer list widget. By default, the group layer is visible, but collapsed upon map load. For ease of use for the end user, I would like the group layer to be open/expanded when the map loads. I believe I can achieve this by changing the CSS for the widget. I've added this block of code to the style and have tried different things, but haven't been able to get the group layer to be open upon map load. Any assistance is appreciated.
.esri-layer-list__child-toggle .esri-layer-list__child-toggle-icon--opened,
.esri-layer-list__child-toggle .esri-layer-list__child-toggle-icon--closed-rtl,
.esri-layer-list__child-toggle--open .esri-layer-list__child-toggle-icon--closed {
display: none;
}
.esri-layer-list__child-toggle--open .esri-layer-list__child-toggle-icon--opened {
display: block;
}
Solved! Go to Solution.
Hi there,
You don't have to do this via CSS. You can set the LayerList.listItemCreatedFunction to expand the grouplayer on start. The code snippet in the SDK doc shows this and the following is the code.
const layerList = new LayerList({
view: view,
// executes for each ListItem in the LayerList
listItemCreatedFunction: defineActions
});
// Add widget to the top right corner of the view
view.ui.add(layerList, "top-right");
function defineActions(event) {
const item = event.item;
if (item.layer.type === "group"){
item.open = true;
}
}
Hope this helps,
-Undral
Hi there,
You don't have to do this via CSS. You can set the LayerList.listItemCreatedFunction to expand the grouplayer on start. The code snippet in the SDK doc shows this and the following is the code.
const layerList = new LayerList({
view: view,
// executes for each ListItem in the LayerList
listItemCreatedFunction: defineActions
});
// Add widget to the top right corner of the view
view.ui.add(layerList, "top-right");
function defineActions(event) {
const item = event.item;
if (item.layer.type === "group"){
item.open = true;
}
}
Hope this helps,
-Undral
Edit: Beaten by Undral!
You don't need to use CSS for this. You can use the listItemCreatedFunction to iterate through the items in the LayerList and determine which ones you want open by default.
Demo
Hi Ashley, you can achieve this by using the listItemCreatedFunction property of the LayerList. Then set open to true for the ListItem for the layer you want expanded.
let layerList = new LayerList({
view: view,
// executes for each ListItem in the LayerList
listItemCreatedFunction: function (event) {
// The event object contains properties of the
// layer in the LayerList widget.
let item = event.item;
if (item.title === "US Demographics") {
// open the list item in the LayerList
item.open = true;
// change the title to something more descriptive
item.title = "Population by county";
// set an action for zooming to the full extent of the layer
item.actionsSections = [[{
title: "Go to full extent",
className: "esri-icon-zoom-out-fixed",
id: "full-extent"
}]];
}
}
});
Wow, thank you all! I looked at actions, but didn't see anything that made sense for a solution. But, that worked like a charm. Always good to learn something new!