<link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css" />
<div id="viewDiv"></div>

html,
body,
#viewDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

.esri-view-root .esri-ui .esri-attribution {
  left: auto;
}

import MapView from "https://js.arcgis.com/4.31/@arcgis/core/views/MapView.js";
import Basemap from "https://js.arcgis.com/4.31/@arcgis/core/Basemap.js";
import BasemapGallery from "https://js.arcgis.com/4.31/@arcgis/core/widgets/BasemapGallery.js";
import Expand from "https://js.arcgis.com/4.31/@arcgis/core/widgets/Expand.js";
import Portal from "https://js.arcgis.com/4.31/@arcgis/core/portal/Portal.js";
import PortalItem from "https://js.arcgis.com/4.31/@arcgis/core/portal/PortalItem.js";
import PortalGroup from "https://js.arcgis.com/4.31/@arcgis/core/portal/PortalGroup.js";
import PortalQueryParams from "https://js.arcgis.com/4.31/@arcgis/core/portal/PortalQueryParams.js";

// Gets all the portal Item IDs from the group
const getPortalItemIds = async () => {
  // https://www.arcgis.com/home/group.html?id=4c790318395940c18a16e8acd721de25#overview
  const g = new PortalGroup({
    id: "4c790318395940c18a16e8acd721de25",
    portal: new Portal()
  });

  const portalQueryResult = await g.queryItems(
    new PortalQueryParams({
      num: 100
    })
  );

  const results = portalQueryResult.results;

  // only work on vector tiles for now
  const webMapResults = results.filter((x) => x.type === "Web Map");
  const ids = webMapResults.map((x) => x.id);
  return ids;
};

const basemapItemIds = await getPortalItemIds();

// Create Basemap instances from all the IDs that we just got.
const basemaps = basemapItemIds.map((x) => {
  return new Basemap({
    portalItem: {
      id: x
    }
  });
});

// Create the map and the mapview. Use one of the basemaps
// from above as the initial basemap.
const viewOptions = {
  container: "viewDiv",
  map: {
    basemap: basemaps[5]
  },
  center: [-98.35, 39.5],
  zoom: 3
};
const view = new MapView(viewOptions);

view.when(() => {
  // After the map view loads, create the Basemap Gallery widget-
  // pass the Basemaps from the WGS84 group we created at the beginning.
  let basemapGallery = new BasemapGallery({
    view: view,
    source: basemaps
  });

  // Place the Basemap Gallery widget within the Expand widget.
  const expand = new Expand({
    view: view,
    content: basemapGallery,
    expandTooltip: "Change Basemap"
  });
  view.ui.add(expand, "top-right");

  // When a basemap is selected, hide the expand widge
  // ("Auto-close" the menu)
  basemapGallery.watch("activeBasemap", function () {
    expand.expanded = !expand.expanded;
  });
});