arcgis-basemap-layer-list

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.

Since

ArcGIS Maps SDK for JavaScript 4.32

Specifies a function to handle filtering base layer list items.

basemapLayerListElement.baseFilterPredicate = (item) => item.title.toLowerCase().includes("streets");

Since

ArcGIS Maps SDK for JavaScript 4.29

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

See also

• showFilter

reactiveUtils.watch(
  () => basemapLayerListElement.baseFilterText,
  (baseFilterText) => console.log(baseFilterText)
);

A collection of ListItems representing the baseLayers.

Specifies a function that accesses each ListItem representing a base layer. Each list item's modifiable properties can be updated within. Actions can be added to list items using the ListItem#actionsSections property of the ListItem.

basemapLayerListElement.baseListItemCreatedFunction = (event) => {
  const baseListItem = event.item;
  if(baseListItem.title === "World Imagery_01"){
    // clean up title
    baseListItem.title = "World Imagery";
    // open the baseList item
    baseListItem.open = true;
  }
}

The current basemap's title.

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

See also

• arcgis-catalog-layer-list

• catalogOptions

Since

ArcGIS Maps SDK for JavaScript 4.30

CatalogLayer specific properties. Catalog layers will display their dynamicGroupLayer as an expandable catalogLayerList in the BasemapLayerList widget. This list item will only be displayed when catalog layers with dynamic group layers are loaded in the map. These are the properties that are used to configure the catalogLayerList.

See also

• catalogLayerList

basemapLayerListElement.catalogOptions = {
  listItemCreatedFunction: (event) => {
    const { item } = event;
    item.actionsSections = [
      [
        {
          title: "Add layer to map",
          icon: "add-layer",
          id: "add-layer"
        }
      ]
    ];
  },
  selectionMode: "single",
  visibleElements: {
    filter: true
    temporaryLayerIndicators: true
  }
};

Since

ArcGIS Maps SDK for JavaScript 4.33

Indicates whether a component is closed. When true, the component will be hidden.

Since

ArcGIS Maps SDK for JavaScript 4.29

Indicates whether the component is collapsed. When collapsed, only the collapse button and heading are displayed.

See also

• showCollapseButton

basemapLayerListElement.collapsed = true;

Since

ArcGIS Maps SDK for JavaScript 4.29

Indicates whether list items may be reordered within the list by dragging and dropping. MapImageLayer sublayers can be reordered only within their parent MapImageLayer and can not be dragged out as a separate layer.

basemapLayerListElement.dragEnabled = true;

Since

ArcGIS Maps SDK for JavaScript 4.29

Indicates whether the form to edit the basemap's title is currently visible. Any edits made will only be shown locally and will not be saved.

See also

• showEditTitleButton

basemapLayerListElement.editingTitle = true;

Since

ArcGIS Maps SDK for JavaScript 4.29

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

See also

• showFilter

basemapLayerListElement.filterPlaceholder = "Filter layers";

Indicates the heading level to use for the component's title (i.e. "Navigation"). By default, the basemap's title is rendered as a level 2 heading (e.g. <h2>Navigation</h2>). Depending on the component's placement in your app, you may need to adjust this heading for proper semantics. This is important for meeting accessibility standards.

See also

• Heading Elements

// the component title will render as an <h3>
basemapLayerListElement.headingLevel = 3;

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates whether the base layers will be displayed.

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates whether the basemap layer list displays a heading. The heading text is the title of the basemap. The heading level can be set with the BasemapLayerList#headingLevel.

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to the reference layers will be displayed.

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates whether the status indicators will be displayed.

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

The component's default label.

Since

ArcGIS Maps SDK for JavaScript 4.29

The minimum number of list items required to display the showFilter input box.

See also

• showFilter

basemapLayerListElement.showFilter = true;
basemapLayerListElement.minFilterItems = 5;

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

Since

ArcGIS Maps SDK for JavaScript 4.32

Specifies a function to handle filtering reference layer list items.

layerList.referenceFilterPredicate = (item) => item.title.toLowerCase().includes("streets");

Since

ArcGIS Maps SDK for JavaScript 4.29

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

See also

• showFilter

reactiveUtils.watch(
  () => basemapLayerListElement.referenceFilterText,
  (referenceFilterText) => console.log(referenceFilterText)
);

A collection of ListItems representing the referenceLayers.

Specifies a function that accesses each ListItem representing a reference layer. Each list item's modifiable properties can be updated within. Actions can be added to list items using the ListItem#actionsSections.

basemapLayerListElement.referenceListItemCreatedFunction = (event) => {
  referenceListItem = event.item;
  if(referenceListItem.title === "World Imagery_01_reference_layer"){
    // clean up title
    referenceListItem.title = "Reference layer";
    // open the baseList item
    referenceListItem.open = true;
  }
}

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

See also

• selectionMode

Since

ArcGIS Maps SDK for JavaScript 4.29

Specifies the selection mode. Selected items are available in the selectedItems property.

Value	Description
multiple	Allows any number of items to be selected at once. This is useful when you want to apply an operation to multiple items at the same time.
none	Disables selection. Use this when you want to prevent selecting items.
single	Allows only one item to be selected at a time. If another item is selected, the previous selection is cleared. This is useful when you want to ensure that a maximum of one item is selected at a time.
single-persist	Allows only one item to be selected at a time and prevents de-selection. Once an item is selected, it remains selected until another item is selected. This is useful when you want to ensure that there is always exactly one selected item.

See also

• selectedItems

basemapLayerListElement.selectionMode = "multiple";

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to display a close button in the header.

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to display a collapse button in the header.

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to display a button in the header to edit the basemap title.

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to display layers with load errors.

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to display a filter input box when then number of list items is equal to or greater than the value set in BasemapLayerList#minFilterItems, allowing users to filter layers by their title.

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates whether temporary layer indicators will be displayed for layers with Layer#persistenceEnabled set to false. A temporary icon will be displayed on the near side of the layer title.

The current state of the component.

The view associated with the component.

Note: The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this view property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-basemap-layer-list component will be associated with a map or scene component rather than using the view property.

Since

ArcGIS Maps SDK for JavaScript 4.29

Determines the icons used to indicate visibility.

Value	Description	Example
default	Displays view icons on the far side. Icons are hidden except on hover or if they have keyboard focus. See view-visible and view-hide calcite icons.
checkbox	Displays checkbox icons on the near side. See check-square-f and square calcite icons.

basemapLayerListElement.visibilityAppearance = "checkbox";

Creates a promise that resolves once the component is fully loaded.

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!");

Permanently destroy the component.