Fork: 0
haya4 / www-root
Transfer to URL with SHA Find file
Newer
Older
www-root / coverage / carto_fuel.html
@hayashi hayashi on 23 Sep 2017 2 KB JSONデータをフォームに表示する
Raw Blame History 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <meta charset='utf-8'/>
  5.  <link rel="stylesheet" href="../surveyor.css">
  6.  <script type="text/javascript">
  7. function getJSON(fName) {
  8.   var req = new XMLHttpRequest();
  9.  
  10.   req.onreadystatechange = function() {		  // XMLHttpRequest オブジェクトの状態が変化した際に呼び出されるイベントハンドラ
  11.     if(req.readyState == 4 && req.status == 200){ // サーバーからのレスポンスが完了し、かつ、通信が正常に終了した場合
  12.       $("result").innerHTML = parseJSON(req.responseText);		          // 取得した JSON ファイルの中身を表示
  13.     }
  14.   };
  15.  
  16.   req.open("GET", fName, true);
  17.   req.send(null);					    // 実際にサーバーへリクエストを送信
  18. }
  19.  
  20. function parseJSON(jsData) {
  21.   var data = eval("("+ jsData +")");
  22.   return jsData;
  23. }
  24.  </script>
  25. </head>
  26. <body>
  27. <H1>OpenStreetMap coverage (バス停を指標にした網羅率)</H1>
  28. <iframe width="100%" height="720" frameborder="0" src="https://hayashi.carto.com/builder/d570b7da-c40f-4ad4-afd5-ab99396b0863/embed" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
  29. <a href="https://hayashi.carto.com/builder/d570b7da-c40f-4ad4-afd5-ab99396b0863/embed"><img src="../92px-CARTO-logo.svg.png"/></a><p>国土交通省国土政策局「国土数値情報（燃料給油所データ平成２７年版）」をもとにhayashiが編集・加工したものです。</p>
  30.  
  31. <table>
  32.  <tr>
  33.   <td class="left">
  34.     <p>国土数値情報の燃料給油所位置を中心とする、200m四方の矩形領域に存在するOSMのamenity=fuelノードの評価点の合計を数える。<br/>
  35.     <br/>
  36.     評価点；<br/>
  37.     　blandがない　ーー＞　１ポイント<br/>
  38.     　fixmeがある　ーー＞　１ポイント<br/>
  39.     　blandがある　ーー＞　５０ポイント<br/>
  40.     <br/>
  41.     対象ノード；<br/>
  42.     　amenity = fuel<br/>
  43.     <br/>
  44.     レベル分け：<br/>
  45.     　評価点の合計値をもとに以下に色分けしています。<br/>
  46.     　　０ポイント　→　赤 (未入力）<br/>
  47.     　　１ポイント以上　→ 黄緑 (一次入力)<br/>
  48.     　　50ポイント以上　→　青 (入力済) <br/>
  49.     </p>
  50.   </td>
  51.   <td class="right">
  52. <input type="button" value="データを取得する" onclick="getJSON('coverage.fuel.json')"/>
  53. <div id="result"></div>
  54.   </td>
  55.  </tr>
  56. </table>
  57.  
  58. </body>
  59. </html>