Leaflet Quick Start Guide: PHP で出力された GeoJSON の利用

データベース MySQL に保管されているデータを PHP スクリプトで GeoJSON 形式で出力し， それを地図上にプロットすることを考える.

前提: PHP

PHP スクリプトからデータベースにアクセスし，GeoJSON が出力されるようにする． なお，hostname として自分のホスト名を指定すること．

<URL:http://10.164.5.205/~sugiyama/get_geojson.php?hostname=sugiyama>

jquery を利用したプロット方法

head 内で jquery を読み込む

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

script 内で以下のように書く. 

$.getJSON( "http://10.164.5.205/~sugiyama/get_geojson.php?hostname=sugiyama", function (data) {
   L.geoJson(data, {
       pointToLayer: function (feature, latlng) {
           if (feature.properties.temp >= 30) {
               return L.circle(latlng,50, {color: 'red'})
           }
           if (feature.properties.temp < 30) {
               return L.circle(latlng,50, {color: 'blue'})
           }
       }
   }).addTo(mymap);
})

まとめ

以下のような HTML を作成すると，松江高専付近の地図に 温度に応じた色違いのサークルが表示されるはずである (高専内からのみアクセス可)． <URL:leaflet-samples/> の leaflet-04.html をダウンロードして用いてみよ． なお，サークルをクリックしたときに時刻や温度を表示し，さらに右下に凡例を入れている．

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex" />
  <title>Leafletチュートリアル</title>

  <!-- Leaflet's CSS -->
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
        integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
        crossorigin=""/>

  <!-- Leaflet JavaScript file -->
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
          integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
          crossorigin=""></script>

  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

  <style>

   .legend {
     padding: 6px 8px;
     font: 14px/16px Arial, Helvetica, sans-serif;
     background: white;
     background: rgba(255,255,255,0.8);
     box-shadow: 0 0 15px rgba(0,0,0,0.2);
     border-radius: 5px;
     line-height: 17px;
     color: #555;
   }
   .legend i {
     width: 17px;
     height: 17px;
     float: left;
     margin-right: 8px;
   }

   #mapid { height: 600px; }
  </style>
</head>
<body>
<div id="mapid"></div>

<script>
  var mymap = L.map('mapid').setView([35.495897, 133.025808], 14);

  // データソースは国土地理院
  L.tileLayer(
      'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',  {
          attribution: '&copy; <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">地理院タイル</a>'
      }).addTo(mymap);

 //  $.getJSON( "sample.geojson", function (data) {                                                                                    
 $.getJSON( "http://10.164.5.205/~sugiyama/get_geojson.php?hostname=sugiyama", function (data) {
   var point = L.geoJson(data, {
       pointToLayer: function (feature, latlng) {
           if (feature.properties.temp >= 35) {
               return L.circle(latlng,50, {color: '#800026'})
           }
           else if (feature.properties.temp > 30) {
               return L.circle(latlng,50, {color: '#BD0026'})
           }
           else if (feature.properties.temp > 25) {
               return L.circle(latlng,50, {color: '#E31A1C'})
           }
           else if (feature.properties.temp > 20) {
               return L.circle(latlng,50, {color: '#FC4E2A'})
           }
           else if (feature.properties.temp > 15) {
               return L.circle(latlng,50, {color: '#FD8D3C'})
           }
           else if (feature.properties.temp > 10) {
               return L.circle(latlng,50, {color: '#FEB24C'})
           }
           else if (feature.properties.temp > 5) {
               return L.circle(latlng,50, {color: '#FED976'})
           }
           else {
               return L.circle(latlng,50, {color: '#FFEDA0'})
           }
       },
       onEachFeature: function (feature, layer) {
           layer.bindPopup(feature.properties.time + "：" + feature.properties.temp+ "℃");
       }
   })
   point.addTo(mymap);
 })

 function getValue1(x) {
   return x >= 35 ? "#800026" :
       x >= 30 ? "#BD0026" :
       x >= 25 ? "#E31A1C" :
       x >= 20 ? "#FC4E2A" :
       x >= 15 ? "#FD8D3C" :
       x >= 10 ? "#FEB24C" :
       x >= 5 ? "#FED976" :
       "#FFEDA0";
 }

 var legend = L.control({position: 'bottomright'});
 legend.onAdd = function(map) {
   var div = L.DomUtil.create('div', 'legend');
   var grades1 = [0, 5, 10, 15, 20, 25, 30, 35];
   div.innerHTML += '気温 <br>';
   div.innerHTML +=
       '<i style="background:' + getValue1(grades1[7]) + '"></i> ' +
       '≧' + grades1[7] + '<br>'
   for (var i = 0; i < grades1.length-1; i++) {
       div.innerHTML +=
           '<i style="background:' + getValue1(grades1[6-i]) + '"></i> ' +
           grades1[6-i] + '&ndash;' + grades1[6-i + 1] + '<br>';
   }
   return div;
};
legend.addTo(mymap);

</script>
</body>
</html>

参考