Fork: 0
haya4 / www-root
Transfer to URL with SHA Find file
Newer
Older
www-root / coverage / carto_fuel.html
@hayashi hayashi on 24 Sep 2017 3 KB react
Raw Blame History 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <meta charset='utf-8'/>
  5.  <title>OpenStreetMap coverage (amenity=fuel)</title>
  6.  <link rel="stylesheet" href="../surveyor.css">
  7.  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
  8.  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
  9.  <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
  10.  <script type="text/javascript">
  11.      
  12. window.addEventListener('DOMContentLoaded', function() {
  13.   var req = new XMLHttpRequest();
  14.  
  15.   req.onreadystatechange = function() {		  // XMLHttpRequest オブジェクトの状態が変化した際に呼び出されるイベントハンドラ
  16.     if(req.readyState == 4 && req.status == 200){ // サーバーからのレスポンスが完了し、かつ、通信が正常に終了した場合
  17.     }
  18.   };
  19.  
  20.   req.open("GET", fName, true);
  21.   req.send(null);					    // 実際にサーバーへリクエストを送信
  22. });
  23.  
  24. function parseJSON(jsData) {
  25.   var data = eval("("+ jsData +")");
  26.   var resultdata = "[json.timestamp: "+ data.timestamp +"]";
  27.   return resultdata;
  28. }
  29.  </script>
  30. </head>
  31. <body>
  32. <div id="wrap">
  33.     <div class="header">
  34.         <H1>OpenStreetMap coverage (燃料給油所を指標にした網羅率)</H1>
  35.         <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>
  36.         <a href="https://hayashi.carto.com/builder/d570b7da-c40f-4ad4-afd5-ab99396b0863/embed"><img src="../92px-CARTO-logo.svg.png"/></a><p>国土交通省国土政策局「国土数値情報（燃料給油所データ平成２７年版）」をもとにhayashiが編集・加工したものです。</p>
  37.     </div>
  38.  
  39.     <div id="inner">
  40.         <div id="mainWrap">
  41.             <p>国土数値情報の燃料給油所位置を中心とする、200m四方の矩形領域に存在するOSMのamenity=fuelノードの評価点の合計を数える。<br/>
  42.                 <br/>
  43.                 評価点；<br/>
  44.                   blandがない　ーー＞　１ポイント<br/>
  45.                   fixmeがある　ーー＞　１ポイント<br/>
  46.                   blandがある　ーー＞　５０ポイント<br/>
  47.                 <br/>
  48.                 対象ノード；<br/>
  49.                   amenity = fuel<br/>
  50.                 <br/>
  51.                 レベル分け：<br/>
  52.                   評価点の合計値をもとに以下に色分けしています。<br/>
  53.                     ０ポイント　→　赤 (未入力）<br/>
  54.                     １ポイント以上　→ 黄緑 (一次入力)<br/>
  55.                     50ポイント以上　→　青 (入力済) <br/>
  56.             </p>
  57.         </div>
  58.  
  59.         <div id="sideWrap">
  60.  
  61.             <div id="result"></div>
  62.             <script>
  63.  
  64.                 var tableComponent = React.createClass({
  65.                     render: function() {
  66.                         return React.DOM.table(
  67.                             null,
  68.                             React.DOM.tr(
  69.                                 null,
  70.                                 React.DOM.th(null,"code"),
  71.                                 React.DOM.th(null,"都道府県"),
  72.                                 React.DOM.th(null,"標本数"),
  73.                                 React.DOM.th(null,"カバー率(%)")
  74.                             )
  75.                         );
  76.                     }
  77.                 });
  78.  
  79.                 ReactDOM.render(
  80.                   React.createElement(tableComponent), 
  81.                   document.getElementById('result')
  82.                 );
  83.             </script>
  84.         </div>
  85.         <div class="clear"><hr /></div>
  86.     </div>
  87. </div>
  88.  
  89. </body>
  90. </html>