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.10.12

園内探索エンターテインメント「花やしき歴史散歩」

みなさん、こんにちは。

突然ですが、日本最古の遊園地といえばどこか知っていますか?

 

みなさん・・・

続きを読む

2018.01.13

Google Maps JavaScript API で描画ツールを利用してみる

みなさん、こんにちは。

Google Maps JavaScript API で地図上にラインや円、ポリゴン、四角形、マーカーを描画するツ・・・

続きを読む

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

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

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