arcgis-layer-list

If true, the component will not be destroyed automatically when it is disconnected from the document. This is useful when you want to move the component to a different place on the page, or temporarily hide it. If this is set, make sure to call the destroy() method when you are done to prevent memory leaks.

The CatalogLayerList that displays a catalog layer's dynamic group layer.

Since

ArcGIS Maps SDK for JavaScript 4.30

CatalogLayer specific properties. Catalog layers will display their CatalogLayer#dynamicGroupLayer as an expandable catalogLayerList in the LayerList component. This list item will only be displayed when catalog layers with dynamic group layers are loaded in the map. These are the properties that are used to configure the catalogLayerList.

See also

• catalogLayerList

layerListElement.catalogOptions = {
    listItemCreatedFunction: (event) => {
      const { item } = event;
      item.actionsSections = [
        [
          {
            title: "Add layer to map",
            icon: "add-layer",
            id: "add-layer"
          }
        ]
      ];
    },
    selectionMode: "single",
    visibleElements: {
      filter: true
    }
  };

Since

ArcGIS Maps SDK for JavaScript 4.33

Indicates whether a component is closed. When true, the component will be hidden.

Since

ArcGIS Maps SDK for JavaScript 4.29

Indicates whether the component is collapsed. When collapsed, only the collapse button and heading are displayed.

See also

• showCollapseButton

layerListElement.collapsed = true;

Since

ArcGIS Maps SDK for JavaScript 4.29

Indicates whether list items may be reordered within the list by dragging and dropping. MapImageLayer MapImageLayer#sublayers can be reordered only within their parent MapImageLayer and can not be dragged out as a separate layer. Drag won't be enabled until the number of list items is equal to or greater than than the value set set in minDragEnabledItems.

See also

• minDragEnabledItems

layerListElement.dragEnabled = true;

Since

ArcGIS Maps SDK for JavaScript 4.29

Placeholder text used in the filter input if visibleElements.filter is true.

See also

• showFilter

layerListElement.filterPlaceholder = "Filter layers";

Since

ArcGIS Maps SDK for JavaScript 4.32

Specifies a function to handle filtering list items.

layerListElement.filterPredicate = (item) => item.title.toLowerCase().includes("streets");

Since

ArcGIS Maps SDK for JavaScript 4.29

The value of the filter input if visibleElements.filter is true.

See also

• showFilter

reactiveUtils.watch(
  () => layerListElement.filterText,
  (filterText) => console.log(filterText)
);

Since

ArcGIS Maps SDK for JavaScript 4.29

Indicates the heading level to use for the heading of the component. By default, the heading is rendered as a level 2 heading (e.g., <h2>Layer List</h2>). Depending on the component's placement in your app, you may need to adjust this heading for proper semantics. This is important for meeting accessibility standards.

See also

• showHeading

layerListElement.headingLevel = 3;

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to display the LayerList#catalogLayerList.

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates whether the status indicators will be displayed.

Icon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component).

See also

• Calcite Icons

Since

ArcGIS Maps SDK for JavaScript 4.30

KnowledgeGraphLayer specific properties. Knowledge graph layers will display KnowledgeGraphLayer#tables as an expandable tableList in the LayerList component. This tables list item will only be displayed when knowledge graph layers with tables are loaded in the map. These are the properties that are used to configure the tableList.

See also

• tableList

layerListElement.knowledgeGraphOptions = {
  filterPlaceholder: "Filter tables",
  listItemCreatedFunction: (event) => {
    const { item } = event;
    item.actionsSections = [
      [
        {
          icon: "table",
          id: "open-table",
          title: "Show table"
        },
        {
          icon: "information",
          id: "information",
          title: "Show information"
        }
      ]
    ];
  },
  minFilterItems: 1,
  visibleElements: {
    errors: true,
    filter: true,
    statusIndicators: true
  }
}

The component's default label.

A function that executes each time a ListItem is created. Use this function to add actions and panels to list items, and to override the default settings of a list item. Actions can be added to list items using the ListItem#actionsSections property of the ListItem.

See also

• Sample - LayerList component with actions

layerListElement.listItemCreatedFunction = async function (event) {

    // The event object contains properties of the
    // layer in the LayerList component.

    let item = event.item;

    // Wait for the layer to load and the item title to become available
    await item.layer.when();

    if (item.title === "US Demographics") {
      // open the list item in the LayerList component
      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"
      }]];
    }
  };

Since

ArcGIS Maps SDK for JavaScript 4.29

The minimum number of list items required to enable drag and drop reordering with dragEnabled.

See also

• dragEnabled

layerListElement.dragEnabled = true;
layerListElement.minDragEnabledItems = 5;

Since

ArcGIS Maps SDK for JavaScript 4.29

The minimum number of list items required to display the visibleElements.filter input box.

See also

• showFilter

layerListElement.showFilter = true;
layerListElement.minFilterItems = 5;

Since

ArcGIS Maps SDK for JavaScript 4.31

A collection of Layers that are opened in a catalogLayerList or tableList flow item. This property is useful for backing out of the catalog layer list or table list programmatically to the parent layer list.

See also

• catalogLayerList

• tableList

// back out of the catalog layer list to the main layer list
layerListElement.openedLayers.pop();

A collection of ListItems representing operational layers.

By assigning the id attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.

See also

• Associate components with a Map or Scene component

A collection of selected ListItems representing operational layers selected by the user.

See also

• selectionMode

Since

ArcGIS Maps SDK for JavaScript 4.29

Specifies the selection mode. Selected items are available in the selectedItems property.

Value	Description
multiple	Allows any number of items to be selected at once. This is useful when you want to apply an operation to multiple items at the same time.
none	Disables selection. Use this when you want to prevent selecting items.
single	Allows only one item to be selected at a time. If another item is selected, the previous selection is cleared. This is useful when you want to ensure that a maximum of one item is selected at a time.
single-persist	Allows only one item to be selected at a time and prevents de-selection. Once an item is selected, it remains selected until another item is selected. This is useful when you want to ensure that there is always exactly one selected item.

See also

• selectedItems

layerListElement.selectionMode = "multiple";

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to display a close button in the header.

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to display a collapse button in the header.

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to display layers with load errors.

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to display a filter input box when then number of list items is equal to or greater than the value set in LayerList#minFilterItems, allowing users to filter layers by their title.

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to display the layer list heading. The heading text is "Layer List". The heading level can be set with the LayerList#headingLevel.

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates whether temporary layer indicators will be displayed for layers with Layer#persistenceEnabled set to false. A temporary icon will be displayed on the near side of the layer title.

The current state of the component.

The TableList that displays the tables associated with a KnowledgeGraphLayer.

The view associated with the component.

Note: The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this view property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-layer-list component will be associated with a map or scene component rather than using the view property.

Since

ArcGIS Maps SDK for JavaScript 4.29

Determines the icons used to indicate visibility.

Value	Description	Example
default	Displays view icons on the far side. Icons are hidden except on hover or if they have keyboard focus. See view-visible and view-hide calcite icons.
checkbox	Displays checkbox icons on the near side. See check-square-f and square calcite icons.

layerListElement.visibilityAppearance = "checkbox";

Creates a promise that resolves once the component is fully loaded.

const arcgisLayerList = document.querySelector("arcgis-layer-list");
document.body.append(arcgisLayerList);
await arcgisLayerList.componentOnReady();
console.log("arcgis-layer-list is ready to go!");

Permanently destroy the component.