nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Group Layer open in Layer List upon map load

AshleyPeters

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

Finde mehr Beiträge mit dem Tag

Accepted answers

UndralBatsukh

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

All comments

AshleyPeters

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!

Justin_Greco

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"
      }]];
    }
  }
});

RRubalcava

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#listItemCreatedFunction

Demo

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

UndralBatsukh

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

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.