/*
ステップ：モジュールをインポートします
*/
const [
  Extent,
  
  FeatureLayer,
  MapImageLayer
] = await $arcgis.import([
  "@arcgis/core/geometry/Extent.js",
  
  "@arcgis/core/layers/FeatureLayer.js",
  "@arcgis/core/layers/MapImageLayer.js"
]);

/*
ステップ：ドキュメントへの参照を記述します
*/
const mapEl = document.querySelector("arcgis-map");

/*
ステップ：コンポーネントの準備の完了を監視します
*/
await mapEl.viewOnReady();

/*
ステップ：初期表示範囲を指定します
注意：実際の座標値はスニペットのものと完全には一致しません
*/
const initExtent = new Extent({
  "spatialReference": {
    "latestWkid": 3857,
    "wkid": 102100
  },
  "xmin": -9837430.694532482,
  "ymin": 5108123.946065974,
  "xmax": -9781975.630511662,
  "ymax": 5145272.34181252
});

mapEl.extent = initExtent;

/*
ステップ：マップに USA マップ サービスを追加します
*/
const lyrUSA = new MapImageLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
  opacity: 0.5
});
mapEl.map.add(lyrUSA);

/*
ステップ：マップに Service Requests レイヤーを追加します
*/
const lyrRequests = new FeatureLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/ServiceRequest/FeatureServer/0",
  definitionExpression: "status='Unassigned'"
});

mapEl.map.add(lyrRequests);