gmapにエリア範囲指定で色をつける方法

gmapにエリア範囲指定で色をつける方法

2017-04-08 最終更新日:2017-04-08

今回は地図のエリア範囲を色分けしてみたいと思います。材料はgooglemapとgmaps.jsのライブラリを使います。 マーカーを置くというのはありますが、エリア内に色をつけるというのはあまりないと思いますのでご紹介します。

今回は出雲市の市町村合併の様子がわかるようにしたいと思います。平成7年度の出雲市と平成28年度の出雲市を比べてみたいと思います。


スポンサーリンク


設定方法

まずは国土数値情報ダウンロードサービス に行きます。

googlemap

ここから行政区分を選択します。

googlemap

ダウンロードデータには島根をチェックします。

googlemap

行政区域データは平成7年と平成28年を選択します。次へ行きます。

googlemap

アンケートを記入しないと先に進めないのでチェックボックスだけ選択します。記述項目は任意なので記入しなくても良いです。

googlemap

ダウンロードします。

googlemap

zipファイルなので回答して中を見てみるといろいろファイルがありますが使うのはshp拡張子のシェープファイルのみです。あとはいらないので削除しておきましょう、このshpファイルを編集した後kmlファイルに変換します。

こんどはshpファイルの編集ソフトをダウンロードします。こちらのサイトから⇒QGISプロジェクトへようこそ!ダウンロードします。Macはちょい古いバージョンしかダウンロードできないですね。

googlemap

インストールができたら開きます。そしてベクタレイア追加をクリックします。

googlemap

そして先ほどダウンロードしたshpファイルを選択します。

googlemap

鉛筆マークをクリックして編集モードにします。

googlemap

地域の選択を選ぶとクリックしたところが選択されます。そこはデリートで削除できるのでいらないところは削除します。ドラッグして選択しても削除できますので出雲市以外は全部削除します。

googlemap

そしてレイアを右クリックして名前をつけて保存にします。

googlemap

形式がkmlになっていることを確認して、ブラウズを押して適当な前にして保存します。

googlemap

グーグルマップのメニューからマイプレイスを選びます。

googlemap

マイマップタブにしてから地図を作成を選びます。

googlemap

無題の地図の無題のレイヤからインポートをクリックします。

googlemap

ソフトで変換したkmlファイルを選択します。

googlemap

データが読み込まれました。無題の地図と無題のレイヤの名前を変えておきます。

googlemap

出雲市をクリックすると選択した無題を名前を変えます。出雲市にしておきます。

googlemap

レイヤを追加して出雲市に名前を変えた分だけ追加したレイヤにドラッグします。あとの無題はいらないのでレイヤごと削除します。

googlemap

kmlにエクスポートします。

googlemap

エクスポートするレイヤを選択してエクスポートします。

今回は28年度用をしましたが平成7年度のデータも同じようにします。

googlemap

グーグルマップで出雲市地図を表示させて緯度経度を調べます。出雲駅あたりを表示させたいのでここのあたりで右クリックしてこの場所についてを表示させます。

googlemap

住所の下に緯度経度の数値があるのでその数値を保存しておきます。

googlemap

Ogre - ogr2ogr web clientこちらのサイトからkmlをgeojsonに変換します。 ファイルを選択してForce downloadにチェックを入れて Convert to GeoJSONをクリックして変換します。

googlemap

convert.jsonというファイルができあがりますのでエディタで開いてcoordinatesという項目の配列を選択してそのデータを保存します。

あとは下記のように設定するだけなのですがgmaps.jpのライブラリを使いますので公式サイトからダウンロードして使うかCDNをお使いください。

<script src="https://maps.googleapis.com/maps/api/js?key=●●●●●●●●●●●●●●●●●"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.25/gmaps.min.js"></script>
<script>
(function($){
	$(function(){
	var map;
	var lat_value = 35.359506; // 緯度
	var lng_value = 132.757109; // 経度
	map = new GMaps({
		div: '#gmap',
		zoom: 11,
		lat: lat_value,
		lng: lng_value,
		scrollwheel: false,
		zoomControl : true,
		zoomControlOpt: {
			style : 'DEFAULT',
			position: 'TOP_LEFT'
		},
		panControl : true,
		streetViewControl : true,
		mapTypeControl: true,
		overviewMapControl: true
	});
	var path = [
	// convert.jsonのcoordinatesの配列を入れる 平成7年用
	];
		polygon = map.drawPolygon({
				paths: path,
				useGeoJSON: true,
				strokeColor: '#cf0d06',
				strokeOpacity: 1,
				strokeWeight: 3,
				fillColor: '#cf0d06',
				fillOpacity: 0.6
		});
	var path2 = [
	// convert.jsonのcoordinatesの配列を入れる 平成28年用
	];
		polygon2 = map.drawPolygon({
				paths: path2,
				useGeoJSON: true,
				strokeColor: '#6c0703',
				strokeOpacity: 1,
				strokeWeight: 3,
				fillColor: '#6c0703',
				fillOpacity: 0.6
		});
	});
</script>

googleを表示させるにはAPIも必要なので取得しておいてください。取得方法はこちらからご覧になれます。

上記のように設置したらできあがりです。

⇒デモを見てみる

参考になれば幸いです。


∞Tadashi Suyama∞

gmap js 地図 gmaps
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

Similar Posts

最近の投稿

アイキャッチ
とっとりバーガーフェスタ2017(第7回)に行ってきました

去年も載せましたが今回も行ってきたので感想などを書いてみたいと思います。[⇒去年の記事はコチラ](/blog/private/2016/10/11/burgerfesta.html) 今年も行...

09 Oct 2017

アイキャッチ
ワードプレスでテーマの編集が出来ない対処方法

さて、今回はワードプレスのテーマ編集についてです。テスト用サイトでふと気がついたのですが、あれ?テーマ編集が出来なくなっている!セキュリティ上なくしたのかと思いました。現状のバージョンは4.8....

06 Oct 2017

アイキャッチ
新しくなったfotorの使い方

fotorのサイトが一新されました。HTML5で書き直されて高いパフォーマンスが期待できます。 新しくなった部分のみ記載しておりますので機能的に見たい方は[⇒以前の記事](/blog/app/...

01 Oct 2017

アイキャッチ
WordPressのプラグインReallySimpleSSLを手動で解除する方法

さて今回もトラブル系です。Let's Encryptがいろいろなサーバーに取り入れられ手軽にSSL化が出来るようになりましたが、まだ対応できていないサーバーも多いです。 ワードプレスを入れた際...

23 Sep 2017

アイキャッチ
バックドア型ウィルスにかかった時のワードプレスセキュリティ対策

今回はセキュリティについてご紹介したいと思います。ワードプレスでのセキュリティ対策って何をすれば良いの?という方も多いかと思います。相談が多かったので記事にしました。 ほんとうは怖いワードプレ...

14 Sep 2017

著者

ウェブエンジニアのSUYAMAのブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

gmap js 地図 gmaps
フッターイメージ