Layer List

1
import "@arcgis/map-components/components/arcgis-layer-list";

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

Demo

Properties

PropertyAttributeType
auto-destroy-disabled
boolean
LayerListCatalogOptions
collapsed
boolean
drag-enabled
boolean
filter-placeholder
string
(((item: ListItem) => void))
filter-text
string
heading-level
number
hide-catalog-layer-list
boolean
hide-flow
boolean
hide-status-indicators
boolean
icon
string
LayerListKnowledgeGraphOptions
label
string
(((event: any) => void))
min-drag-enabled-items
number
min-filter-items
number
openedLayers
readonly
position
"bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"
reference-element
ArcgisLinkChart | ArcgisMap | ArcgisScene | string
selection-mode
"multiple" | "none" | "single" | "single-persist"
show-close-button
boolean
show-collapse-button
boolean
show-errors
boolean
show-filter
boolean
show-heading
boolean
show-temporary-layer-indicators
boolean
state
readonly
state
"disabled" | "loading" | "ready"
tableList
readonly
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.

Read more...

Default value
null

collapsed

Property
collapsed: boolean

Indicates whether the widget is collapsed.

Read more...

Attribute
collapsed
Default value
false

dragEnabled

Property
dragEnabled: boolean

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

Read more...

Attribute
drag-enabled
Default value
false

filterPlaceholder

Property
filterPlaceholder: string

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

Read more...

Attribute
filter-placeholder
Default value
""

filterPredicate

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

Specifies a function to handle filtering list items.

Read more...

Default value
null

filterText

Property
filterText: string

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

Read more...

Attribute
filter-text
Default value
""

headingLevel

Property
headingLevel: number

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

Read more...

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). Search Calcite Icons for possible values.

Attribute
icon
Default value
"layers"

knowledgeGraphOptions

Property
knowledgeGraphOptions: LayerListKnowledgeGraphOptions

KnowledgeGraphLayer specific properties.

Read more...

Default value
null

label

Property
label: string

The component's default label.

Attribute
label

listItemCreatedFunction

Property
listItemCreatedFunction: (((event: any) => void))

A function that executes each time a ListItem is created.

Read more...

Default value
null

minDragEnabledItems

Property
minDragEnabledItems: number

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

Read more...

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.

Read more...

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.

Read more...

Default value
[]

operationalItems

readonlyProperty
operationalItems: Collection<ListItem>

A collection of ListItems representing operational layers.

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: ArcgisLinkChart | ArcgisMap | ArcgisScene | string
Attribute
reference-element

selectedItems

Property
selectedItems: Collection<ListItem>

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

Read more...

selectionMode

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

Specifies the selection mode.

Read more...

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 view model's state.

Read more...

Attribute
state
Default value
"disabled"

tableList

readonlyProperty
tableList: TableList

The TableList that displays the tables associated with a KnowledgeGraphLayer.

visibilityAppearance

Property
visibilityAppearance: "checkbox" | "default"

Determines the icons used to indicate visibility.

Read more...

Attribute
visibility-appearance
Default value
"default"

Methods

MethodSignature
componentOnReady(): Promise<void>
destroy(): Promise<void>
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.

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
ParameterTypeOptional?
action
item
Returns
Promise<void>

Events

EventType
{ name: "state"; }
undefined
LayerListTriggerActionEvent

arcgisPropertyChange

Event
arcgisPropertyChange: { name: "state"; }

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

arcgisReady

Event
arcgisReady: undefined

arcgisTriggerAction

Event
arcgisTriggerAction: LayerListTriggerActionEvent

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close