MULTISOUP

MULTISOUP

MULTISOUP

マルティスープ
Staff Blog

Introduction example

2017.10.21

Google Charts を利用して日本地図を色塗りしてみる

GeoChart

みなさん、こんにちは。

今回は、Google Charts の GeoChart を利用して、日本地図を都道府県単位で色塗りしてみたいと思います。

 

Google Charts とは、Google が提供するグラフを描画するツールです。非常にたくさんのグラフを作成できるのですが、その中に地図に関するグラフがあります。

詳細は、下記のページをご覧ください。

https://developers.google.com/chart/

 

では早速コードを書いていきましょう。

まず、Google Chart の js ファイルをロードします。

<script src="https://www.gstatic.com/charts/loader.js" ></script>

 

GeoChart を利用できるようパッケージをロードします。

google.charts.load('current', {
	'packages':['geochart']
});
google.charts.setOnLoadCallback(drawMap);

 

GeoChart を描画する関数です。指定するデータは、都道府県名と数値になりますが、都道府県名に都や県、府が含まれると上手くいきません。。。

function drawMap() {
	//都道府県単位のデータ
	var data = [
	    ["都道府県","回数"],
	    ["北海道", 5],
	    ["青森",   2],
	    ["秋田",   0],
	    ["岩手",   1],
	     :
	];
	var dt = google.visualization.arrayToDataTable(data);
	var options = {
		region: 'JP',  //地域
		displayMode: 'regions', // regions=塗りつぶし, markers=マーカー 
		backgroundColor: '#ebf7fe', //背景色
		resolution: 'provinces',
		colors:['white','green'] //階層の色
	};
	//出力するDivを指定して chart を生成
	var chart = new google.visualization.GeoChart(document.getElementById('region-div'));
	//描画
	chart.draw(dt, options);
}

 

以下がサンプルです。こちらのデータは、2017年10月20日現在、ブラタモリでタモリさんが訪問した都道府県の回数となっています。色が塗られていないところが、まだ訪問していない都道府県になります。大分少なくなりました。地図上にマウスカーソルを合わせると、都道府県名と回数が表示されます。

 

displayMode を “markers” に設定すると、塗り潰しではなくマーカでの描画になります。

displayMode: 'markers'

 

 

いかがでした?

こんなに簡単に作成できるとは、自分も思っていなかったのでビックリです。

今回作成したグラフは、Google Analytics でも使われており、Google系のサイトではよく見るものですね。また、地図以外にも色々なグラフを簡単に作れると思いますので、みなさんもご利用ください。

 

余談ですが、弊社では ブラタモリマップ を作成し、Googleマップ上で訪問した場所を参照できるようにしています。ご興味のある方は、是非ご覧ください。

 

 

 

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

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

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

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

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

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

2017.07.09

Geocoding API を使って郵便番号から住所を入力するフォーム

みなさん、こんにちは。

よく入力フォームで住所を入力するとき、郵便番号から自動で住所を入力する方法がありますね。今回は、Google Maps・・・

続きを読む

2017.03.05

Google マップにKMLファイルをロードする

みなさん、こんにちは。

今回は、Google Maps に KMLファイルをロードしてマーカー、ライン、ポリゴンを表示する方法を紹介します・・・

続きを読む

2017.04.15

JavaScript API でよく使う地図オプション

みなさん、こんにちは!

今回は、「JavaScript・・・

続きを読む

 - スタッフ日記