Basemap Layer List

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

BasemapLayerList component provides a way to display a list of Basemap layers and switch on/off their visibility. Base layers and reference layers are divided into separate sections. When editing is enabled, layers can be reordered by dragging and dropping between the lists and the title can be edited.

Demo

Properties

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

baseFilterPredicate

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

Specifies a function to handle filtering base layer list items.

Read more...

Default value
null

baseFilterText

Property
baseFilterText: string

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

Read more...

Attribute
base-filter-text
Default value
""

baseItems

readonlyProperty
baseItems: Collection<ListItem>

A collection of ListItems representing the baseLayers.

baseListItemCreatedFunction

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

Specifies a function that accesses each ListItem representing a base layer.

Read more...

basemapTitle

Property
basemapTitle: string

The current basemap's title.

Read more...

Attribute
basemap-title

catalogLayerList

readonlyProperty
catalogLayerList: CatalogLayerList

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

catalogOptions

Property
catalogOptions: BasemapLayerListCatalogOptions

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

editingTitle

Property
editingTitle: boolean

Indicates whether the form to edit the basemap's title is currently visible.

Read more...

Attribute
editing-title
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
""

headingLevel

Property
headingLevel: number

Indicates the heading level to use for the widget title (i.e.

Read more...

Attribute
heading-level
Default value
2

hideBaseLayers

Property
hideBaseLayers: boolean
Attribute
hide-base-layers
Default value
false

hideFlow

Property
hideFlow: boolean
Attribute
hide-flow
Default value
false

hideHeading

Property
hideHeading: boolean
Attribute
hide-heading
Default value
false

hideReferenceLayers

Property
hideReferenceLayers: boolean
Attribute
hide-reference-layers
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"

label

Property
label: string

The component's default label.

Attribute
label

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

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

referenceFilterPredicate

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

Specifies a function to handle filtering reference layer list items.

Read more...

Default value
null

referenceFilterText

Property
referenceFilterText: string

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

Read more...

Attribute
reference-filter-text
Default value
""

referenceItems

readonlyProperty
referenceItems: Collection<ListItem>

A collection of ListItems representing the referenceLayers.

referenceListItemCreatedFunction

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

Specifies a function that accesses each ListItem representing a reference layer.

Read more...

selectedItems

Property
selectedItems: Collection<ListItem>

A collection of selected ListItems representing basemap 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

showEditTitleButton

Property
showEditTitleButton: boolean
Attribute
show-edit-title-button
Default value
false

showErrors

Property
showErrors: boolean
Attribute
show-errors
Default value
false

showFilter

Property
showFilter: boolean
Attribute
show-filter
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"

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>

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>

Events

EventType
{ name: "state"; }
undefined
BasemapLayerListTriggerActionEvent

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

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