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(アイ・フィールド)®シリーズは、屋内外業務の現場の実力を減少させるコミュニケーション障壁を除き、使い慣れたスマートデバイスを使って 現場の実力をリアルに伝えるサービス。

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

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

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

2017.01.12

Roads API を使って道路へスナップする

みなさん、こんにちは!

 

今回は、Google Maps API のウェブサービスのひとつ「

続きを読む

2018.04.20

Google マップでルート検索のレンダリングをカスタマイズ

みなさん、こんにちは!

Google Maps JavaScript API でルート検索を行い、その結果を地図上にレンダリングするとき、・・・

続きを読む

2016.10.12

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

みなさん、こんにちは。

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

 

みなさん・・・

続きを読む

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