import LayerListViewModel from "@arcgis/core/widgets/LayerList/LayerListViewModel.js";const LayerListViewModel = await $arcgis.import("@arcgis/core/widgets/LayerList/LayerListViewModel.js");- Inheritance:
- LayerListViewModel→
Accessor
- Since
- ArcGIS Maps SDK for JavaScript 4.2
Provides the logic for the LayerList widget and component.
To hide layers in the map from the LayerList widget, set the
Layer.listMode property on the layer(s) to hide.
Constructors
Constructor
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| properties | | |
Properties
| Property | Type | Class |
|---|---|---|
| | ||
declaredClass readonly inherited | ||
| | ||
| | ||
operationalItems readonly | | |
state readonly | | |
| |
checkPublishStatusEnabled
- Type
- boolean
- Since
- ArcGIS Maps SDK for JavaScript 4.25
Whether to provide an indication if a layer is being published in the
LayerList. When a layer is publishing,
a rotating square will appear to the right of the list item title.
The ListItem.publishing property
will be false if checkPublishStatusEnabled is false.
- Default value
- false
listItemCreatedFunction
- Type
- ListItemModifier | null | undefined
- Since
- ArcGIS Maps SDK for JavaScript 4.4
Specifies a function that accesses each ListItem. Each list item can be modified according to its modifiable properties. Actions can be added to list items using the ListItem.actionsSections property.
Example
layerListViewModel.listItemCreatedFunction = function (event) {
// The event object contains properties of the // layer in the LayerList widget. const { item } = event;
if (item.title === "US Demographics") { // open the list item in the LayerList item.open = true; // change the title to something more descriptive item.title = "Population by county"; // set an action for zooming to the full extent of the layer item.actionsSections = [[{ title: "Go to full extent", className: "esri-icon-zoom-out-fixed", id: "full-extent" }]]; }}); listModeDisabled
- Type
- boolean
- Since
- ArcGIS Maps SDK for JavaScript 4.30
Specifies whether to ignore the Layer.listMode property to display all layers.
A common use case for listModeDisabled is when you want to use the
LayerList to manage and configure a layer's listMode value.
- See also
- Default value
- false
operationalItems
- Type
- Collection<ListItem>
A collection of ListItems representing operational layers.
To hide layers from the LayerList widget, set the
Layer.listMode property to hide.
- See also
view
- Type
- MapViewOrSceneView | null | undefined
The view from which the widget will operate.
Methods
| Method | Signature | Class |
|---|---|---|
emit inherited | emit<Type extends EventNames<this>>(type: Type, event?: this["@eventTypes"][Type]): boolean | |
hasEventListener inherited | hasEventListener<Type extends EventNames<this>>(type: Type): boolean | |
moveListItem(targetItem: ListItem | null | undefined, fromParentItem: ListItem | null | undefined, toParentItem: ListItem | null | undefined, newIndex: number): void | | |
on inherited | on<Type extends EventNames<this>>(type: Type, listener: EventedCallback<this["@eventTypes"][Type]>): ResourceHandle | |
triggerAction(action: Action, item: ListItem): void | |
emit
- Signature
-
emit <Type extends EventNames<this>>(type: Type, event?: this["@eventTypes"][Type]): boolean
- Type parameters
- <Type extends EventNames<this>>
- Since
- ArcGIS Maps SDK for JavaScript 4.5
Emits an event on the instance. This method should only be used when creating subclasses of this class.
hasEventListener
- Signature
-
hasEventListener <Type extends EventNames<this>>(type: Type): boolean
- Type parameters
- <Type extends EventNames<this>>
Indicates whether there is an event listener on the instance that matches the provided event name.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| type | Type | The name of the event. | |
- Returns
- boolean
Returns true if the class supports the input event.
moveListItem
- Signature
-
moveListItem (targetItem: ListItem | null | undefined, fromParentItem: ListItem | null | undefined, toParentItem: ListItem | null | undefined, newIndex: number): void
- Since
- ArcGIS Maps SDK for JavaScript 4.16
Moves a list item from one position to another in the LayerList widget. This allows the user to reorder the operational layers in a map or even reorganize sublayers of GroupLayers. You cannot move MapImageLayer sublayers outside of a MapImageLayer.
For the purposes of the documentation below, an item (or list item) refers to a layer in a map. A parent item refers to a GroupLayer or MapImageLayer, and a child item refers to a sublayer of a GroupLayer or MapImageLayer.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| targetItem | The list item (or layer) to move. | | |
| fromParentItem | If the | | |
| toParentItem | The parent list item to move the | | |
| newIndex | The new index to move the | |
- Returns
- void
Examples
// Moves the first layer to the final position in the mapconst viewModel = layerList.viewModel;const item = layerList.operationalItems.at(0);const lastIndex = layerList.operationalItems.length - 1;
viewModel.moveListItem(item, null, null, lastIndex);// Moves the first sublayer in the first group layer// to the first position in the second group layerconst viewModel = layerList.viewModel;const parentItem1 = layerList.operationalItems.at(0);const subItem1 = parentItem1.children.at(0);const parentItem2 = layerList.operationalItems.at(1);
viewModel.moveListItem(subItem1, parentItem1, parentItem2, 0); on
- Signature
-
on <Type extends EventNames<this>>(type: Type, listener: EventedCallback<this["@eventTypes"][Type]>): ResourceHandle
- Type parameters
- <Type extends EventNames<this>>
Registers an event handler on the instance. Call this method to hook an event with a listener.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| type | Type | An event or an array of events to listen for. | |
| listener | EventedCallback<this["@eventTypes"][Type]> | The function to call when the event fires. | |
- Returns
- ResourceHandle
Returns an event handler with a
remove()method that should be called to stop listening for the event(s).Property Type Description remove Function When called, removes the listener from the event.
Example
view.on("click", function(event){ // event is the event handle returned after the event fires. console.log(event.mapPoint);}); triggerAction
- Signature
-
triggerAction (action: Action, item: ListItem): void
Triggers the @trigger-action event and executes the given action or action toggle.
Events
trigger-action
trigger-action: CustomEvent<LayerListViewModelTriggerActionEvent> Emitted when the user clicks an action or action toggle in a layer list. Use this event to run custom logic when a specific action is triggered.