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

#viewDiv {
	height: 100%;
	width: 100%;
}

import ArcGISMap from "https://js.arcgis.com/next/@arcgis/core/Map.js";
import MapView from "https://js.arcgis.com/next/@arcgis/core/views/MapView.js";
import FeatureLayer from "https://js.arcgis.com/next/@arcgis/core/layers/FeatureLayer.js";
import MapImageLayer from "https://js.arcgis.com/next/@arcgis/core/layers/MapImageLayer.js";
import { on } from "https://js.arcgis.com/next/@arcgis/core/core/reactiveUtils.js";
import LayerList from "https://js.arcgis.com/next/@arcgis/core/widgets/LayerList.js";

const USALayer = new MapImageLayer({
	url:
		"http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
	title: "States"
});

const censusLayer = new FeatureLayer({
	url:
		"http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/1",
	title: "US Sample Census"
});

const povLayer = new FeatureLayer({
	url:
		"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/counties_politics_poverty/FeatureServer/0",
	title: "Poverty in the southeast U.S."
});

const map = new ArcGISMap({
	basemap: "gray-vector",
	layers: [USALayer, censusLayer, povLayer]
});

const view = new MapView({
	container: "viewDiv",
	map,
	center: [-118, 34],
	zoom: 4
});

const layerList = new LayerList({ view });
view.ui.add(layerList, "top-right");

on(
	() => view,
	"click",
	async (event) => {
		const { results } = await view.hitTest(
			event,
			{
				exclude: [
					...map.basemap.baseLayers,
					...map.basemap.referenceLayers
				]
			}
		);
		for (let { layer } of results) {
			console.log(layer.title);
		}
		
	}
);