arcgis-basemap-layer-list-next

<arcgis-basemap-layer-list-next auto-destroy-disabled></arcgis-basemap-layer-list-next>

basemapLayerListNextElement.autoDestroyDisabled = true;

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

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

basemapLayerListElement.baseItemCreatedFunction = (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;
  }
}

basemapLayerListElement.baseItems.forEach(item =>  console.log(item.title));

<arcgis-basemap-layer-list-next basemap-title="My Basemap"></arcgis-basemap-layer-list-next>

basemapLayerListElement.basemapTitle = "My Basemap";

// Use reactiveUtils to respond to the basemapLayerListElement.catalogLayerList "arcgisTriggerAction" event
const catalogLayerListActionHandle = reactiveUtils.on(
  () => basemapLayerListElement.catalogLayerList,
  "arcgisTriggerAction",
  async (event) => {
    const { action, item } = event.detail;
    if (action.id === "add-layer") {
      try {
        const parentCatalogLayer = getCatalogLayerForLayer(item.layer);
        if (!parentCatalogLayer) {
          return;
        }
        await addLayerFromDynamicGroup(item.layer);
        alert(`Added ${item.layer.title} to the map`);
      } catch (error) {
        console.error("Failed to add layer from dynamic group", error);
        alert(`Unable to add ${item.layer.title} to the map`);
      }
      basemapLayerListElement?.openedLayers?.pop();
    }
  },
);
basemapLayerListHandles.push(catalogLayerListActionHandle);

// Use reactiveUtils to watch for a selected item in the basemapLayerListElement.catalogLayerList
const catalogSelectionWatchHandle = reactiveUtils.watch(
  () =>
    basemapLayerListElement.catalogLayerList?.selectedItems?.at(0)?.layer,
  (layer) => {
    layer && handleLayerSelection(layer);
  },
);
basemapLayerListHandles.push(catalogSelectionWatchHandle);

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

<arcgis-basemap-layer-list-next closed></arcgis-basemap-layer-list-next>

basemapLayerListNextElement.closed = true;

<arcgis-basemap-layer-list-next collapsed></arcgis-basemap-layer-list-next>

basemapLayerListNextElement.collapsed = true;

<arcgis-basemap-layer-list-next drag-enabled></arcgis-basemap-layer-list-next>

basemapLayerListNextElement.dragEnabled = true;

<arcgis-basemap-layer-list-next editing-title></arcgis-basemap-layer-list-next>

basemapLayerListElement.editingTitle = true;

<arcgis-basemap-layer-list-next filter-placeholder="Search..."></arcgis-basemap-layer-list-next>

basemapLayerListNextElement.filterPlaceholder = "Search...";

<arcgis-basemap-layer-list-next heading-level="2"></arcgis-basemap-layer-list-next>

basemapLayerListNextElement.headingLevel = 2;

<arcgis-basemap-layer-list-next hide-base-layers></arcgis-basemap-layer-list-next>

basemapLayerListElement.hideBaseLayers = true;

<arcgis-basemap-layer-list-next hide-catalog-layer-list></arcgis-basemap-layer-list-next>

basemapLayerListNextElement.hideCatalogLayerList = true;

<arcgis-basemap-layer-list-next hide-heading></arcgis-basemap-layer-list-next>

basemapLayerListNextElement.hideHeading = true;

<arcgis-basemap-layer-list-next hide-no-filter-results-notice></arcgis-basemap-layer-list-next>

basemapLayerListNextElement.hideNoFilterResultsNotice = true;

<arcgis-basemap-layer-list-next hide-no-items-notice></arcgis-basemap-layer-list-next>

basemapLayerListNextElement.hideNoItemsNotice = true;

<arcgis-basemap-layer-list-next hide-reference-layers></arcgis-basemap-layer-list-next>

basemapLayerListElement.hideReferenceLayers = true;

<arcgis-basemap-layer-list-next hide-status-indicators></arcgis-basemap-layer-list-next>

basemapLayerListNextElement.hideStatusIndicators = true;

<arcgis-basemap-layer-list-next list-mode-disabled></arcgis-basemap-layer-list-next>

basemapLayerListNextElement.listModeDisabled = true;

<arcgis-basemap-layer-list-next min-filter-items="3"></arcgis-basemap-layer-list-next>

basemapLayerListNextElement.minFilterItems = 3;

// back out of the flow item to the main layer list
basemapLayerListNext.openedLayers.pop();

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

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

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

basemapLayerListElement.referenceItems.forEach(item => console.log(item.title));

reactiveUtils.watch(
  () => basemapLayerListNext.selectedItems?.at(0)?.layer,
  (layer) => {
    layer && handleLayerSelection(layer);
  },
);

<arcgis-basemap-layer-list-next selection-mode="multiple"></arcgis-basemap-layer-list-next>

basemapLayerListNextElement.selectionMode = "multiple";

<arcgis-basemap-layer-list-next show-close-button></arcgis-basemap-layer-list-next>

basemapLayerListNextElement.showCloseButton = true;

<arcgis-basemap-layer-list-next show-collapse-button></arcgis-basemap-layer-list-next>

basemapLayerListNextElement.showCollapseButton = true;

<arcgis-basemap-layer-list-next show-edit-title-button></arcgis-basemap-layer-list-next>

basemapLayerListElement.showEditTitleButton = true;

<arcgis-basemap-layer-list-next show-errors></arcgis-basemap-layer-list-next>

basemapLayerListNextElement.showErrors = true;

<arcgis-basemap-layer-list-next show-filter></arcgis-basemap-layer-list-next>

basemapLayerListNextElement.showFilter = true;

<arcgis-basemap-layer-list-next show-temporary-layer-indicators></arcgis-basemap-layer-list-next>

basemapLayerListNextElement.showTemporaryLayerIndicators = true;

<arcgis-basemap-layer-list-next visibility-appearance="checkbox"></arcgis-basemap-layer-list-next>

basemapLayerListNextElement.visibilityAppearance = "checkbox";

const arcgisBasemapLayerListNext = document.createElement("arcgis-basemap-layer-list-next");
document.body.append(arcgisBasemapLayerListNext);
await arcgisBasemapLayerListNext.componentOnReady();
console.log("arcgis-basemap-layer-list-next is ready to go!");