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);
    }
    
  }
);