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

サイト内検索

最近の投稿

アイキャッチ
正規表現はじめの一歩

今回は正規表現です。たまにしか使わないのですぐに忘れてしまいますのでまとめておきます。 文字列の検索時にある条件にマッチしたものを表示させるものです。 エディターにも検索条件に正規表現という検...

07 Oct 2018

アイキャッチ
ワードプレス記事一括削除する方法

ワードプレスで記事を一括削除する方法が意外と簡単なことに気がつきました。記事を大量に削除する場合はあまりなかったのですが、調べてみたら簡単なことでした。 大量のデータをインポートする時に失敗し...

30 Sep 2018

アイキャッチ
メールはGmailに限る

大分間が空きました。。。さて今回はGmailをご紹介します。最近ではチャット系アプリが主流ですが、それでもやはりメールはなんだかんだで使います。いつも悩まされるのはスパムメールですが、Gmail...

25 Sep 2018

アイキャッチ
大山の大献灯・和傘灯りに行った感想

大山の大献灯・和傘灯りに初めて行って参りました。13日の夜に行ってきましたがこんなイベントをやっていることを知らなかったのでご紹介します。和傘のライトアップで日本の夏の雰囲気が良いですね。 大...

23 Aug 2018

アイキャッチ
出雲神話祭り・花火大会

お盆休み中に出雲の花火大会に行って参りました、今年は8月12日(日)でした、開催日は毎年違いますので確認しておきましょう。だいたいこのあたりだった気がします。8,000発の花火で例年13万人が来...

21 Aug 2018

著者

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

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

タグクラウド

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