// ---------------------------------------------------
// Snippets_Ex06
// ---------------------------------------------------

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

  https://localhost/iweb/Ex06/

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

*/

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

  /*
    ステップ：数値分類レンダラーの作成
  */
  const cbrPolygonRenderer = new ClassBreaksRenderer({
    defaultSymbol: symDefault,
    field: "pop00_sqmi"
  });

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

  /*
    ステップ：クラス分類を定義
  */
  cbrPolygonRenderer.addClassBreakInfo(0, 10, new SimpleFillSymbol({ color: new Color([254, 240, 217]) }));
  cbrPolygonRenderer.addClassBreakInfo(10, 100, new SimpleFillSymbol({ color: new Color([253, 204, 138]) }));
  cbrPolygonRenderer.addClassBreakInfo(100, 1000, new SimpleFillSymbol({ color: new Color([252, 141, 89]) }));
  cbrPolygonRenderer.addClassBreakInfo(1000, 10000, new SimpleFillSymbol({ color: new Color([227, 74, 51]) }));
  cbrPolygonRenderer.addClassBreakInfo(10000, 100000, new SimpleFillSymbol({ color: new Color([179, 0, 0]) }));

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

  /*
    ステップ：MapImageLayer にレンダラーを適用
  */
  lyrPolygon.findSublayerById(3).set("renderer", cbrPolygonRenderer);

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

  /*
    ステップ：ポイント フィーチャに設定するシンボルの作成
  */
  const pointSymbol = {
    type: "simple-marker",
    color: new Color([255, 255, 0, 0.5]),
    outline: null
  };

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

  /*
    ステップ：レンダラーに適用するシンボル サイズのパラメーターを設定
  */
  const sizeInfo = {
    type: "size",
    field: "pop2000",
    valueUnit: "unknown",
    minSize: 5,
    maxSize: 50,
    minDataValue: 0,
    maxDataValue: 999999
  };

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

  /*
    ステップ：単一レンダラーを作成し、レイヤーに適用
  */
  const pointRenderer = {
    type: "simple",
    symbol: pointSymbol,
    visualVariables: [sizeInfo]
  };
  lyrPoint.set("renderer", pointRenderer);

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

  /*
    ステップ：PopupTemplate の作成
  */
  const popupTemplate = {
    title: "都市名：{areaname}",
    content: [
      {
        type: "fields",
        fieldInfos: [
          {
            fieldName: "pop2000",
            label: "人口",
            format: {
              places: 0,
              digitSeparator: true
            }
          },
          {
            fieldName: "class",
            label: "クラス"
          },
          {
            fieldName: "capital",
            label: "首都"
          },
        ]
      }
    ]
  };

  lyrPoint.set("popupTemplate", popupTemplate);

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