<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PLATEAU DATA</title>
<link rel="stylesheet" href="lib/ol6.14.1-dist/ol.css" type="text/css">
<link rel="stylesheet" href="lib/surveyor.css" type="text/css">
<script src="lib/ol6.14.1-dist/ol.js"></script>
<script src="index.js" type='text/javascript'></script>
<style>
#map {
width: 98%;
height: 640px;
}
#popup {
position: relative;
display: inline-block;
margin: 1.5em 0;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
color: #555;
font-size: 16px;
background: #FFF;
border: solid 3px #555;
box-sizing: border-box;
}
#popup:before {
content: "";
position: absolute;
bottom: -24px;
left: 50%;
margin-left: -15px;
border: 12px solid transparent;
border-top: 12px solid #FFF;
z-index: 2;
}
#popup:after {
content: "";
position: absolute;
bottom: -30px;
left: 50%;
margin-left: -17px;
border: 14px solid transparent;
border-top: 14px solid #555;
z-index: 1;
}
.popup p {
margin: 0;
padding: 0;
}
</style>
</head>
<body onload='loadMap();'>
<div id="wrap">
<div class="header">
<H1>PLATEAU OSMデータ</H1>
<div id='map'></div>
</div>
<div id="inner">
<div>
<table>
<caption>PLATEAU 作業対象リスト</caption>
<thead>
<tr>
<th>code</th>
<th>地区名</th>
<th>フォルダ名</th>
</tr>
</thead>
<tbody id="data_list"></tbody>
</table>
</div>
<div class="clear"><hr /></div>
</div>
</div>
<script src="lib/jquery-2.1.1.min.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function() {
$.getJSON("index.json", function(data) {
var count = 0 ;
$(data.list).each(function() {
$("#data_list").append("<tr id=\"data_id" + count + "\"></tr>") ;
$("#data_list #data_id" + count).append("<td class='code'>" + this.code + "</td>") ;
$("#data_list #data_id" + count).append("<td class='name'>" + this.name + "</td>") ;
$("#data_list #data_id" + count).append("<td class='path'><a href='index2.html?code=" + this.code +"'>" + this.path +"</a></td>") ;
count++ ;
});
});
});
</script>
<!-- ポップアップ -->
<div id='popup' class='ol-popup'>
<a href='#' id='popup-closer' class='ol-popup-closer'></a>
<div id='popup-content'></div>
</div>
</body>
</html>
