Basemap Layer List

ESM:

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

CDN:

No specific import is needed for this component.

The Basemap Layer List 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

Property	Attribute	Type
`autoDestroyDisabled`	`auto-destroy-disabled`	`boolean`
`baseFilterPredicate`		`(((item: ListItem) => void))`
`baseFilterText`	`base-filter-text`	`string`
`baseItems` readonly		`Collection<ListItem>`
`baseListItemCreatedFunction`		`(((event: ListItemCreatedHandlerEvent) => void))`
`basemapTitle`	`basemap-title`	`string`
`catalogLayerList` readonly		`CatalogLayerList`
`catalogOptions`		`BasemapLayerListCatalogOptions`
`closed`	`closed`	`boolean`
`collapsed`	`collapsed`	`boolean`
`dragEnabled`	`drag-enabled`	`boolean`
`editingTitle`	`editing-title`	`boolean`
`filterPlaceholder`	`filter-placeholder`	`string`
`headingLevel`	`heading-level`	`number`
`hideBaseLayers`	`hide-base-layers`	`boolean`
`hideFlow`	`hide-flow`	`boolean`
`hideHeading`	`hide-heading`	`boolean`
`hideReferenceLayers`	`hide-reference-layers`	`boolean`
`hideStatusIndicators`	`hide-status-indicators`	`boolean`
`icon`	`icon`	`string`
`label`	`label`	`string`
`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`
`referenceFilterPredicate`		`(((item: ListItem) => void))`
`referenceFilterText`	`reference-filter-text`	`string`
`referenceItems` readonly		`Collection<ListItem>`
`referenceListItemCreatedFunction`		`(((event: ListItemCreatedHandlerEvent) => void))`
`selectedItems`		`Collection<ListItem>`
`selectionMode`	`selection-mode`	`"multiple" \| "none" \| "single" \| "single-persist"`
`showCloseButton`	`show-close-button`	`boolean`
`showCollapseButton`	`show-collapse-button`	`boolean`
`showEditTitleButton`	`show-edit-title-button`	`boolean`
`showErrors`	`show-errors`	`boolean`
`showFilter`	`show-filter`	`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

baseFilterPredicate

Property

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

Specifies a function to handle filtering base layer list items.

Default value: null

baseFilterText

Property

baseFilterText: string

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

Attribute: base-filter-text
Default value: ""

baseItems

readonlyProperty

baseItems: Collection<ListItem>

A collection of ListItems representing the baseLayers.

baseListItemCreatedFunction

Property

baseListItemCreatedFunction: (((event: ListItemCreatedHandlerEvent) => void))

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

basemapTitle

Property

basemapTitle: string

The current basemap's title.

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.

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

dragEnabled

Property

dragEnabled: boolean

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

Attribute: drag-enabled
Default value: false

editingTitle

Property

editingTitle: boolean

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

Attribute: editing-title
Default value: false

filterPlaceholder

Property

filterPlaceholder: string

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

Attribute: filter-placeholder
Default value: ""

headingLevel

Property

headingLevel: number

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

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).

See also

Calcite Icons

Attribute: icon
Default value: "layers"

label

Property

label: string

The widget's default label.

Attribute: label

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

referenceFilterPredicate

Property

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

Specifies a function to handle filtering reference layer list items.

Default value: null

referenceFilterText

Property

referenceFilterText: string

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

Attribute: reference-filter-text
Default value: ""

referenceItems

readonlyProperty

referenceItems: Collection<ListItem>

A collection of ListItems representing the referenceLayers.

referenceListItemCreatedFunction

Property

referenceListItemCreatedFunction: (((event: ListItemCreatedHandlerEvent) => void))

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

selectedItems

Property

selectedItems: Collection<ListItem>

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

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

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

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 arcgisBasemapLayerList = document.querySelector("arcgis-basemap-layer-list");
document.body.append(arcgisBasemapLayerList);
await arcgisBasemapLayerList.componentOnReady();
console.log("arcgis-basemap-layer-list is ready to go!");

Returns: Promise<void>

destroy

Method

destroy(): Promise<void>

Permanently destroy the component.

Returns: Promise<void>