// ---------------------------------------------------
// Snippets_Ex05
// ---------------------------------------------------

/*
  この演習で使用する URL

  https://localhost/iweb/Ex05/

  ArcGIS Maps SDK for JavaScript サイト
  https://js.arcgis.com

  SampleServer の USA マップ サービス
  https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer

  SampleServer の ServiceRequest レイヤー
  https://sampleserver6.arcgisonline.com/arcgis/rest/services/ServiceRequest/FeatureServer/0

*/

// ---------------------------------------------------

  index.html body

   <!-- ステップ：スクリプト ファイルの読み込み -->
   <script src="./js/main.js" type="module"></script>

// ---------------------------------------------------

  js/main.js

  /*
  ステップ：モジュールをインポートします
  */
  const [
    Extent,
  
  ] = await $arcgis.import([
    "@arcgis/core/geometry/Extent.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;

// ---------------------------------------------------

  index.html
  
    <arcgis-map basemap="satellite" id="mapEl">

// ---------------------------------------------------
  
  js/main.js

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


// ---------------------------------------------------

  js/main/js

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

// ---------------------------------------------------

  js/main.js

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

// ---------------------------------------------------

  js/main.js

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

  mapEl.map.add(lyrRequests);

// ---------------------------------------------------

  js/main.js

  const [
    Extent,
    MapImageLayer,
    FeatureLayer
  ] = await $arcgis.import([
    "@arcgis/core/geometry/Extent.js",
    "@arcgis/core/layers/MapImageLayer.js",
    "@arcgis/core/layers/FeatureLayer.js"
  ]);

// ---------------------------------------------------