arcgis-catalog-layer-list-next | References | ArcGIS Maps SDK for JavaScript

ESM

import "@arcgis/map-components/components/arcgis-catalog-layer-list-next";

Inheritance: ArcgisCatalogLayerListNext→HTMLElement

Since: ArcGIS Maps SDK for JavaScript 5.2

beta

The Catalog Layer List (next) component is the successor to the Catalog Layer List component, provided to you early for testing and feedback. In version 6.0, the implementation of arcgis-catalog-layer-list will be updated under the hood to that of arcgis-catalog-layer-list-next, and this component will be removed. To update at version 6.0, simply remove -next from the component name.

The Catalog Layer List provides a way to display and interact with CatalogLayers. The component displays a list of layers in the dynamicGroupLayer and allows you to toggle their visibility.

The Item API provides access to each layer's properties, allows the developer to configure actions related to the layer, and allows the developer to add content to the item related to the layer.

Demo

Example

const catalogLayerListElement = document.createElement("arcgis-catalog-layer-list-next");
catalogLayerListElement.referenceElement = viewElement;
catalogLayerListElement.slot = "top-right";
viewElement.appendChild(catalogLayerListElement);

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

// Listen for the arcgisTriggerAction event on the CatalogLayerList
// and add layers from the catalog to the map when the "add-layer" action is triggered.
// To correctly add a layer to the map, you must create a footprint from the layer
// and then create a new layer from the footprint.
catalogLayerListElement.addEventListener("arcgisTriggerAction", async (event) => {
  const { id } = event.detail.action;
  const { layer } = event.detail.item;

  if (id === "add-layer") {
    const parentCatalogLayer = catalogUtils.getCatalogLayerForLayer(layer);
    const footprint = parentCatalogLayer.createFootprintFromLayer(layer);
    const layerFromFootprint = await parentCatalogLayer.createLayerFromFootprint(footprint);
    viewElement.map.add(layerFromFootprint);
  }
});

Properties

Property	Attribute	Type
autoDestroyDisabled	auto-destroy-disabled	boolean
catalogItems		Collection<Item>
catalogLayer		CatalogLayer \| null \| undefined
closed	closed	boolean
collapsed	collapsed	boolean
filterPlaceholder	filter-placeholder	string
filterPredicate		Parameters<typeof setFilterPredicate>[1] \| undefined
filterText	filter-text	string
headingLevel	heading-level	HeadingLevel
hideCatalogLayerList	hide-catalog-layer-list	boolean
hideNoFilterResultsNotice	hide-no-filter-results-notice	boolean
hideNoItemsNotice	hide-no-items-notice	boolean
hideStatusIndicators	hide-status-indicators	boolean
label	label	string \| undefined
listItemCreatedFunction		ItemModifier \| null \| undefined
listModeDisabled	list-mode-disabled	boolean
messageOverrides		Record<string, unknown> \| undefined
minFilterItems	min-filter-items	number
openedLayers readonly		Collection<FlowLayer>
referenceElement	reference-element	ArcgisReferenceElement \| string \| undefined
selectedItems		Collection<Item>
selectionMode	selection-mode	"multiple" \| "none" \| "single-persist" \| "single"
showCloseButton	show-close-button	boolean
showCollapseButton	show-collapse-button	boolean
showErrors	show-errors	boolean
showFilter	show-filter	boolean
showHeading	show-heading	boolean
showTemporaryLayerIndicators	show-temporary-layer-indicators	boolean
state readonly		State
topLayerDisabled	top-layer-disabled	boolean
view		MapViewOrSceneView \| null \| undefined
visibilityAppearance	visibility-appearance	VisibilityAppearance

autoDestroyDisabled

Property

Type: boolean

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.

Attribute: auto-destroy-disabled
Default value: false

Example

<arcgis-catalog-layer-list-next auto-destroy-disabled></arcgis-catalog-layer-list-next>

catalogLayerListNextElement.autoDestroyDisabled = true;

catalogItems

Property

Type: Collection<Item>

A collection of items representing the CatalogLayer's dynamicGroupLayer.

Example

catalogLayerListElement.catalogItems.forEach(item => console.log(item.title));

catalogLayer

Property

Type: CatalogLayer | null | undefined

The CatalogLayer to display in the component.

Example

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

closed

Property

Type: boolean

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

Attribute: closed
Default value: false

Example

<arcgis-catalog-layer-list-next closed></arcgis-catalog-layer-list-next>

catalogLayerListNextElement.closed = true;

collapsed

Property

Type: boolean

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

Attribute: collapsed
Default value: false

Example

<arcgis-catalog-layer-list-next collapsed></arcgis-catalog-layer-list-next>

catalogLayerListNextElement.collapsed = true;

filterPlaceholder

Property

Type: string

Placeholder text used in the filter input when filtering is enabled.

Attribute: filter-placeholder
Default value: ""

Example

<arcgis-catalog-layer-list-next filter-placeholder="Search..."></arcgis-catalog-layer-list-next>

catalogLayerListNextElement.filterPlaceholder = "Search...";

filterPredicate

Property

Type: Parameters<typeof setFilterPredicate>[1] | undefined

Specifies a function to determine whether a list item should be included in filter results.

Example

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

filterText

Property

Type: string

The value of the filter input text string when filtering is enabled.

Attribute: filter-text
Default value: ""

Example

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

headingLevel

Property

Type: HeadingLevel

Indicates the heading level to use for the heading of the component. By default, the heading is rendered as a <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

HTML heading elements

Attribute: heading-level
Default value: 2

Example

<arcgis-catalog-layer-list-next heading-level="2"></arcgis-catalog-layer-list-next>

catalogLayerListNextElement.headingLevel = 2;

hideCatalogLayerList

Property

Type: boolean

Indicates whether to hide the catalog layer list in the component.

Attribute: hide-catalog-layer-list
Default value: false

Example

<arcgis-catalog-layer-list-next hide-catalog-layer-list></arcgis-catalog-layer-list-next>

catalogLayerListNextElement.hideCatalogLayerList = true;

hideNoFilterResultsNotice

Property

Type: boolean

Indicates whether to hide the notice that appears when no results are found after filtering.

Attribute: hide-no-filter-results-notice
Default value: false

Example

<arcgis-catalog-layer-list-next hide-no-filter-results-notice></arcgis-catalog-layer-list-next>

catalogLayerListNextElement.hideNoFilterResultsNotice = true;

hideNoItemsNotice

Property

Type: boolean

Indicates whether to hide the notice that appears when there are no items to display.

Attribute: hide-no-items-notice
Default value: false

Example

<arcgis-catalog-layer-list-next hide-no-items-notice></arcgis-catalog-layer-list-next>

catalogLayerListNextElement.hideNoItemsNotice = true;

hideStatusIndicators

Property

Type: boolean

Indicates whether to hide status indicators in the component.

Attribute: hide-status-indicators
Default value: false

Example

<arcgis-catalog-layer-list-next hide-status-indicators></arcgis-catalog-layer-list-next>

catalogLayerListNextElement.hideStatusIndicators = true;

label

Property

Type: string | undefined

The component's default label.

Attribute: label

listItemCreatedFunction

Property

Type: ItemModifier | null | undefined

A function that executes each time a list item is created. Use this function to configure the list item, including its title, actions, and panels.

Examples

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

catalogLayerListNextElement.listItemCreatedFunction = async (event) => {
  // Destructure the item from the event object
  const {item} = event;

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

  // If the item's title matches "US Demographics", customize the list item
  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",
      icon: "zoom-out-fixed",
      id: "full-extent"
    }]];
  }
};

listModeDisabled

Property

Type: boolean

Specifies whether to ignore the listMode property to display all layers. A common use case for listModeDisabled is when you want to use the component to manage and configure a layer's listMode value.

See also

listMode

Attribute: list-mode-disabled
Default value: false

Example

<arcgis-catalog-layer-list-next list-mode-disabled></arcgis-catalog-layer-list-next>

catalogLayerListNextElement.listModeDisabled = true;

messageOverrides

Property

Type: Record<string, unknown> | undefined

Replace localized message strings with your own strings.

Note: Individual message keys may change between releases.

minFilterItems

Property

Type: number

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

Attribute: min-filter-items
Default value: 10

Example

<arcgis-catalog-layer-list-next min-filter-items="3"></arcgis-catalog-layer-list-next>

catalogLayerListNextElement.minFilterItems = 3;

openedLayers

readonly Property

Type: Collection<FlowLayer>

A collection of layers opened in a flow item within the component. Use this property to navigate back programmatically by removing the last opened layer.

Example

// back out of the flow item to the main layer list
catalogLayerListNext.openedLayers.pop();

referenceElement

Property

Type: ArcgisReferenceElement | string | undefined

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

Attribute: reference-element

selectedItems

Property

Type: Collection<Item>

A collection of selected items in the list. This collection is updated when the user changes selection and is only populated when selectionMode is not set to "none".

See also

selectionMode

Example

reactiveUtils.watch(
  () => catalogLayerListNext.selectedItems?.at(0)?.layer,
  (layer) => {
    layer && handleLayerSelection(layer);
  },
);

selectionMode

Property

Type: "multiple" | "none" | "single-persist" | "single"

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

Attribute: selection-mode
Default value: "none"

Example

<arcgis-catalog-layer-list-next selection-mode="multiple"></arcgis-catalog-layer-list-next>

catalogLayerListNextElement.selectionMode = "multiple";

showCloseButton

Property

Type: boolean

This property provides the ability to show or hide the close button. When the close button is shown, the ESC key can be used to close the component via keyboard when the focus is within the component.

Attribute: show-close-button
Default value: false

Example

<arcgis-catalog-layer-list-next show-close-button></arcgis-catalog-layer-list-next>

catalogLayerListNextElement.showCloseButton = true;

showCollapseButton

Property

Type: boolean

This property provides the ability to show or hide the collapse button.

Attribute: show-collapse-button
Default value: false

Example

<arcgis-catalog-layer-list-next show-collapse-button></arcgis-catalog-layer-list-next>

catalogLayerListNextElement.showCollapseButton = true;

showErrors

Property

Type: boolean

This property provides the ability to show or hide layer error indicators.

Attribute: show-errors
Default value: false

Example

<arcgis-catalog-layer-list-next show-errors></arcgis-catalog-layer-list-next>

catalogLayerListNextElement.showErrors = true;

showFilter

Property

Type: boolean

This property provides the ability to show or hide the filter input box when then number of list items is equal to or greater than the value set in minFilterItems, allowing users to filter layers by their title.

Attribute: show-filter
Default value: false

Example

<arcgis-catalog-layer-list-next show-filter></arcgis-catalog-layer-list-next>

catalogLayerListNextElement.showFilter = true;

showHeading

Property

Type: boolean

This property provides the ability to show or hide the heading.

Attribute: show-heading
Default value: false

Example

<arcgis-catalog-layer-list-next show-heading></arcgis-catalog-layer-list-next>

catalogLayerListNextElement.showHeading = true;

showTemporaryLayerIndicators

Property

Type: boolean

This property provides the ability to show or hide the temporary layer indicators for layers with Layer#persistenceEnabled set to false. A temporary icon will be displayed on the near side of the layer title.

Attribute: show-temporary-layer-indicators
Default value: false

Example

<arcgis-catalog-layer-list-next show-temporary-layer-indicators></arcgis-catalog-layer-list-next>

catalogLayerListNextElement.showTemporaryLayerIndicators = true;

state

readonly Property

Type: State

The current state of the component.

topLayerDisabled

Property

Type: boolean

Attribute: top-layer-disabled
Default value: false

view

Property

Type: MapViewOrSceneView | null | undefined

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-next component will be associated with a map or scene component rather than using the view property.

visibilityAppearance

Property

Type: VisibilityAppearance

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.

Attribute: visibility-appearance
Default value: "default"

Example

<arcgis-catalog-layer-list-next visibility-appearance="checkbox"></arcgis-catalog-layer-list-next>

catalogLayerListNextElement.visibilityAppearance = "checkbox";

Methods

Method	Signature
componentOnReady inherited	componentOnReady(): Promise<this>
destroy	destroy(): Promise<void>

componentOnReady

inherited Method

Signature: componentOnReady (): Promise<this>

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

Returns: Promise<this>

Example

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

destroy

Method

Signature: destroy (): Promise<void>

Permanently destroy the component.

Returns: Promise<void>

Events

Name	Type
arcgisCatalogItemsChange	CustomEvent<void>
arcgisFilterChange	CustomEvent<void>
arcgisOpenedLayersChange	CustomEvent<void>
arcgisPropertyChange	CustomEvent<{ name: "state"; }>
arcgisReady	CustomEvent<void>
arcgisSelectedItemsChange	CustomEvent<void>
arcgisTriggerAction	CustomEvent<LayerListModelEvents["trigger-action"]>

arcgisCatalogItemsChange

Event

arcgisCatalogItemsChange: CustomEvent<void>

Emitted when the catalogItems changes.

arcgisFilterChange

Event

arcgisFilterChange: CustomEvent<void>

Emitted when the value of the filterText input changes.

arcgisOpenedLayersChange

Event

arcgisOpenedLayersChange: CustomEvent<void>

Emitted when the collection of openedLayers changes.

arcgisPropertyChange

Event

arcgisPropertyChange: CustomEvent<{ name: "state"; }>

Emitted when the value of a property is changed. Use this to listen to changes to properties.

arcgisReady

Event

arcgisReady: CustomEvent<void>

Emitted when the component associated with a map or scene view is ready for user interaction.

arcgisSelectedItemsChange

Event

arcgisSelectedItemsChange: CustomEvent<void>

Emitted when the collection of selectedItems changes.

arcgisTriggerAction

Event

arcgisTriggerAction: CustomEvent<LayerListModelEvents["trigger-action"]>

Emitted when an action is triggered on the component.