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

最近の投稿

アイキャッチ
画面共有中だけ通知を一時的にオフ機能のMac用アプリMuzzle

本日はアプリのご紹介、画面を共有しているときやビデオ通話などをしているときに通知を一時的にオフにするアプリのご紹介です。 プレゼンの発表中などスクリーン共有やビデオ通話などの際に役立ちます。S...

13 Aug 2017

アイキャッチ
お盆休みのお知らせ

毎日の残暑、暑いですね。暑中お見舞い申し上げます。 平素より、大変お世話になっております。 さて、弊社では下記の予定で夏期休暇を実施させていただきますので、ご了承のほどよろしくお願い申し上げ...

10 Aug 2017

アイキャッチ
マルチOSのコマンドライン型ランチャーアプリzazu

Macには圧倒的な使いやすさのalfredがあるのですがそのようなランチャーがWindows環境でないか探してみたところありましたのでご紹介します。ただalfredにはまだ遠く及ばない気がします...

05 Aug 2017

アイキャッチ
MacでWinSCPを使う方法

Wine(ワイン)とは macOS上でWindowsソフトを動かすためのプログラムです。今年初めに2.0にアップデートされたようです。[Wine 2.0が公開](http://forest.wa...

30 Jul 2017

アイキャッチ
とっても簡単なReally Simple CSV Importerの使い方

エクセルやCSVデータでブログ記事を保存していたりする場合にこのプラグインがとても便利です。 大量にデータがあるときに1件1件ちまちま入れていくのはとても大変です。そこでこのプラグインで一括で...

22 Jul 2017

著者

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

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

タグクラウド

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