NC DATA
<select id="nc_fields" onchange="nc_field_change(this)">
</select>


<p></p>

<div id="map" style="width:1500px;height:800px"></div>




<!-- 아래 js, css를 webassets에서 못찾는다. ?? -->

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/esri-leaflet@3.0.12/dist/esri-leaflet.js"></script>
<script src="https://unpkg.com/esri-leaflet-vector@4.2.3/dist/esri-leaflet-vector.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>



<script type="text/javascript">

  const apiKey = "AAPK3ab110b0bd2e462b8c062ec32014436bvUInEDfWZ_sHD3n4tW5pLvaj2W0W6KezLh1NNJW2TEHDXzfopTR_EwVD85lE3hwf";
  let basemapEnum = 'arcgis/oceans';

  const map = L.map('map', {
        minZoom: 2
  }).setView([38.30, 134.52], 7);


  
  window.onload = () => {

    L.esri.Vector.vectorBasemapLayer(basemapEnum, {
        apiKey: apiKey,
        version: 2,
        language: 'ko',
    }).addTo(map);


    


    // const layer = L.tileLayer.wms(`http://localhost:30000/geoserver/ckan/wms?service=WMS`, {
    //     layers: "ckan:3f4835fb-8cf4-43a0-bbdc-c0bc1242b75d",
    //     transparent: true,
    //     opacity: 0.7,
    //     format: 'image/png',
    //     //time: '2022-12-22' + 'T12:00:00Z',
    //     //DIM_ST_OCEAN: 48.45497512817383
    // }).addTo(map);


    axios.get("https://sofdc.duckdns.org/sofdc/nc_data_fields?data=temperature&resource_id=ec801e0d-d841-4105-b58b-94c1b62909b7")
      .then(response => {
        console.log(response.data)

        const elem = document.getElementById('nc_fields')
        if(response.data.nc_fields){
          response.data.nc_fields.forEach((field) => {
            elem.innerHTML += `<option value="${field}">${field}</option>`
          })
        }
      })
      .catch(error => {
        console.error('Error:', error);
    })
  }

  const nc_field_change = (elem) => {
      console.log(elem.value)
      axios.get("https://sofdc.duckdns.org/sofdc/nc_data?field=" + elem.value + "&resource_id=ec801e0d-d841-4105-b58b-94c1b62909b7")
        .then(response => {
          //console.log(response)
            try{
                const data = response.data.data
                const lat = response.data.lat.values
                const lon = response.data.lon.values
                const nc_time = response.data.nc_time.values

                data[40].forEach((elem, index) => {
                const circle = L.circle([lat[index], lon[index]], {
                        color: '#ff0000',       // 테두리: 빨간색
                        fillColor: '#ff6666',   // 채우기: 연한 빨간색
                        fillOpacity: 0.4,       // 투명도 40%
                        opacity: 0.8,           // 테두리 투명도
                        weight: 3,              // 테두리 두께
                        radius: 3000
                    }).addTo(map)
                circle.bindTooltip("time:"+nc_time[index]+", val:"+data[40][index]);// 마우스를 올릴 때 표시
                })
            }catch(error){
            }
          
        })
        .catch(error => {
          console.error('Error:', error);
      })
    }

</script>