AlanPew/index.html

## index.html
<!--

To run this demo, you need to replace 'YOUR_API_KEY' with an API key from the ArcGIS Developer dashboard.

Sign up for a free account and get an API key.

https://developers.arcgis.com/documentation/mapping-apis-and-services/get-started/

 --><html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS Developer Guide: Basemap layers</title>
<style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
  .esri-view .esri-ui-corner .esri-component.esri-widget--panel-height-only {
    width: 250px;
    max-height: calc(100% - 45px) !important;
    position: fixed;
  }
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.20/"></script>
  <script>
  require([
    "esri/config",
    "esri/Map",
    "esri/views/MapView",
    "esri/Basemap",
    "esri/layers/VectorTileLayer",
    "esri/widgets/BasemapGallery",
  ],(
    esriConfig,
    Map,
    MapView,
    Basemap,
    VectorTileLayer,
    BasemapGallery
  )=> {

    esriConfig.apiKey = "AAPK40227465b1fb4bb09182247cf1beb820xRhOp5k4k_gXM_rcN7UzsO-jpL9fDVFJxl1mW-2VUfNv0yCL81xh5yd7ydX-xIJd";

    const basemap = new Basemap({
      baseLayers: [
        new VectorTileLayer({
          portalItem: {
            id: "36551d7048d643618026014f3075327b", // Community basemap style
          },
        }),
      ],
    });

    const map = new Map({
      basemap: basemap,
    });

    const view = new MapView({
      container: "viewDiv",
      map: map,
      center: [0, 52.5],
      zoom: 5,
      constraints: {
        snapToZoom: false,
      },
    });

    const basemaps = new BasemapGallery({
      view: view,
      source: {
        query: `id: a25523e2241d4ff2bcc9182cc971c156`, // World basemaps for developers in this group in ArcGIS Online - https://www.arcgis.com/home/group.html?id=a25523e2241d4ff2bcc9182cc971c156
      },
    });

    view.ui.add(basemaps, {
      position: "top-right",
    });
  });
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>
	<!--

	To run this demo, you need to replace 'YOUR_API_KEY' with an API key from the ArcGIS Developer dashboard.

	Sign up for a free account and get an API key.

	https://developers.arcgis.com/documentation/mapping-apis-and-services/get-started/

	--><html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>ArcGIS Developer Guide: Basemap layers</title>
	<style>
	html, body, #viewDiv {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	}
	.esri-view .esri-ui-corner .esri-component.esri-widget--panel-height-only {
	width: 250px;
	max-height: calc(100% - 45px) !important;
	position: fixed;
	}
	</style>
	<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
	<script src="https://js.arcgis.com/4.20/"></script>
	<script>
	require([
	"esri/config",
	"esri/Map",
	"esri/views/MapView",
	"esri/Basemap",
	"esri/layers/VectorTileLayer",
	"esri/widgets/BasemapGallery",
	],(
	esriConfig,
	Map,
	MapView,
	Basemap,
	VectorTileLayer,
	BasemapGallery
	)=> {

	esriConfig.apiKey = "AAPK40227465b1fb4bb09182247cf1beb820xRhOp5k4k_gXM_rcN7UzsO-jpL9fDVFJxl1mW-2VUfNv0yCL81xh5yd7ydX-xIJd";

	const basemap = new Basemap({
	baseLayers: [
	new VectorTileLayer({
	portalItem: {
	id: "36551d7048d643618026014f3075327b", // Community basemap style
	},
	}),
	],
	});

	const map = new Map({
	basemap: basemap,
	});

	const view = new MapView({
	container: "viewDiv",
	map: map,
	center: [0, 52.5],
	zoom: 5,
	constraints: {
	snapToZoom: false,
	},
	});

	const basemaps = new BasemapGallery({
	view: view,
	source: {
	query: `id: a25523e2241d4ff2bcc9182cc971c156`, // World basemaps for developers in this group in ArcGIS Online - https://www.arcgis.com/home/group.html?id=a25523e2241d4ff2bcc9182cc971c156
	},
	});

	view.ui.add(basemaps, {
	position: "top-right",
	});
	});
	</script>
	</head>
	<body>
	<div id="viewDiv"></div>
	</body>
	</html>