{"version":3,"sources":["webpack:///./src/projectModules/project-init/water-bodies-init.js"],"names":["_asyncToGenerator","_regeneratorRuntime","mark","_callee","wrap","_context","prev","next","console","log","stop"],"mappings":"+TAsQAA,4BAAAC,iBAAAC,MAAe,SAAAC,IAAA,OAAAF,iBAAAG,MAAA,SAAAC,GAAA,eAAAA,EAAAC,KAAAD,EAAAE,MAAA,OACbC,QAAQC,IAAI,sBA0BZ,wBAAAJ,EAAAK,UAAAP","file":"chunk-2d0e5fde.56704606ec8b39b8a9be.js","sourcesContent":["import axios from \"axios\";\nimport * as GeoTIFF from \"geotiff\";\nimport L from \"leaflet\";\nimport { Chart } from \"chart.js\"; // v3.7.0\nimport * as tj from \"@/js/tjCompass/tjCompass.js\";\nimport store from \"@/store/index.js\";\n\nconst cloudFrontUrl = \"https://dreyqu138tbt9.cloudfront.net\";\nconst user = \"users/water-bodies-dev-tenchijin-co-jp\";\nconst project = \"projects/default\";\nconst rootDir = \"data/Tenchijin-Water-Bodies\";\n\nconst initCountry = \"Japan\";\nconst initPlace = \"Aimata\";\nconst filenames = [\"NDWI.tif\", \"TRUE.tif\"];\n\nlet g_filename = \"NDWI.tif\";\nlet g_currentLocationName = \"Aimata\";\nlet g_currentCountry = \"Japan\";\nlet g_currentDate = \"2016-04-23\";\nlet g_currentValue = 108.8;\n\nlet geotiffLayer = null;\nlet geojsonLayer = null;\nlet standardGeojsonLayer = null;\n\nlet chartCanvas = null; /** グラフが描画されるHTML Canvas Elment */\nlet waterChart = null; /** Chart本体 */\nconst initDateList = [\n  \"2016-04-23\",\n  \"2016-08-11\",\n  \"2016-08-31\",\n  \"2016-12-09\",\n  \"2016-12-29\",\n  \"2017-01-18\",\n  \"2017-03-09\",\n  \"2017-03-29\",\n  \"2017-05-08\",\n  \"2017-06-17\",\n  \"2017-07-07\",\n  \"2017-07-22\",\n  \"2017-09-05\",\n  \"2017-09-25\",\n  \"2017-11-24\",\n  \"2017-11-29\",\n  \"2017-12-09\",\n  \"2017-12-29\",\n  \"2018-01-23\",\n  \"2018-02-07\",\n  \"2018-02-22\",\n  \"2018-02-27\",\n  \"2018-03-04\",\n  \"2018-03-14\",\n  \"2018-03-24\",\n  \"2018-04-03\",\n  \"2018-04-28\",\n  \"2018-06-02\",\n  \"2018-06-07\",\n  \"2018-07-17\",\n  \"2018-08-01\",\n  \"2018-08-26\",\n  \"2018-09-05\",\n  \"2018-10-25\",\n  \"2018-10-30\",\n  \"2018-11-04\",\n  \"2018-11-14\",\n  \"2018-11-24\",\n  \"2018-11-29\",\n  \"2018-12-04\",\n  \"2018-12-19\",\n  \"2019-01-23\",\n  \"2019-02-07\",\n  \"2019-02-17\",\n  \"2019-02-22\",\n  \"2019-03-09\",\n  \"2019-04-13\",\n  \"2019-04-18\",\n  \"2019-04-28\",\n  \"2019-05-03\",\n  \"2019-05-08\",\n  \"2019-05-13\",\n  \"2019-05-23\",\n  \"2019-07-17\",\n  \"2019-08-01\",\n  \"2019-08-06\",\n  \"2019-08-26\",\n  \"2019-08-31\",\n  \"2019-09-15\",\n  \"2019-09-25\",\n  \"2019-09-30\",\n  \"2019-10-05\",\n  \"2019-10-10\",\n  \"2019-10-30\",\n  \"2019-11-09\",\n  \"2019-11-19\",\n  \"2019-11-29\",\n  \"2019-12-04\",\n  \"2019-12-14\",\n  \"2019-12-29\",\n  \"2020-02-07\",\n  \"2020-02-12\",\n  \"2020-02-17\",\n  \"2020-02-22\",\n  \"2020-03-03\",\n  \"2020-03-18\",\n  \"2020-03-23\",\n  \"2020-04-17\",\n  \"2020-04-27\",\n  \"2020-05-02\",\n  \"2020-05-17\",\n  \"2020-08-05\",\n  \"2020-08-10\",\n  \"2020-08-15\",\n  \"2020-08-20\",\n  \"2020-08-25\",\n  \"2020-09-14\",\n  \"2020-10-24\",\n  \"2020-11-08\",\n  \"2020-11-13\",\n  \"2020-11-18\",\n  \"2020-12-23\",\n  \"2020-12-28\",\n  \"2021-01-07\",\n  \"2021-02-01\",\n  \"2021-02-06\",\n  \"2021-02-16\",\n  \"2021-02-21\",\n  \"2021-03-03\",\n  \"2021-03-18\",\n  \"2021-03-23\",\n  \"2021-04-07\",\n  \"2021-04-22\",\n  \"2021-04-27\",\n  \"2021-06-01\",\n  \"2021-06-26\",\n  \"2021-07-16\",\n  \"2021-07-21\",\n  \"2021-07-31\",\n  \"2021-08-05\",\n  \"2021-08-10\",\n  \"2021-08-20\",\n  \"2021-09-19\",\n  \"2021-10-04\",\n  \"2021-10-14\",\n  \"2021-11-13\",\n  \"2021-12-03\",\n  \"2021-12-23\",\n  \"2022-01-02\",\n  \"2022-01-22\",\n  \"2022-02-01\",\n  \"2022-02-26\",\n  \"2022-04-02\",\n  \"2022-04-12\",\n  \"2022-04-17\",\n  \"2022-04-22\",\n  \"2022-05-02\",\n  \"2022-05-07\",\n  \"2022-07-01\",\n  \"2022-07-31\",\n  \"2022-08-10\",\n  \"2022-09-14\",\n  \"2022-09-29\",\n  \"2022-10-19\",\n  \"2022-11-03\",\n  \"2022-11-18\",\n  \"2022-12-08\",\n  \"2022-12-23\",\n  \"2023-01-07\",\n  \"2023-01-12\",\n  \"2023-01-17\",\n  \"2023-02-01\",\n  \"2023-02-06\",\n  \"2023-02-11\",\n  \"2023-02-16\",\n  \"2023-03-03\",\n  \"2023-03-08\",\n];\nconst initWaterAreaList = [\n  1.0882717615463708, 0.9087170001478889, 0.8910063059598105, 1.047090797825297,\n  1.0000062693752305, 0.8295228391468358, 0.7149072897692662,\n  0.7431292089628956, 1.0767526108554102, 1.0061978128719913,\n  0.9601212101070751, 0.8963339131548544, 0.9385228025610927,\n  0.9818636070366175, 0.8118121449583144, 1.0201647830846223,\n  0.9189402463861372, 0.9828715327220393, 0.9867592460801178,\n  0.9838794584074907, 1.0158451015755885, 1.020452761851731, 0.9850313734763891,\n  0.9874791929981537, 0.982871532722094, 1.0171410060278612, 1.0770405896223538,\n  1.0106614837647403, 0.9820075964203416, 0.8974858282244095,\n  0.7802784699417247, 0.9003656158962915, 0.9660247748356343, 1.063937555711006,\n  1.0650894707802827, 0.6671028144011356, 1.0804963348294943,\n  1.0730088868803813, 1.05472223515804, 1.042339148164948, 1.061633725572883,\n  0.8754554525274302, 0.7297381962840924, 0.8339865100388962,\n  0.8240512425684509, 0.8249151788702047, 0.9599772207232583,\n  0.9949666409476376, 0.0001439893836630442, 1.0849600057227602,\n  1.0771845790061942, 1.0324038806945115, 1.0629296300260007, 1.002310099513355,\n  0.9797037662818741, 0.9422665265362004, 0.9703444563452375,\n  0.9642969022323609, 0.9673206792894101, 0.9778319042948734, 0.965304827918095,\n  0.9958305772496854, 0.99827839677171, 1.0758886745530412, 1.0792004303768286,\n  1.0614897361892826, 1.1025267105263181, 1.1228292136197535, 1.104974530048341,\n  1.1055504875829785, 1.0705610673588695, 1.0704170779750404,\n  1.0898556447665455, 1.099070965319248, 1.089279687231934, 1.1010868166902443,\n  1.1016627742247136, 1.1081422964884284, 1.0986389971684267,\n  1.0948952731937989, 1.0397473392597156, 0.9213880659077867,\n  0.15738039631765316, 0.9163484374811856, 0.9367949299584698,\n  0.9009415734316932, 0.9540736559945839, 1.0557301608438108, 1.066241385849396,\n  1.0784804834586763, 1.0917275067538967, 1.0833761225024123,\n  1.1022387317594222, 1.084528037571777, 1.0288041461032356, 0.9763920104584365,\n  0.9362189724229817, 0.9406826433160507, 1.0066297810224987, 1.080928302980883,\n  1.0891356978479276, 1.0915835173701263, 1.0921594749047523,\n  1.0842400588048717, 1.0197328149339835, 0.9923748320416378,\n  0.9432744522207608, 0.98459940532502, 0.9828715327215872, 0.9748081272376812,\n  0.5969799845688089, 0.9635769553138683, 0.9614171145591727,\n  0.9666007323710147, 1.0332678169961698, 1.0653774495476345, 1.103966604362821,\n  1.1098701690922537, 1.1016627742245566, 1.0747367594843276,\n  1.0563061183783362, 0.8989257220606787, 1.087263835860732, 1.0948952731937134,\n  1.0928794218226756, 1.0977750608664605, 1.0829441543516762,\n  1.0692651629061793, 0.9267156731031203, 0.9676086580567309,\n  0.9753840847730256, 0.10381634560375658, 0.9585373268875377,\n  0.6636470691936414, 0.7042520753798144, 0.6784779757082329,\n  0.7460089966352662, 0.7478808586229211, 0.7238346315550992,\n  0.6259218506802877, 0.7252745253911246, 0.6711345171427904,\n  0.6781899969408928, 0.6244819568438164, 0.6515519609680835,\n  0.6362890863021489, 0.6636470691933914,\n];\n\n// Japanの湖のリスト\nconst japanLakes = [\n  \"Aimata\",\n  \"Arimine\",\n  \"Chuzenji\",\n  \"Honjo\",\n  \"Irukaike\",\n  \"Jinnaiike\",\n  \"Kasumigaura-Kaihatsu\",\n  \"Kazawa\",\n  \"Komyoike\",\n  \"Kunikaneike\",\n  \"Makabe\",\n  \"Maruyamatameike\",\n  \"Miura\",\n  \"Nyu\",\n  \"Saikyo\",\n  \"Setsukinai\",\n  \"Sotoyama\",\n  \"Takataki\",\n  \"Tare\",\n  \"Urakami\",\n  \"Yamashitaike\",\n  \"Zuibaiji-Dam\",\n];\n\n// Indiaの湖のリスト\nconst indiaLakes = [\"Hussain-Sagar-Lake\"];\n\n// Indonesiaの湖のリスト\nconst indonesiaLakes = [\"Bili-Bili-Dam\", \"Wonorejo-Dam\"];\n\n// Thailandの湖のリスト\nconst thailandLakes = [\"Chiang-Saen-Lake\", \"Lam-Sam-Lai-Dam\"];\n\nconst index = 0;\n\n/** ログインしたときに最初に呼ばれる関数 */\nexport default async () => {\n  console.log(\"water-observe-init\");\n\n  // /** スライダーの初期設定 */\n  // addSlider(initDateList);\n\n  // addSelectBox(japanLakes);\n  // addRadioButton(filenames);\n  // addCurrentInfo();\n  // initSelectBoxEventListener();\n  // hideLayerPanel();\n\n  // /** 初期ロケーションにジャンプ（読み込み時間の都合で1秒後に実行） */\n  // setTimeout(() => {\n  //   const lat = 36.71988;\n  //   const lng = 138.88813;\n  //   const zoom = 15;\n  //   jumpToLocation(lat, lng, zoom);\n  // }, 1000);\n\n  // /** 最初のGeoTiffとGeoJSONを描画 */\n  // await renderGeoTiffLayer(initCountry, initDateList[0], initPlace);\n  // await renderGeoJsonLayer(initCountry, initDateList[0], initPlace);\n  // await loadStandardBoundary(initCountry, initPlace);\n\n  // /** Chartの初期設定 */\n  // addChartArea();\n  // addChart(initDateList, initWaterAreaList);\n};\n\n/** **********************************************************************\n * 地図上の場所や日付関連の関数たち\n * ***********************************************************************\n */\n\n/** 日付と水量の配列をつくる関数 */\nasync function createGraphDataList(timeSeriesJsonURL) {\n  const response = await axios.get(timeSeriesJsonURL);\n  const dateArray = response.data.TimeSeries.map((obj) => obj.date);\n  const waterAreaArray = response.data.TimeSeries.map((obj) => obj.area);\n\n  return [dateArray, waterAreaArray];\n}\n\n/** 画面読み込み時に最初に指定した緯度経度にジャンプする関数 */\nfunction jumpToLocation(lat, lng, zoom) {\n  store.state.map.setView([lat, lng], zoom);\n}\n\n/** **********************************************************************\n * GeoTIFFとGeoJSONを描画する関数たち\n * ***********************************************************************\n */\n\nasync function loadStandardBoundary(country, place) {\n  if (standardGeojsonLayer) store.state.map.removeLayer(standardGeojsonLayer);\n\n  const geoJsonUrl = createStarndardGeoJsonUrl(country, place);\n  standardGeojsonLayer = await getStandardGeoJsonLayer(geoJsonUrl);\n  console.log(standardGeojsonLayer);\n\n  if (standardGeojsonLayer) {\n    standardGeojsonLayer.addTo(store.state.map);\n  } else {\n    console.log(\"standardGeojsonLayer is null\");\n  }\n}\n\n/** GeoTIFFを描画する関数 */\nasync function renderGeoTiffLayer(country, date, place) {\n  if (geotiffLayer) store.state.map.removeLayer(geotiffLayer);\n\n  const geoTiffUrl = createGeoTiffUrl(country, place, date, g_filename);\n  geotiffLayer = await getGeoTiffLayer(geoTiffUrl);\n\n  if (geotiffLayer) {\n    geotiffLayer.addTo(store.state.map);\n  } else {\n    console.log(\"geotiffLayer is null\");\n  }\n}\n\n/** S3に置いてあるGeoTiffのURLを生成する関数 */\nfunction createGeoTiffUrl(country, place, date, filename) {\n  /** create URL from S3 */\n  const type = \"Image\";\n  const filepath = `${rootDir}/${country}/${place}/${type}/${date}/${filename}`;\n  // const url = tj.getValidFullUrl(filepath);\n  const geoTiffUrl = `${cloudFrontUrl}/${user}/${project}/${tj.getValidUrl(filepath)}`;\n  return geoTiffUrl;\n}\n\n/** GeoTiff layerを取得する関数 */\nasync function getGeoTiffLayer(geoTiffUrl) {\n  /** ファイルがない場合は、nullを返す */\n  const geoTiff = await axios.get(geoTiffUrl).catch((error) => null);\n  if (!geoTiff) return null;\n\n  let options = {};\n\n  if (g_filename === \"TRUE.tif\") {\n    /** RGB（3バンド）画像のとき */\n    const renderer = L.LeafletGeotiff.rgb();\n    const opacity = 1.0;\n    options = {\n      renderer,\n      rBand: 0,\n      gBand: 1,\n      bBand: 2,\n      alphaBand: 0,\n      transpValue: 255,\n      sourceFunction: GeoTIFF.fromUrl,\n      noDataValue: undefined,\n      blockSize: 65536,\n      opacity,\n    };\n  } else {\n    /** NDWI（1バンド）のとき */\n    const rendererOptions = {\n      displayMin: -1,\n      displayMax: 1,\n      clampLow: true,\n      clampHigh: true,\n      colorScale: \"jet\",\n    };\n    const renderer = L.LeafletGeotiff.plotty(rendererOptions);\n    const opacity = 0.8;\n    options = {\n      renderer,\n      onError: (e) => {\n        console.log(e);\n      },\n      sourceFunction: GeoTIFF.fromUrl,\n      noDataValue: undefined,\n      blockSize: 65536,\n      opacity,\n    };\n  }\n\n  return await L.leafletGeotiff(geoTiffUrl, options);\n}\n\n/** GeoTiff layerを一括で取得して配列に格納して返す関数 */\nfunction loadAllGeoTiffLayers() {\n  const geotiffLayers = dateArray.map(async (date) => {\n    const geoTiffUrl = createGeoTiffUrl(country, place, date, g_filename);\n    const geotiffLayer = await getGeoTiffLayer(geoTiffUrl);\n    return geotiffLayer;\n  });\n  return geotiffLayers;\n}\n\n/** GeoJSONを描画する関数 */\nasync function renderGeoJsonLayer(country, date, place) {\n  if (geojsonLayer) store.state.map.removeLayer(geojsonLayer);\n\n  const geoJsonUrl = createGeoJsonUrl(country, place, date);\n  geojsonLayer = await getGeoJsonLayer(geoJsonUrl);\n\n  if (geojsonLayer) {\n    geojsonLayer.addTo(store.state.map);\n  } else {\n    console.log(\"geojsonLayer is null\");\n  }\n}\n\n/** S3に置いてあるGeoJSONのURLを生成する関数 */\nfunction createGeoJsonUrl(country, place, date) {\n  /** create URL from S3 */\n  const type = \"Time-Series\";\n  const filepath = `${rootDir}/${country}/${place}/${type}/${date}.geojson`;\n  const geoJsonUrl = `${cloudFrontUrl}/${user}/${project}/${tj.getValidUrl(filepath)}`;\n  return geoJsonUrl;\n}\n\nfunction createStarndardGeoJsonUrl(country, place) {\n  /** Bounding-box　全体を囲う四角形。TODO: 基準の湖の形にする？ */\n  const filepath = `${rootDir}/${country}/${place}/nominal_outline.geojson`;\n  const geoJsonUrl = `${cloudFrontUrl}/${user}/${project}/${tj.getValidUrl(filepath)}`;\n  return geoJsonUrl;\n}\n\n/** S3に置いてあるtimeseries.jsonのURLを生成する関数 */\nfunction createTimeSeriesJsonUrl(country, place) {\n  /** create URL from S3 */\n  const filepath = `${rootDir}/${country}/${place}/time-series.json`;\n  const timeSeriesJsonUrl = `${cloudFrontUrl}/${user}/${project}/${tj.getValidUrl(filepath)}`;\n\n  return timeSeriesJsonUrl;\n}\n\n/** GeoJSON layer を取得する関数 */\nasync function getGeoJsonLayer(geoJsonUrl) {\n  /** ファイルがない場合は、nullを返す */\n  const geoJson = await axios.get(geoJsonUrl).catch((error) => null);\n  if (!geoJson) return null;\n\n  const options = {\n    style: {\n      color: \"red\",\n      weight: 2,\n      opacity: 0.8,\n      fill: false,\n    },\n  };\n  console.log(geoJson.data);\n  return L.geoJSON(geoJson.data, options);\n}\n\n/** 基準のGeoJSON layer を取得する関数 */\nasync function getStandardGeoJsonLayer(geoJsonUrl) {\n  /** ファイルがない場合は、nullを返す */\n  const geoJson = await axios.get(geoJsonUrl).catch((error) => null);\n  if (!geoJson) return null;\n\n  const options = {\n    style: {\n      color: \"blue\",\n      weight: 2,\n      fill: false,\n      opacity: 0.8,\n    },\n  };\n  return L.geoJSON(geoJson.data.features[0], options);\n}\n\n/** GeoJSON layerを一括で取得して配列に格納して返す関数 */\nfunction loadAllGeoJsonLayers() {\n  const geojsonLayers = dateArray.map(async (date) => {\n    const geoJsonUrl = createGeoJsonUrl(country, place, date, g_filename);\n    const geojsonLayer = await getGeoJsonLayer(geoJsonUrl);\n    return geojsonLayer;\n  });\n  return geojsonLayers;\n}\n\n/** **********************************************************************\n * グラフ関連の関数たち\n * ***********************************************************************\n * */\n\n/** 画面にグラフを追加する関数 */\nfunction addChart(dateList, waterAreaList) {\n  const ctx = chartCanvas.getContext(\"2d\");\n  console.log(ctx);\n\n  /** グラフの設定 */\n  waterChart = new Chart(ctx, {\n    type: \"line\",\n    data: {\n      labels: dateList,\n      datasets: [\n        {\n          label: \"Water bodies\",\n          data: waterAreaList,\n          fill: false,\n          borderColor: \"#3B97FF\",\n          pointStyle: \"circle\",\n          pointRadius: 3,\n          // tension: 0.1,\n        },\n      ],\n    },\n    options: {\n      responsive: true,\n      maintainAspectRatio: false,\n      async onClick(ev) {\n        g_currentDate = ev.chart.tooltip.title;\n        g_currentValue = (\n          Number(ev.chart.tooltip.dataPoints[0].formattedValue) * 100\n        ).toFixed(1);\n        updateCurrentInfoDOM();\n        await renderGeoTiffLayer(\n          g_currentCountry,\n          g_currentDate,\n          g_currentLocationName,\n        );\n        await renderGeoJsonLayer(\n          g_currentCountry,\n          g_currentDate,\n          g_currentLocationName,\n        );\n      },\n      plugins: {\n        legend: {\n          display: false, // 動いていない\n        },\n        datalabels: {\n          display: false,\n          labels: {\n            value: {\n              color: \"#888888\",\n            },\n          },\n        },\n        tooltip: {\n          enabled: true,\n          titleFont: {\n            size: 20,\n          },\n          bodyFont: {\n            size: 18,\n          },\n          usePointStyle: true,\n          callbacks: {\n            label(context) {\n              return `${(Number(context.formattedValue) * 100).toFixed(1)}%`;\n            },\n          },\n        },\n      },\n      scales: {\n        x: {\n          ticks: {\n            autoSkip: true,\n            maxTicksLimit: 20,\n            // callback: function(index, val) {\n            //   return this.getLabelForValue(val)%params.lenOffset === 0 ? this.getLabelForValue(val) : '';\n            // }\n          },\n        },\n        y: {\n          ticks: {\n            display: false, // 動いていない\n            beginAtZero: true,\n          },\n        },\n      },\n    },\n  });\n}\n\n/** グラフを更新する関数 */\nasync function updateChart(dateList, waterAreaList) {\n  const ctx = chartCanvas.getContext(\"2d\");\n  console.log(ctx);\n\n  /** インスタンスの更新 */\n  const chart = Chart.getChart(\"waterchart\");\n  if (chart) {\n    chart.destroy();\n  }\n\n  /** グラフの設定 */\n  waterChart = new Chart(ctx, {\n    type: \"line\",\n    data: {\n      labels: dateList,\n      datasets: [\n        {\n          label: \"Water bodies\",\n          data: waterAreaList,\n          fill: false,\n          borderColor: \"#3B97FF\",\n          pointStyle: \"circle\",\n          pointRadius: 3,\n          // tension: 0.1,\n        },\n      ],\n    },\n    options: {\n      responsive: true,\n      maintainAspectRatio: false,\n      async onClick(ev) {\n        g_currentDate = ev.chart.tooltip.title;\n        g_currentValue = (\n          Number(ev.chart.tooltip.dataPoints[0].formattedValue) * 100\n        ).toFixed(1);\n        updateCurrentInfoDOM();\n        await renderGeoTiffLayer(\n          g_currentCountry,\n          g_currentDate,\n          g_currentLocationName,\n        );\n        await renderGeoJsonLayer(\n          g_currentCountry,\n          g_currentDate,\n          g_currentLocationName,\n        );\n      },\n      plugins: {\n        legend: {\n          display: false, // 動いていない\n        },\n        datalabels: {\n          display: false,\n          labels: {\n            value: {\n              color: \"#888888\",\n            },\n          },\n        },\n        tooltip: {\n          enabled: true,\n          titleFont: {\n            size: 20,\n          },\n          bodyFont: {\n            size: 18,\n          },\n          usePointStyle: true,\n          callbacks: {\n            label(context) {\n              return `${(Number(context.formattedValue) * 100).toFixed(1)}%`;\n            },\n          },\n        },\n      },\n      scales: {\n        x: {\n          ticks: {\n            autoSkip: true,\n            maxTicksLimit: 20,\n            // callback: function(index, val) {\n            //   return this.getLabelForValue(val)%params.lenOffset === 0 ? this.getLabelForValue(val) : '';\n            // }\n          },\n        },\n        y: {\n          ticks: {\n            display: false, // 動いていない\n            beginAtZero: true,\n          },\n        },\n      },\n    },\n  });\n}\n\nasync function handleRadioButtonChange(event) {\n  g_filename = event.target.value;\n  await renderGeoTiffLayer(\n    g_currentCountry,\n    g_currentDate,\n    g_currentLocationName,\n  );\n}\n\n/** **********************************************************************\n * 画面にHTML要素を追加する関数たち\n * ***********************************************************************\n */\n\n/** 画面にスライダーのHTMLを追加する関数 */\nfunction addSlider(dateList) {\n  /** ******* 非表示 *********** */\n  /** スライダーの値を表示するエリアのDOMを追加 */\n  /*\n  const sliderValue = document.createElement(\"div\");\n  document.body.appendChild(sliderValue);\n  sliderValue.id = \"slider-value\";\n  sliderValue.style = `\nz-index: 1000; \nposition: absolute; \nbottom: 44px; \nleft: 15px; \nwidth: 320px; \nheight: 40px; \ntext-align: center; \ncolor: #333; \nfont-size: 16px;\nbackground: white;\nborder: 3px solid #a08b50;\nborder-radius: 2px;\n`;\n  sliderValue.innerHTML = dateList[index];\n\n  const dateSlider = document.createElement(\"input\");\n  dateSlider.id = \"date-slider\";\n  dateSlider.style = `\nz-index: 1000; \nposition: absolute; \nbottom: 48px; \nleft: 34px; \nwidth: 280px;\n`;\n  dateSlider.type = \"range\";\n  dateSlider.min = 0;\n  dateSlider.max = dateList.length - 1;\n  dateSlider.value = index;\n  dateSlider.oninput = async function () {\n    index = this.value;\n    await renderGeoTiffLayer(initCountry, dateList[index], initPlace);\n    await renderGeoJsonLayer(initCountry, dateList[index], initPlace);\n    sliderValue.innerHTML = dateList[index];\n  };\n  document.body.appendChild(dateSlider);\n*/\n}\n\n/** 画面のスライダーを更新する関数 */\nfunction updateSlider(dateList, place) {\n  // /** スライダーのDOMを追加 */\n  // const dateSlider = document.getElementById(\"date-slider\");\n  // const sliderValue = document.getElementById(\"slider-value\");\n  // const selectbox = document.getElementById(\"waterLocationSelectbox\");\n  // const selectedOption = selectbox.options[selectbox.selectedIndex];\n  // const country = selectedOption.parentElement.label;\n  // sliderValue.innerHTML = dateList[index];\n  // dateSlider.id = \"date-slider\";\n  // dateSlider.max = dateList.length - 1;\n  // dateSlider.value = 0;\n  // dateSlider.oninput = async function () {\n  //   index = this.value;\n  //   await renderGeoTiffLayer(country, dateList[index], place);\n  //   await renderGeoJsonLayer(country, dateList[index], place);\n  //   sliderValue.innerHTML = dateList[index];\n  // };\n  // document.body.appendChild(dateSlider);\n}\n\n/** 画面にグラフのHTMLを追加する関数 */\nfunction addChartArea() {\n  /** グラフを描画するエリアのDOMを追加 */\n  const chartArea = document.createElement(\"div\");\n  document.body.appendChild(chartArea);\n  chartArea.id = \"chartArea\";\n  chartArea.style = `\nz-index: 1000; \nposition: absolute; \nbottom: 90px; \nwidth: 100%;\nheight: 200px;\ncolor: white; \nfont-size: 20px;\npadding: 0 15px;\n`;\n\n  /** グラフコンテナDOMを追加 */\n  const chartContainer = document.createElement(\"div\");\n  chartContainer.id = \"waterchart-container\";\n  chartContainer.style = `\nposition: relative;\nwidth: 100%;\nheight: 200px;\npadding: 10px 40px;\nbackground: white;\nborder: 3px solid #a08b50;\nborder-radius: 2px;\n`;\n  chartArea.appendChild(chartContainer);\n\n  /** グラフ本体のDOMを追加 */\n  chartCanvas = document.createElement(\"canvas\");\n  chartCanvas.id = \"waterchart\";\n  chartContainer.appendChild(chartCanvas);\n}\n\n/** 画面にセレクトボックスのHTMLを追加する関数 */\nfunction addSelectBox(locationList) {\n  /** グラフを描画するエリアのDOMを追加 */\n  const selectboxContainer = document.createElement(\"div\");\n  document.body.appendChild(selectboxContainer);\n  selectboxContainer.id = \"selectboxContainer\";\n  selectboxContainer.style = `\nz-index: 1000; \nposition: absolute; \nbottom: 350px; \nleft: 15px;\nwidth: 240px;\nfont-size: 20px;\nfont-weight: bold;\n`;\n\n  const selectbox = document.createElement(\"select\");\n  selectbox.id = \"waterLocationSelectbox\";\n  document.getElementById(\"selectboxContainer\").appendChild(selectbox);\n  selectbox.style = `\nfont-size: 18px;\nwidth: 100%;\ncolor: #333; \npadding: 5px 12px;\nbackground: white;\nborder: 3px solid #a08b50;\nborder-radius: 2px;\n`;\n\n  // Japan\n  const selectboxLabel = document.createElement(\"optgroup\");\n  selectboxLabel.id = \"selectboxLabel\";\n  selectboxLabel.label = \"Japan\";\n  document.getElementById(\"waterLocationSelectbox\").appendChild(selectboxLabel);\n\n  japanLakes.forEach((location) => {\n    const option = document.createElement(\"option\");\n    option.value = location;\n    option.text = location;\n    document.getElementById(\"selectboxLabel\").appendChild(option);\n  });\n\n  // India\n  const selectboxLabelIndia = document.createElement(\"optgroup\");\n  selectboxLabelIndia.id = \"selectboxLabelIndia\";\n  selectboxLabelIndia.label = \"India\";\n  document\n    .getElementById(\"waterLocationSelectbox\")\n    .appendChild(selectboxLabelIndia);\n\n  indiaLakes.forEach((location) => {\n    const option = document.createElement(\"option\");\n    option.value = location;\n    option.text = location;\n    document.getElementById(\"selectboxLabelIndia\").appendChild(option);\n  });\n\n  // Thailand\n  const selectboxLabelThailand = document.createElement(\"optgroup\");\n  selectboxLabelThailand.id = \"selectboxLabelThailand\";\n  selectboxLabelThailand.label = \"Thailand\";\n  document\n    .getElementById(\"waterLocationSelectbox\")\n    .appendChild(selectboxLabelThailand);\n\n  thailandLakes.forEach((location) => {\n    const option = document.createElement(\"option\");\n    option.value = location;\n    option.text = location;\n    document.getElementById(\"selectboxLabelThailand\").appendChild(option);\n  });\n\n  const indonesiaLabel = document.createElement(\"optgroup\");\n  indonesiaLabel.id = \"indonesiaLabel\";\n  indonesiaLabel.label = \"Indonesia\";\n  document.getElementById(\"waterLocationSelectbox\").appendChild(indonesiaLabel);\n\n  indonesiaLakes.forEach((location) => {\n    const option = document.createElement(\"option\");\n    option.value = location;\n    option.text = location;\n    document.getElementById(\"indonesiaLabel\").appendChild(option);\n  });\n\n  const arrow = document.createElement(\"div\");\n  selectboxContainer.appendChild(arrow);\n  arrow.style = `\nposition: absolute;\ntop: 12px;\nright: 10px;\nwidth: 0;\nheight: 0;\nborder-top: 12px solid #a08b50;\nborder-left: 8px solid transparent;\nborder-right: 8px solid transparent;\npointer-events: none;\n`;\n}\n\n/** **********ラジオボタンは、一旦オフ。 TRUE画像描画できるまで ****************** */\n/** 画面にラジオボタンのHTMLを追加する関数 */\nfunction addRadioButton(filenames) {\n  const radioButtonContainer = document.createElement(\"div\");\n  document.body.appendChild(radioButtonContainer);\n  radioButtonContainer.id = \"radioButtonContainer\";\n  radioButtonContainer.style = `\n    z-index: 1000; \n    position: absolute; \n    color: #333;\n    bottom: 300px; \n    right: 15px; \n    min-width: 260px; \n    height: 40px; \n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 20px;\n    color: #333; \n    font-size: 20px;\n    background: white;\n    border: 3px solid #a08b50;\n    border-radius: 2px;\n    `;\n\n  filenames.forEach((filename) => {\n    const radioButton = document.createElement(\"input\");\n    radioButton.type = \"radio\";\n    radioButton.name = \"filename\";\n    radioButton.value = filename;\n    radioButton.id = filename;\n    radioButton.checked = filename === \"NDWI.tif\"; // 初期値を設定\n    const radioButtonLabel = document.createElement(\"label\");\n    radioButtonLabel.htmlFor = filename;\n    radioButtonLabel.textContent = filename;\n    radioButtonLabel.style = `\n      margin-right: 20px;\n    `;\n    radioButtonContainer.appendChild(radioButton);\n    radioButtonContainer.appendChild(radioButtonLabel);\n  });\n\n  radioButtonContainer.addEventListener(\"change\", handleRadioButtonChange);\n}\n\n/** セレクトボックスのイベントリスナー */\nfunction initSelectBoxEventListener() {\n  const selectbox = document.getElementById(\"waterLocationSelectbox\");\n  selectbox.addEventListener(\"change\", async (event) => {\n    const zoom = 15;\n    const locationName = event.target.value;\n    g_currentLocationName = locationName;\n    // timeSeriesを取得\n    const selectbox = document.getElementById(\"waterLocationSelectbox\");\n    const selectedOption = selectbox.options[selectbox.selectedIndex];\n    const country = selectedOption.parentElement.label;\n    g_currentCountry = country;\n    console.log(\"selected country: \", country);\n    const timeSeriesJsonURL = createTimeSeriesJsonUrl(country, locationName);\n    const [dateList, waterAreaList] =\n      await createGraphDataList(timeSeriesJsonURL);\n\n    const data = await getFirstDataFromS3(country, locationName, dateList);\n    const firstFeature = data.data.features[0];\n    g_currentDate = firstFeature.properties.date;\n    g_currentValue = (Number(firstFeature.properties.area) * 100).toFixed(2);\n    updateCurrentInfoDOM();\n\n    let latlng;\n\n    if (firstFeature.geometry.type === \"Polygon\") {\n      latlng = firstFeature.geometry.coordinates[0][0];\n    } else if (firstFeature.geometry.type === \"MultiPolygon\") {\n      latlng = firstFeature.geometry.coordinates[0][0][0];\n    }\n\n    jumpToLocation(latlng[1], latlng[0], zoom);\n    updateChart(dateList, waterAreaList);\n    // updateSlider(dateList, locationName);\n    await renderGeoTiffLayer(country, dateList[index], locationName);\n    await renderGeoJsonLayer(country, dateList[index], locationName);\n    await loadStandardBoundary(country, locationName);\n  });\n}\n\nfunction addCurrentInfo() {\n  const currentInfo = document.createElement(\"div\");\n  currentInfo.id = \"currentInfo\";\n  currentInfo.style = `\nz-index: 1000; \nposition: absolute; \nbottom: 300px; \nleft: 15px; \nmin-width: 380px; \nheight: 40px; \ndisplay: flex;\nalign-items: center;\njustify-content: space-between;\npadding: 0 20px;\ncolor: #333; \nfont-size: 20px;\nfont-weight: bold;\nbackground: white;\nborder: 3px solid #a08b50;\nborder-radius: 2px;\n`;\n\n  const currentDate = document.createElement(\"div\");\n  currentDate.id = \"currentDate\";\n  currentDate.style = `\nmargin-right: 50px;\n  `;\n  currentDate.textContent = g_currentDate;\n  currentInfo.appendChild(currentDate);\n\n  const currentValue = document.createElement(\"div\");\n  currentValue.id = \"currentValue\";\n  currentValue.style = `\n  `;\n  currentValue.textContent = `Surface area: ${g_currentValue}%`;\n  currentInfo.appendChild(currentValue);\n\n  document.body.appendChild(currentInfo);\n}\n\nfunction updateCurrentInfoDOM() {\n  const currentDate = document.getElementById(\"currentDate\");\n  currentDate.textContent = g_currentDate;\n  const currentValue = document.getElementById(\"currentValue\");\n  currentValue.textContent = `Surface area: ${g_currentValue}%`;\n}\n\nfunction hideLayerPanel() {\n  const layerPanel = document.querySelector(\".layerpanel\");\n  layerPanel.style = \"display: none;\";\n  const gradation = document.querySelector(\".gradation\");\n  gradation.style = \"display: none;\";\n  const rightpanel = document.querySelector(\".right-sidebar\");\n  rightpanel.style = \"height: 0;\";\n}\n\n/** S3からデータを取得する */\nasync function getFirstDataFromS3(country, locationName, dateList) {\n  const geoJsonUrl = createGeoJsonUrl(country, locationName, dateList[index]);\n  const geoJson = await axios.get(geoJsonUrl);\n\n  return geoJson;\n}\n"],"sourceRoot":""}