マルティスープ
Staff Blog

2017.01.16

東京の花粉量をヒートマップで可視化する

みなさん、こんにちは！

Google Maps JavaScript API のライブラリには、データ可視化ライブラリ(visualization library)というものがあるのですが、ご存知ですか？

本日はその中の HeatMapLayer クラスを用いた時系列データの可視化の例を紹介したいと思います！とっても便利なツールなんですよ＾＾

データは昨年2016年、2/10～5/1に東京の各地点で計測され花粉の粉飛量を使用することにします。

(http://www.tokyo-eiken.go.jp/kj_kankyo/kafun/)

それでは、再生ボタンを押してデモをご覧ください。

以下に簡単にソースの概要を説明いたします。

libraries パラメータを用いてライブラリをロードする

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization">

ヒートマップ レイヤを介してクライアント側でデータのレンダリングを行う

 heatMapData = [
  {location: new google.maps.LatLng(lat1, lon1), weight: w1},
  {location: new google.maps.LatLng(lat2, lon2), weight: w2},
  {location: new google.maps.LatLng(lat3, lon3), weight: w3},
  ......
]; (weight:重みづけ、今回は花粉量)
heatmap = new google.maps.visualization.HeatmapLayer({
 data: heatMapData 
 map: _map
});

一定間隔でheatMapDataを書き替える

setInterval(function(){
　heatmap.setData(heatMapData);　//別の日時のheatMapDataをセット
}, ｍsec);

いかがでしたか？

Google Maps JavaScript API を使用すれば、非常に簡単にヒートマップを作成することができますね。

その他にもデータ可視化ライブラリには、グラフを作成する機能などもありますので、また次回ご紹介したいと思います。

マルティスープでは、Google Maps を使用したソリューションの開発支援も行っています。Google Maps をはじめ、様々な地図を使用した開発経験も多数ありますので、お困りのことがありましたら是非お問い合わせください。お問い合わせは、以下のフォームより受け付けております。