Layer List

ESM:

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

CDN:

No specific import is needed for this component.

Since:ArcGIS Maps SDK for JavaScript 4.28

The Layer List component provides a way to display a list of layers, and switch on/off their visibility.

Demo

Properties

Property	Attribute	Type
`autoDestroyDisabled`	`auto-destroy-disabled`	`boolean`
`catalogLayerList` readonly		`CatalogLayerList`
`catalogOptions`		`LayerListCatalogOptions`
`closed`	`closed`	`boolean`
`collapsed` reflected	`collapsed`	`boolean`
`dragEnabled`	`drag-enabled`	`boolean`
`filterPlaceholder`	`filter-placeholder`	`string`
`filterPredicate`		`(((item: ListItem) => void))`
`filterText`	`filter-text`	`string`
`headingLevel`	`heading-level`	`number`
`hideCatalogLayerList`	`hide-catalog-layer-list`	`boolean`
`hideFlow`	`hide-flow`	`boolean`
`hideStatusIndicators`	`hide-status-indicators`	`boolean`
`icon`	`icon`	`string`
`knowledgeGraphOptions`		`LayerListKnowledgeGraphOptions`
`label`	`label`	`string`
`listItemCreatedFunction`		`(((event: LayerListListItemCreatedHandlerEvent) => void))`
`minDragEnabledItems`	`min-drag-enabled-items`	`number`
`minFilterItems`	`min-filter-items`	`number`
`openedLayers` readonly		`Collection<Layer>`
`operationalItems` readonly		`Collection<ListItem>`
`position` deprecated	`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` readonlyreflected	`state`	`"disabled" \| "loading" \| "ready"`
`tableList` readonly		`TableList`
`view`		`MapView \| SceneView`
`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

catalogLayerList

readonlyProperty

catalogLayerList: CatalogLayerList

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

catalogOptions

Property

catalogOptions: LayerListCatalogOptions

CatalogLayer specific properties.

Default value: null

closed

Property

closed: boolean

ArcGIS Maps SDK for JavaScript 4.33

Layer List since 4.28, closed added at 4.33.

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

dragEnabled

Property

dragEnabled: boolean

Indicates whether list items may be reordered within the list by dragging and dropping.

Attribute: drag-enabled
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

hideCatalogLayerList

Property

hideCatalogLayerList: boolean

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

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: "layers"

knowledgeGraphOptions

Property

knowledgeGraphOptions: LayerListKnowledgeGraphOptions

KnowledgeGraphLayer specific properties.

Default value: null

label

Property

label: string

The widget's default label.

listItemCreatedFunction

Property

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

A function that executes each time a ListItem is created.

Default value: null

minDragEnabledItems

Property

minDragEnabledItems: number

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

Attribute: min-drag-enabled-items
Default value: 2

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

openedLayers

readonlyProperty

openedLayers: Collection<Layer>

A collection of Layers that are opened in a catalogLayerList or tableList flow item.

operationalItems

readonlyProperty

operationalItems: Collection<ListItem>

A collection of ListItems representing operational layers.

position

deprecatedProperty

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

Deprecatedsince 4.34, use slot instead.

Attribute: position

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 operational layers 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"

tableList

readonlyProperty

tableList: TableList

The TableList that displays the tables associated with a KnowledgeGraphLayer.

view

Property

view: MapView | SceneView

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

Default value: null

visibilityAppearance

Property

visibilityAppearance: "checkbox" | "default"

Determines the icons used to indicate visibility.

Attribute: visibility-appearance
Default value: "default"

Methods

Method	Signature
`componentOnReady`	`componentOnReady(): Promise<void>`
`destroy`	`destroy(): Promise<void>`
`triggerAction`	`triggerAction(action: __esri.ActionButton \| __esri.ActionToggle, item: __esri.ListItem): 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 arcgisLayerList = document.querySelector("arcgis-layer-list");
document.body.append(arcgisLayerList);
await arcgisLayerList.componentOnReady();
console.log("arcgis-layer-list is ready to go!");

Returns: Promise<void>

destroy

Method

destroy(): Promise<void>

Permanently destroy the component.

Returns: Promise<void>

triggerAction

Method

triggerAction(action: __esri.ActionButton | __esri.ActionToggle, item: __esri.ListItem): Promise<void>

Parameters

Parameter	Type	Optional?
action	`ActionButton \| ActionToggle`
item	`ListItem`

Returns: Promise<void>

Events

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

arcgisClose

Event

arcgisClose: CustomEvent<void>

ArcGIS Maps SDK for JavaScript 4.33

Layer List since 4.28, arcgisClose added at 4.33.

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

arcgisTriggerAction

Event

arcgisTriggerAction: CustomEvent<LayerListTriggerActionEvent>

Emitted when an action is triggered on the component.