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 をはじめ、様々な地図を使用した開発経験も多数ありますので、お困りのことがありましたら是非お問い合わせください。お問い合わせは、以下のフォームより受け付けております。

 

地図や位置情報を用いたシステムのご提案・開発ならマルティスープへ

マルティスープは、創業以来のGISとモバイル開発の実績と技術力で、営業支援システムやリサーチ・公共インフラ・工事・警備業界の現場を支援するシステム開発など、地図や位置情報を使った業務システムの導入のご提案や開発をいたします。

現場をつなぐコミュニケーションが屋内外業務のパフォーマンスを最大限に。マルティスープのiField(アイ・フィールド)®シリーズは、屋内外業務の現場の実力を減少させるコミュニケーション障壁を除き、使い慣れたスマートデバイスを使って 現場の実力をリアルに伝えるサービス。

位置・空間情報のエキスパート集団として一緒に働きませんか?

マルティスープは地図情報をはじめとする位置・空間情報技術のエキスパート集団です。当社で日々研究している地図や位置情報といった技術は、災害支援など貢献度の高いシステムとして使用されることもあれば、スマートフォンアプリのゲームとして使われることもあり、その利用用途・価値は、今後もますます広がっていっています。
私たちの企業理念は、「創る喜び、使う喜び」です。
今後の開発体制をより強化するために、新卒・中途問わず、当社の未来を共に創っていただける新メンバーを募集します!

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

2019.04.07

Static Maps に自前でマーカーとラベルを描く

みなさん、こんにちは。

静的な地図画像を取得するには、Maps Static API を利用しますよね。

その際、地図上に好きなマ・・・

続きを読む

2019.02.18

Google マップのコントロールを小さくしたい

みなさん、こんにちは。

最近の Dynamics Maps を利用すると地図を選択するコントロールやズームコントロールが大きくなっているこ・・・

続きを読む

2018.08.02

Directions と Directions Advanced の違い

みなさん、こんにちは。

7月16日より、Google Maps APIs は Google Maps Platform と名前を変え、新しい価・・・

続きを読む

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