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

サイト内検索

最近の投稿

アイキャッチ
WordPress内でFTP操作ができるプラグインFile Managerのご紹介

今回はワードプレスプラグインFile Managerのご紹介です。これはどんなプラグインかと申しますと、ダッシュボードにFTPソフトが入ったようなプラグインです。FTPソフトがなくてもワードプレ...

26 Nov 2018

アイキャッチ
WordPressでPHPの値をJavaScriptファイルへ渡す方法

今回はワードプレスの値をJavaScriptに渡す方法です。ワードプレスからじゃなくてPHPからJavaScriptへ値を渡す方法もご紹介します。 PHPの値をJavaScriptで処理を行う...

22 Nov 2018

アイキャッチ
アイキャッチ画像がない場合に記事内はじめの画像をアイキャッチにする方法とリンク先画像取得-WordPress

今回はワードプレスのアイキャッチです。記事内はじめの画像を取ってくる方法は結構出回っているので、リンク先の画像を撮ってくる方法をプラスしたやり方になります。 記事内はじめの画像を取得する方法は...

10 Nov 2018

アイキャッチ
豊富で魅力的な画像素材サイトPxBee

画像素材サイトのご紹介です。Pxbeeというfotor提供のサイトです。1枚から購入ができて金額もお手頃です。普段はアドビのアドビストックを利用していますが検索したときの画像の量が多い気がします...

06 Nov 2018

アイキャッチ
Caffeineの代替えにAmphetamine

強制的にスリープさせないようにするアプリAmphetamine【アンフェタミン】なんですが、名前の由来はアメリカでは注意欠陥・多動性障害の薬として使われており、日本では覚醒剤に指定されているよう...

25 Oct 2018

著者

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

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

タグクラウド

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