Catalog Layer List

ESM:

Use dark colors for code blocksCopy
import "@arcgis/map-components/components/arcgis-catalog-layer-list";

CDN:

No specific import is needed for this component.

The Catalog Layer List component provides a way to display and interact with CatalogLayers.

Demo

Properties

Property	Attribute	Type
`autoDestroyDisabled`	`auto-destroy-disabled`	`boolean`
`catalogItems` readonly		`Collection<ListItem>`
`catalogLayer`		`CatalogLayer`
`closed`	`closed`	`boolean`
`collapsed`	`collapsed`	`boolean`
`filterPlaceholder`	`filter-placeholder`	`string`
`filterPredicate`		`(((item: ListItem) => void))`
`filterText`	`filter-text`	`string`
`headingLevel`	`heading-level`	`number`
`hideFlow`	`hide-flow`	`boolean`
`hideStatusIndicators`	`hide-status-indicators`	`boolean`
`icon`	`icon`	`string`
`label`	`label`	`string`
`listItemCreatedFunction`		`(((event: CatalogLayerListListItemCreatedHandlerEvent) => void))`
`minFilterItems`	`min-filter-items`	`number`
`position`	`position`	`"bottom-leading" \| "bottom-left" \| "bottom-right" \| "bottom-trailing" \| "manual" \| "top-leading" \| "top-left" \| "top-right" \| "top-trailing"`
`referenceElement`	`reference-element`	`HTMLArcgisLinkChartElement \| HTMLArcgisMapElement \| HTMLArcgisSceneElement \| string`
`selectedItems`		`Collection<ListItem>`
`selectionMode`	`selection-mode`	`"multiple" \| "none" \| "single" \| "single-persist"`
`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`	`"disabled" \| "loading" \| "ready"`
`visibilityAppearance`	`visibility-appearance`	`"checkbox" \| "default"`

autoDestroyDisabled

Property

autoDestroyDisabled: 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

catalogItems

readonlyProperty

catalogItems: Collection<ListItem>

A collection of ListItems representing the catalogLayers dynamicGroupLayer.

catalogLayer

Property

catalogLayer: CatalogLayer

The CatalogLayer to display in the widget.

Default value: null

closed

Property

closed: boolean

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

Attribute: closed
Default value: false

collapsed

Property

collapsed: boolean

Indicates whether the widget is collapsed.

Attribute: collapsed
Default value: false

filterPlaceholder

Property

filterPlaceholder: string

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

Attribute: filter-placeholder
Default value: ""

filterPredicate

Property

filterPredicate: (((item: ListItem) => void))

Specifies a function to handle filtering list items.

Default value: null

filterText

Property

filterText: string

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

Attribute: filter-text
Default value: ""

headingLevel

Property

headingLevel: number

Indicates the heading level to use for the heading of the widget.

Attribute: heading-level
Default value: 2

hideFlow

Property

hideFlow: boolean

Attribute: hide-flow
Default value: false

hideStatusIndicators

Property

hideStatusIndicators: boolean

Attribute: hide-status-indicators
Default value: false

icon

Property

icon: string

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

Attribute: icon
Default value: "catalog-dataset"

label

Property

label: string

The widget's default label.

listItemCreatedFunction

Property

listItemCreatedFunction: (((event: CatalogLayerListListItemCreatedHandlerEvent) => void))

A function that executes each time a ListItem is created.

Default value: null

minFilterItems

Property

minFilterItems: number

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

Attribute: min-filter-items
Default value: 10

position

Property

position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"

Attribute: position
Default value: "bottom-left"

referenceElement

Property

referenceElement: HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string

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

selectedItems: Collection<ListItem>

A collection of selected ListItems representing catalogItems selected by the user.

selectionMode

Property

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

Specifies the selection mode.

Attribute: selection-mode
Default value: "none"

showCloseButton

Property

showCloseButton: boolean

Attribute: show-close-button
Default value: false

showCollapseButton

Property

showCollapseButton: boolean

Attribute: show-collapse-button
Default value: false

showErrors

Property

showErrors: boolean

Attribute: show-errors
Default value: false

showFilter

Property

showFilter: boolean

Attribute: show-filter
Default value: false

showHeading

Property

showHeading: boolean

Attribute: show-heading
Default value: false

showTemporaryLayerIndicators

Property

showTemporaryLayerIndicators: boolean

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

state

readonly

Property

state: "disabled" | "loading" | "ready"

The current state of the component.

Attribute: state
Default value: "disabled"

visibilityAppearance

Property

visibilityAppearance: "checkbox" | "default"

Determines the icons used to indicate visibility.

Attribute: visibility-appearance
Default value: "default"

Slots

No slots to display.

Events

Event	Type
`arcgisClose`	`CustomEvent<void>`
`arcgisPropertyChange`	`CustomEvent<{ name: "state"; }>`
`arcgisReady`	`CustomEvent<void>`
`arcgisTriggerAction`	`CatalogLayerListTriggerActionEvent`

arcgisClose

Event

arcgisClose: CustomEvent<void>

Emitted when the component's close button is clicked.

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 is ready to be interacted with.

arcgisTriggerAction

Event

arcgisTriggerAction: CatalogLayerListTriggerActionEvent

Emitted when an action is triggered on the component.

Methods

Method	Signature
`componentOnReady`	`componentOnReady(): Promise<void>`
`destroy`	`destroy(): Promise<void>`

componentOnReady

Method

componentOnReady(): Promise<void>

Create a promise that resolves once component is fully loaded.

Example

Use dark colors for code blocksCopy
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!");

Returns: Promise<void>

destroy

Method

destroy(): Promise<void>

Permanently destroy the component.

Returns: Promise<void>