const layerList = new LayerList({
  view: view,
  listItemCreatedFunction: function(event){
    const item = event.item;
    // displays the legend for each layer list item
    item.panel = {
      content: "legend"
    };
  }
});

Property Overview

Property Details

classNameString

Adds a CSS class used to style a node that represents the panel. Clicking the node will open and close the panel. Typically, an icon font is used for this property. Esri Icon Fonts are automatically made available and can be used to represent this content. To use one of these provided icon fonts, you must prefix the class name with esri-. For example, the default icon font is esri-icon-layer-list.

Default Value:esri-icon-layer-list

contentWidget|HTMLElement|String|Array

The content displayed in the ListItem panel. This can be raw text, a Widget instance, an HTML Element, or an array of any of those elements.

If the text legend is used, then an instance of the Legend widget is placed in the content.

Example:

const layerList = new LayerList({
  view: view,
  listItemCreatedFunction: function(event){
    const item = event.item;
    // displays the legend for each layer list item
    item.panel = {
      content: "legend"
    };
  }
});

imageString

The URL or data URI of an image used to represent the panel. This property will be used as a background image for the node. If neither image nor className are specified, a default icon will display.

listItemListItem

The panel's parent ListItem that represents a layer in the map.

openBoolean

Indicates if the panel's content is open and visible to the user. This is different from the visible property, which is used for toggling the visibility of the icon used to control whether the content is expanded or collapsed.

Default Value:false

Example:

const layerList = new LayerList({
  view: view,
  listItemCreatedFunction: function(event){
    const item = event.item;
    // displays the legend for each layer list item
    // The legend is open by default, but the user
    // is prevented from collapsing that content
    item.panel = {
      content: "legend",
      open: true,
      visible: false
    };
  }
});

titleString

The title of the panel. By default, this title matches the ListItem's title. Changing this value will not change the title of the ListItem in the LayerList.

visibleBoolean

Indicates if the node containing the image or icon font is visible to the user. Setting this value to false will prevent the user from toggling the visibility of the panel's content. Use open to programmatically set the visibility of the panel's content.

Default Value:true

Example:

const layerList = new LayerList({
  view: view,
  listItemCreatedFunction: function(event){
    const item = event.item;
    // displays the legend for each layer list item
    // The legend is open by default, but the user
    // is prevented from collapsing that content
    item.panel = {
      content: "legend",
      open: true,
      visible: false
    };
  }
});