Google Maps APIを用いてOSM、電子国土V4背景地図を表示してみた

電子国土V4の背景地図の仕様が世間一般で使われている”Sphere Mercator”方式になったことで多くのメリットがあるという趣旨の説明が国土地理院のサイトで紹介されているが、電子国土のWEB APIを用いてプログラミングをしているだけでは今イチその実感がないかもしれない．

このところOpenLayersを用いたサンプルプログラムを幾つか紹介してきたが、私自身まだOpenLayersには不慣れで試行錯誤していると言った方が実情だ．WEBマップシステムの開発に携わっている人達の多くはGoogleのWEBマップAPIに慣れ親しんでいると思われるので、今回はGoogleのWEBマップAPIを用いてOpenStreetMapと電子国土V4の背景地図を表示するプログラムを紹介しようと思う．

既にGoogleのWEBマップAPIを用いてマッシュアップしたWEBアプリを開発している人達にとっては、簡単な手続きで電子国土の基盤地図情報を表示できるようになるメリットは大きいだろう．但し電子国土の利用規約の問題があるので、Google Maps APIを用いて電子国土V4背景地図をWEB上で公開する場合には国土地理院から正式に背景地図の利用許諾を得る必要がある．
【追記：電子国土V4背景地図をWEB上で単純に公開する場合は利用許諾を受ける必要はなくなったようです】

Google Maps APIを用いたサンプルプログラム

今回はGoogle Maps APIのドキュメントに載っていたサンプルプログラム “maptype-base” [ https://google-developers.appspot.com/maps/documentation/javascript/examples/maptype-base ] を参考にさせて貰った．このサンプルプログラムは単純に各タイルの座標(X,Y) をタイル枠と共に表示するだけの簡単なものだが、Google MapsのAPIを用いてカスタムマップを表示させるにはとても参考になる．

ユーザが独自のカスタムマップを表示させる方法については、Google のドキュメント Custom Map Types に目を通しておくと良いだろう．

OpenStreetMapや電子国土V4の背景地図を表示させるには、各タイルの座標(X,Y) の値をそれぞれの背景地図のタイルが置かれているURLに変換し、画像データとして取得すれば良い．背景地図のタイルの座標の定義については『電子国土V4の背景地図のタイル形式』で紹介しているので、こちらの記事を参考にされたい．

【追記(7/20 2015)：この記事で紹介した電子国土V4形式のマップタイルのURLは廃止されてしまったようですので、新しい地理院地図のURL形式に変更してあります．】

  
	
	
	
	




	
map div

おまけ：Yahoo Japan Map で電子国土V4背景地図を表示させるには

Google Mapsで簡単に電子国土V4背景地図を表示できることを紹介したが、同じようにYahoo Japan Mapでも表示させることが可能だ．

Yahoo! JavaScriptマップAPIの リファレンスページを眺めると、”Layer” クラスの中に “ImageTileLayer” というクラスがあり、そのメソッドどして “getImageSrc()” というメソッドがある．

getImageSrc(x, y, z)　:　タイル1枚分の画像URLを返す

このメソッドは文字通り該当するタイルのX,Y座標とズームレベルに応じたYahoo Japan Mapの地図タイル画像のURLを返すものだが、このメソッドオーバライドして、Yahoo Japan Mapではなく電子国土V4の背景地図のURLを返すようにすれば良い．
サンプルコードにするとこんな感じだろうか．

    var  CJ4BaseMapLayer = new Y.ImageTileLayer();　// <=== "ImageTileLayer" オブジェクトを生成

    CJ4BaseMapLayer.getImageSrc = function( x, y, z ) {

       var tileImageURL = ... （電子国土V4の背景地図タイルのURLを生成する）

       return tileImageURL;
    }

【追記：新しい国土地理院のWEBマップタイルの仕様】

2013年10月30日から国土地理院から提供されるWEBマップタイルの仕様が新しくなり、タイルのURLスキームがシンプル化された．ここで紹介したタイルのURLスキームも引き続き使用できるということのようだ．詳細は 『 ヘルプ > 地理院タイルを用いた開発』をご覧いただきたい．

地理院地図の新しい標準マップ "Standard 2013" のPNG形式のタイル画像の背景が透過に変更されたため、このタイルをそのまま表示すると背景と重なって醜く表示されてしまうので、ベースマップとして使う場合は背景を強制的に白バックにするなどの追加作業が必要．

国土地理院にこの背景が透過になっている件を問い合わせたところ、背景が透明になっているのは『仕様』との回答だった．ズームレベル15〜17の地図だけ背景が透過というのも困りものだ．従来と同じ白バックの背景処理と透過の両方を用意しておくべきだろう．

少し問題のある『地理院地図』だが、今回のURLの仕様変更により下記に示すようにURLの構造をとても簡単に記述することができるようになったのは大きな前進だろう．これまで自前のタイルURL変換プロキシーサーバを立てなければ難しかった既存のGISアプリケーションへの組み込むような作業がとても簡単になる．

参考までに "myTracks" というGPSログ編集アプリで『地理院地図』を表示できるようにした例を　『“myTracks”（Mac版）で地理院地図を表示させる方法』に示す．

	// Chiriin Map Standard 2013
	function CJ4BaseMapType() {

		CJ4BaseMapType.prototype.tileSize = new google.maps.Size(256,256);
		CJ4BaseMapType.prototype.minZoom = 2;
		CJ4BaseMapType.prototype.maxZoom = 17;
		CJ4BaseMapType.prototype.name = 'GSI Std 2013';
		CJ4BaseMapType.prototype.alt = 'Chiriin Map Standard 2013';

		CJ4BaseMapType.prototype.getTile = function( tileXY, zoom, ownerDocument ) {
			var tileImage = ownerDocument.createElement('img');

			var url= "http://cyberjapandata.gsi.go.jp/xyz/std/" 
				   + zoom.toString() + "/" 
                                   + tileXY.x.toString() + "/" 
                                   + tileXY.y.toString() + ".png";

			tileImage.src = url;
			tileImage.style.width  = this.tileSize.width  + 'px';
			tileImage.style.height = this.tileSize.height + 'px';

			return tileImage;
		};
	}