<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  layout:decorate="~{layout/layout}">
<head>
  <meta charset="UTF-8" th:remove="tag">
	<script th:inline="javascript">
		const cities = /*[[${cities}]]*/"cities";
		console.log(cities);
var __map;
var __markerLayer = null;
var __overlay = null;		// ポップアップを表示するためのレイヤー

function loadMap() {

	// マップの作成
	__map = new ol.Map({
		target: 'map',
		layers: [
			new ol.layer.Tile({
				source: new ol.source.OSM()
			})
		],
		view: new ol.View({
			center: ol.proj.fromLonLat([139.745433,35.658581]),
			zoom: 8
		})
	});

    // マーカーの見た目の作成
    var style = new ol.style.Style({
        image: new ol.style.Icon({
            src: '/task-bldg/img/osm_200x200.png',
            anchor: [0.5, 0.5],
            scale: 0.2
        })
    });
	
    // 表示するためのレイヤーを作成する
    __markerLayer = new ol.layer.Vector({
        source: new ol.source.Vector()
    });
    __map.addLayer(__markerLayer);

    // ポップアップを表示するためのオーバーレイを作成する
    __overlay = new ol.Overlay({
        element: document.getElementById('popup'),
        positioning: 'bottom-center'
    });

	{
		style = new ol.style.Style({
		    image: new ol.style.Icon({
		        src: '/task-bldg/img/osm_200x200.png',
		        anchor: [0.5, 0.5],
		        scale: 0.2
		    }),
		    stroke: new ol.style.Stroke({color: '#ff33ff', width: 10})
		});

	    $(cities).each(function() {
		    var feature = new ol.Feature({
		        geometry: new ol.geom.Point(ol.proj.fromLonLat([Number(this.lng),Number(this.lat)])),
		        code: this.citycode,
		        name: this.cityname
		    });
		    feature.information = this;
		    feature.setStyle(style);
		    __markerLayer.getSource().addFeature(feature);
	    });
	    
	    // 地図のクリックイベントを設定
	    __map.on('click', function (evt) {
	        var feature = __map.forEachFeatureAtPixel(
				evt.pixel,
	            function (feature) {
	                return feature;
	            }
	        );
	        if (feature) {
	            var coordinates = feature.getGeometry().getCoordinates();
	            var info = feature.information;
	            var element = __overlay.getElement();
	            var descriptionHTML =
	                "<div>" + info.citycode + "</div>" +
	                "<div>" + info.cityname + "</div>" +
	                "<div><a href='/task-bldg/mesh/"+ info.citycode +"'>" + info.folder + "</a></div>";
	            element.innerHTML = descriptionHTML;
	            __overlay.setPosition(coordinates);
	            __map.addOverlay(__overlay);
	        } else {
	            __map.removeOverlay(__overlay);
	        }
	    });
	};
}
	</script>
</head>
<body onload='loadMap()'>

  <!-- サイドバーの表示 -->
  <div layout:fragment="sidebar" th:replace="~{fragments/sidebar :: sidebar}">
  </div>


  <!-- コンテンツの表示 -->
  <div layout:fragment="content">
    <main class="offcanvas-outside bg-light">
      <div class="container-fluid">
        <!-- トグルボタン -->
        <div th:replace="~{fragments/sidebar :: toggler}">
        </div>

        <div class="row">
          <div class="col">

            <div class="card shadow">
              <div class="card-header">
                <h6 class="text-navy my-2">Plateau 3D都市データ</h6>
              </div>
              <div class="card-body">

                <!-- マップ -->
                <div id="wrap">
                  <div class="header">
                    <div id='map'></div>
                  </div>
                    
                  <!-- ポップアップ -->
                  <div id='popup' class='ol-popup'>
                    <a href='#' id='popup-closer' class='ol-popup-closer'></a>
                    <div id='popup-content'></div>
                  </div>
                </div>
            
                <table class="table table-bordered">
                  <thead>
                    <tr>
                      <th th:text="#{status}"></th>
                      <th th:text="#{citycode}"></th>
                      <th th:text="#{cityname}"></th>
                      <th th:text="#{folder}"></th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr th:each="city : ${cities}" th:object="${city}">
                      <td><img th:alt="*{status}" th:src="@{/img/{status}.png(status=*{status})}"></img></td>
                      <td th:text="*{citycode}"></td>
                      <td th:text="*{cityname}"></td>
                      <td th:text="*{folder}"></td>
                      <td>
                        <a th:href="@{/mesh/{citycode}(citycode=*{citycode})}" class="btn btn-navy">
                          <i class="bi bi-pencil-square" th:text="#{operation}"></i>
                        </a>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

          </div>
        </div>
      </div>
    </main>
  </div>

</body>
</html>
