Select to view content in your preferred language

Group Layer open in Layer List upon map load

925
4
Jump to solution
04-28-2023 12:29 PM
AshleyPeters
Occasional Contributor III

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;
  }
1 Solution

Accepted Solutions
UndralBatsukh
Esri Regular Contributor

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

View solution in original post

4 Replies
UndralBatsukh
Esri Regular Contributor

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

ReneRubalcava
Frequent Contributor II

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.

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#listItemCr...

Demo

https://codepen.io/odoe/pen/PoyKwyw?editors=100

Justin_Greco
Occasional Contributor III

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"
      }]];
    }
  }
});
AshleyPeters
Occasional Contributor III

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!

0 Kudos