require(["esri/widgets/LayerList/LayerListViewModel"], (LayerListVM) => { /* code goes here */ });
import LayerListVM from "@arcgis/core/widgets/LayerList/LayerListViewModel.js";
esri/widgets/LayerList/LayerListViewModel
Provides the logic for the LayerList widget.
To hide layers in the map from the LayerList widget, set the
listMode property on the layer(s) to hide
.
Constructors
-
Parameterproperties Objectoptional
See the properties for a list of all the properties that may be passed into the constructor.
Property Overview
Name | Type | Summary | Class |
---|---|---|---|
Whether to provide an indication if a layer is being published in the LayerList. | LayerListViewModel | ||
The name of the class. | Accessor | ||
Specifies a function that accesses each ListItem. | LayerListViewModel | ||
Specifies whether to ignore the listMode property of the layers to display all layers. | LayerListViewModel | ||
A collection of ListItems representing operational layers. | LayerListViewModel | ||
The view model's state. | LayerListViewModel | ||
The view from which the widget will operate. | LayerListViewModel |
Property Details
-
checkPublishStatusEnabled
checkPublishStatusEnabled Boolean
Since: ArcGIS Maps SDK for JavaScript 4.25LayerListViewModel since 4.2, checkPublishStatusEnabled added at 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 list item publishing property will be
false
ifcheckPublishStatusEnabled
isfalse
.- Default Value:false
-
listItemCreatedFunction
listItemCreatedFunction ListItemCreatedHandler |null |undefined
Since: ArcGIS Maps SDK for JavaScript 4.4LayerListViewModel since 4.2, listItemCreatedFunction added at 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 actionsSections property of the ListItem.
- Default Value:null
ExamplelayerListViewModel.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
listModeDisabled Boolean
Since: ArcGIS Maps SDK for JavaScript 4.30LayerListViewModel since 4.2, listModeDisabled added at 4.30. -
Specifies whether to ignore the listMode property of the layers to display all layers. A common use case for
listModeDisabled
is when you want to use the LayerList to manage and configure a layer'slistMode
value.- Default Value:false
- See also
-
operationalItems
operationalItems Collection<ListItem>readonly
-
A collection of ListItems representing operational layers. To hide layers from the LayerList widget, set the listMode property on the layer(s) to
hide
.- See also
-
state
state Stringreadonly
-
The view model's state.
Possible Values:"loading" |"ready" |"disabled"
- Default Value:disabled
-
The view from which the widget will operate.
- Default Value:null
Method Overview
Name | Return Type | Summary | Class |
---|---|---|---|
Adds one or more handles which are to be tied to the lifecycle of the object. | Accessor | ||
Returns true if a named group of handles exist. | Accessor | ||
Moves a list item from one position to another in the LayerList widget. | LayerListViewModel | ||
Removes a group of handles owned by the object. | Accessor | ||
Triggers the trigger-action event and executes the given action or action toggle. | LayerListViewModel |
Method Details
-
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.25Accessor since 4.0, addHandles added at 4.25. -
Adds one or more handles which are to be tied to the lifecycle of the object. The handles will be removed when the object is destroyed.
// Manually manage handles const handle = reactiveUtils.when( () => !view.updating, () => { wkidSelect.disabled = false; }, { once: true } ); this.addHandles(handle); // Destroy the object this.destroy();
ParametershandleOrHandles WatchHandle|WatchHandle[]Handles marked for removal once the object is destroyed.
groupKey *optionalKey identifying the group to which the handles should be added. All the handles in the group can later be removed with Accessor.removeHandles(). If no key is provided the handles are added to a default group.
-
hasHandles
InheritedMethodhasHandles(groupKey){Boolean}
Inherited from AccessorSince: ArcGIS Maps SDK for JavaScript 4.25Accessor since 4.0, hasHandles added at 4.25. -
Returns true if a named group of handles exist.
ParametergroupKey *optionalA group key.
ReturnsType Description Boolean Returns true
if a named group of handles exist.Example// Remove a named group of handles if they exist. if (obj.hasHandles("watch-view-updates")) { obj.removeHandles("watch-view-updates"); }
-
Since: ArcGIS Maps SDK for JavaScript 4.16LayerListViewModel since 4.2, moveListItem added at 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.
ParameterstargetItem ListItemThe list item (or layer) to move.
fromParentItem ListItemIf the
targetItem
is a child of a parent list item and you want to move it out of the parentItem, then use this parameter to indicate the parent item to move from.toParentItem ListItemThe parent list item to move the
targetItem
to if moving it as a child to another parent item.newIndex NumberThe new index to move the
targetItem
to. If moving the item as a child to a parent item, then specify the index of the item within that parent.Examples// Moves the first layer to the final position in the map const 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 layer const 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);
-
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.25Accessor since 4.0, removeHandles added at 4.25. -
Removes a group of handles owned by the object.
ParametergroupKey *optionalA group key or an array or collection of group keys to remove.
Exampleobj.removeHandles(); // removes handles from default group obj.removeHandles("handle-group"); obj.removeHandles("other-handle-group");
-
Triggers the trigger-action event and executes the given action or action toggle.
Parametersaction ActionButton|ActionToggleThe action to execute.
item ListItemAn item associated with the action.
Event Overview
Name | Type | Summary | Class |
---|---|---|---|
|
{action: ActionButton|ActionToggle,item: ListItem} |
Fires after the user clicks on an action or action toggle inside the LayerList widget. |
LayerListViewModel |
Event Details
-
Fires after the user clicks on an action or action toggle inside the LayerList widget. This event may be used to define a custom function to execute when particular actions are clicked.
- Properties
-
action ActionButton|ActionToggle
The action clicked by the user.
item ListItemAn item associated with the action.