Newer
Older
osm-data / index.html
<!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;
    }
    
	.link {
		white-space: pre-line;
		border: dotted 2px skyblue;
		margin: 20px;
		padding: 10px;
		font-size: 16px; line-height: 2; color: blue;
	}
  
    .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 class='link'><p class='plane'>PLATEAU「<a href="https://www.geospatial.jp/ckan/dataset/plateau">3D都市モデル</a>」を参照して OpenStreetMapを編集する方法は「'<a href="http://surveyor.mydns.jp/task-bldg/">task-bldg</a>'」で説明しています。
	OpenStreetMapへの編集は「'<a href="http://surveyor.mydns.jp/task-bldg/">task-bldg</a>'」にて「作業登録」を行って編集してください。</p></div>

    <div>
    	<table>
			<caption>PLATEAU 作業対象リスト</caption>
            <thead>
            	<tr>
                	<th>code</th>
                    <th>地区名</th>
                    <th>フォルダ名</th>
                </tr>
            </thead>
            <tbody id="data_list"></tbody>
        </table>
    </div>
	<div><a href="site-policy.html">サイト利用規約</a></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>