arcgis-catalog-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.

A collection of ListItems representing the CatalogLayer's dynamicGroupLayer.

The CatalogLayer to display in the component.

catalogLayerListElement.catalogLayer = new CatalogLayer({ url });

Since

ArcGIS Maps SDK for JavaScript 4.33

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

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

See also

• showCollapseButton

catalogLayerListElement.collapsed = true;

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

See also

• showFilter

catalogLayerListElement.filterPlaceholder = "Filter layers";

Since

ArcGIS Maps SDK for JavaScript 4.32

Specifies a function to handle filtering list items.

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

The value of the filter input if showFilter is true.

See also

• showFilter

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

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>Catalog 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

catalogLayerListElement.headingLevel = 3;

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

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.

catalogLayerListElement.listItemCreatedFunction = (event) => {
  const { item } = event;
  const { layer } = item;

  if (isLayerFromCatalog(layer)) {
    item.actionsSections = [
      [
        {
          title: "Add layer to map",
          icon: "add-layer",
          id: "add-layer"
        }
      ]
    ];
  }
}

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

See also

• showFilter

catalogLayerListElement.showFilter = true;
catalogLayerListElement.minFilterItems = 5;

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 catalogItems selected by the user.

See also

• selectionMode

• catalogItems

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

catalogLayerListElement.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 CatalogLayerList#minFilterItems, allowing users to filter layers by their title.

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to display the component's heading. The heading text is "Layer List". The heading level can be set with the CatalogLayerList#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 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-catalog-layer-list component will be associated with a map or scene component rather than using the view property.

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.

catalogLayerListElement.visibilityAppearance = "checkbox";

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

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

Permanently destroy the component.