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

サイト内検索

最近の投稿

アイキャッチ
ワードプレスでのカテゴリごとのページング方法

ワードプレスの投稿ページはカテゴリー関係なくページングされてしまいます。投稿順で表示されるのですが、これを同一カテゴリー内だけでページング、ページ送りをする方法をご紹介します。 お知らせ、ブロ...

09 Dec 2017

アイキャッチ
小学一年生のためのひらがなカタカナ神経衰弱

私の娘は遊ぶことが大好きです。でいつも何して遊ぶが口癖になっているほど遊びが大好き、当然勉強は嫌い。。。それでゲーム感覚で勉強が出来る方法がないかと思案したわけですが、カードゲームが好きなのでカ...

02 Dec 2017

アイキャッチ
グーグルマップのdirections APIを使ってバス貸切料金算出方法

グーグルマップのdirections apiは距離と時間を調べるときに役立ちます。複数の経由地も入れることが可能で[コチラ](https://developers.google.com/maps...

25 Nov 2017

アイキャッチ
日本語のwebフォントを作成する方法

Webフォントを使うといえば[Google Fonts](https://fonts.google.com/)を使って利用している人が多いかもしれません。 そのほか、アドビ社の[Typekit]...

18 Nov 2017

アイキャッチ
chromeのデフォルト機能でキャッシュ削除する方法

つい先日、クロームのcache killerというエクステンションが使えなくなりました。。。常にキャッシュを削除してくれるので良かったのですが、代わりの物を探していたらデフォルトでキャッシュを削...

11 Nov 2017

著者

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

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

タグクラウド

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