MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2017.01.16

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

heatmap

みなさん、こんにちは!

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をセット
}, msec);

 

いかがでしたか?

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

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

 

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

 

【関連記事】こんな記事も読まれています

2017.10.28

GoogleマップにFusion Tablesを使ってマーカーを7万個描画する

みなさん、こんにちは。

今回は、Google  Fusion Tables にデータを登録し、Google Maps JavaScript A・・・

続きを読む

2016.08.14

Google Maps で OpenStreetMap を表示する!

みなさん、こんにちは!

今回は、Google Maps 上に「OpenStreetMap」を表示する方法を説明いたします。

&nb・・・

続きを読む

2017.05.17

Googleマップで「戦前の23区を見渡せる空中写真」を表示する

みなさん、こんにちは。

国土地理院が、4月28日に「戦前の23区が見渡せる空中写真」を公開しました。

続きを読む

 - Google Maps APIs, Google Maps JavaScript API, スタッフ日記

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)