マルティスープ
Staff Blog

2017.03.11

GoogleマップにGeoJSONで図形を描画する

みなさん、こんにちは！

前回、KMLファイルを使って図形を描画する方法を紹介しましたが、今回は GeoJSON ファイルを使って図形を描画する方法を紹介します！

Google マップにKMLファイルをロードする

今回紹介する GeoJSON は ジオメトリ図形を JSON形式で表現する方法です。最近の流行りである JSON 形式で表現できるので非常に使い勝手が良いですね。

Wikipedia の紹介ページはコチラ

KMLファイルの場合、ファイルをグローバルなURLに置かないといけないという課題がありましたが、GeoJSON の場合は、ローカルのURLでも利用することができます。

イントラ利用で一括で図形を描画したいときには、GeoJSON がオススメですね。

さて、早速デモ画面を見ていきましょう。「GeoJSONロード」ボタンをクリックすると、前回と同様、マーカー、ライン、ポリゴンを描画します。

GeoJSONを使って図形を描画するときのソース・プログラムです。mapオブジェクト生成後、「map.data.loadGeoJson」にて GeoJSON を読み込みます。マーカーのアイコンや、ライン、ポリゴンの色等の設定は、「map.data.setStyle」にて行います。図形をクリックしたときのイベントは、「map.data.addListner」で定義することができます。

var initMap = function();
	var map = new google.maps.Map(document.getElementById("map"), {
		zoom : 15,
		center: _new google.maps.LatLng(35.692235, 139.759864),
		mayTypeId: google.maps.MapTypeId.ROADMAP,
		scrollwheel: true,
		mapTypeControlOptions: {
		    position: google.maps.ControlPosition.BOTTOM_CENTER
		},
	});

	// InfoWindowを生成
	var infoWindow = new google.maps.InfoWindow();
	
	// GeoJson をロード
	map.data.loadGeoJson('geojson/s01.geojson');
	
	// スタイルの設定
	map.data.setStyle(function(feature) {
		if (feature.getProperty('type') === 'point') {
			// マーカーのスタイル
			return ({
				icon: {
					url:  feature.getProperty('icon'),
					scaledSize: new google.maps.Size(32, 32)
				}
			}); 
		} else if (feature.getProperty('type') === 'polyline') {
			// ポリラインのスタイル
			return ({
				strokeColor: '#0000ff',
				strokeWeight: 2,
				clickable: true,
				zIndex: 1
			});
		} else if (feature.getProperty('type') === 'polygon'){
			// ポリゴンのスタイル
			return ({
				fillColor: '#ff0000',
				fillOpacity: 0.5,
				strokeWeight: 0,
				clickable: true,
				zIndex: 1
			});
		}
	});

	// クリックイベントの定義
	map.data.addListener('click', function(event) {
		// 表示位置
		infoWindow.setPosition(event.latLng);
		// InfoWindow内のの内容
		infoWindow.setContent('<h3>' + event.feature.getProperty('name') + '</h3><br/>' + event.feature.getProperty('description'));
		// IndowWindowを表示
		infoWindow.open(_map);
	});
};

以下が今回使用した GeoJson ファイルです。
プログラム内の「feature.getProperty(“name”)」は、”poperties” 内の “name” を取得しています。

{
  "type": "FeatureCollection",
  "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
  "features": [
    { "type": "Feature", "properties": { "name": "ポイント1", "description": "テスト用ポイント１です。", "type": "point",     "icon": "https://maps.multisoup.co.jp/exsample/common/img/ms/pin_01.png"}, "geometry": { "type": "Point", "coordinates": [ 139.75986270479419, 35.694634921909767, 0.0 ] } },
    { "type": "Feature", "properties": { "name": "ポイント2", "description": "テスト用ポイント２です。", "type": "point",     "icon": "https://maps.multisoup.co.jp/exsample/common/img/ms/pin_04.png"}, "geometry": { "type": "Point", "coordinates": [ 139.7598636575899, 35.693392075631337, 0.0 ] } },
    { "type": "Feature", "properties": { "name": "ポイント3", "description": "テスト用ポイント３です。", "type": "point",     "icon": "https://maps.multisoup.co.jp/exsample/common/img/ms/pin_05.png"}, "geometry": { "type": "Point", "coordinates": [ 139.76192383685731, 35.693755104959394, 0.0 ] } },
    { "type": "Feature", "properties": { "name": "ライン",    "description": "テスト用ラインです。",     "type": "polyline",  "icon": null}, "geometry": { "type": "LineString", "coordinates": [ [ 139.76148924980581, 35.695239184799441, 0.0 ], [ 139.76276858374351, 35.694297015708813, 0.0 ], [ 139.7625057055418, 35.692912559422311, 0.0 ] ] } },
    { "type": "Feature", "properties": { "name": "ポリゴン",  "description": "テスト用ポリゴンです。",   "type": "polygon",   "icon": null}, "geometry": { "type": "Polygon", "coordinates": [ [ [ 139.75876778245129, 35.693802037023673, 0.0 ], [ 139.758970953849, 35.692875568350857, 0.0 ], [ 139.76093088230721, 35.692858331137693, 0.0 ], [ 139.76105321410731, 35.693831589073483, 0.0 ], [ 139.75876778245129, 35.693802037023673, 0.0 ] ] ] } }
  ]
}

今回使用した GeoJson はコチラ

前回紹介した KML や GeoJSON を利用するれば、簡単にマーカーやポリゴン、ポリラインを描画することができますね^^ また、KML や GeoJSON は統一規格なので、他のGISソフトでも利用できるところが利点です！

マルティスープ では、Google Maps をはじめ、様々な地図サービスを活用したソリューションを提供しています。もし、地図に関することでお悩みごとがありましたら、是非 マルティスープ までお問い合わせください！

バイ