Fork: 0
osm / osm-data
Transfer to URL with SHA Find file
Newer
Older
osm-data / index.html
@haya4 haya4 on 24 Jun 2022 2 KB FIX リストのリンクと表の幅
Raw Blame History 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <meta charset='utf-8'/>
  5.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.  <title>PLATEAU DATA</title>
  7.  <link rel="stylesheet" href="lib/ol6.14.1-dist/ol.css" type="text/css">
  8.  <link rel="stylesheet" href="lib/surveyor.css" type="text/css">
  9.  <script src="lib/ol6.14.1-dist/ol.js"></script>
  10.  <script src="index.js" type='text/javascript'></script>
  11.  <style>
  12. 	#map {
  13. 		width: 98%;
  14. 		height: 720px;
  15. 	}
  16.   
  17.     #popup {
  18.         position: relative;
  19.         display: inline-block;
  20.         margin: 1.5em 0;
  21.         padding: 7px 10px;
  22.         min-width: 120px;
  23.         max-width: 100%;
  24.         color: #555;
  25.         font-size: 16px;
  26.         background: #FFF;
  27.         border: solid 3px #555;
  28.         box-sizing: border-box;
  29.     }
  30.  
  31.     #popup:before {
  32.         content: "";
  33.         position: absolute;
  34.         bottom: -24px;
  35.         left: 50%;
  36.         margin-left: -15px;
  37.         border: 12px solid transparent;
  38.         border-top: 12px solid #FFF;
  39.         z-index: 2;
  40.     }
  41.  
  42.     #popup:after {
  43.         content: "";
  44.         position: absolute;
  45.         bottom: -30px;
  46.         left: 50%;
  47.         margin-left: -17px;
  48.         border: 14px solid transparent;
  49.         border-top: 14px solid #555;
  50.         z-index: 1;
  51.     }
  52.  
  53.     .popup p {
  54.         margin: 0;
  55.         padding: 0;
  56.     }
  57.  </style>
  58. </head>
  59. <body onload='loadMap();'>
  60.   <div id="wrap">
  61.       <div class="header">
  62.           <H1>PLATEAU OSMデータ</H1>
  63.           <div id='map'></div>
  64.       </div>
  65.   
  66.       <div id="inner">
  67.           <div>
  68.               <table>
  69.                   <caption>PLATEAU 作業対象リスト</caption>
  70.                   <thead>
  71.                       <tr>
  72.                           <th>code</th>
  73.                           <th>地区名</th>
  74.                           <th>フォルダ名</th>
  75.                       </tr>
  76.                   </thead>
  77.                   <tbody id="data_list"></tbody>
  78.               </table>
  79.           </div>
  80.           <div class="clear"><hr /></div>
  81.       </div>
  82.   </div>
  83.   <script src="lib/jquery-2.1.1.min.js"></script>
  84.   <script>
  85.     window.addEventListener('DOMContentLoaded', function() {
  86.         $.getJSON("index.json", function(data) {
  87.             var count = 0 ;
  88.             $(data.list).each(function() {
  89.                 $("#data_list").append("<tr id=\"data_id" + count + "\"></tr>") ;
  90.                 $("#data_list #data_id" + count).append("<td class='code'>" + this.code + "</td>") ;
  91.                 $("#data_list #data_id" + count).append("<td class='name'>" + this.name + "</td>") ;
  92.                 $("#data_list #data_id" + count).append("<td class='path'><a href='index2.html?code=" + this.code +"'>" + this.path +"</a></td>") ;
  93.                 count++ ;
  94.             });
  95.         });
  96.     });
  97.   </script>
  98. 	  
  99.   <!-- ポップアップ -->
  100.   <div id='popup' class='ol-popup'>
  101.     <a href='#' id='popup-closer' class='ol-popup-closer'></a>
  102.     <div id='popup-content'></div>
  103.   </div>
  104. 	  
  105. </body>
  106. </html>