マルティスープ
Staff Blog

2017.09.10

Googleマップに天気画像を重ねて表示してみる

みなさん、こんにちは。

今回は Googleマップ上に、「OpenWeatherMap」という天気情報サービスで公開している降水量、温度などのタイル画像を重ねて表示する方法を解説します。

OpenWeatherMapのサイトはコチラ

この天気情報は、タイル画像として配信されていますので、以前、国土地理院や OpenStreeMap で提供している地図タイル画像を表示する方法と同じようにできます。前回と異なる点は、ベース地図自体を変更するのではなく、ベース地図は Google マップのままで、その上にタイル画像を重ねて表示するという点ですね。

Google Maps で OpenStreetMap を表示する！

Googleマップで過去の航空写真を見る

表示する天気情報

※{z}=ズーム値、{x}=経度方法のタイル番号、{y}=緯度方向のタイル番号

※お客さま自身で利用する場合は、上記サイトでユーザ登録を行い、APIキーを取得する必要があります。

Googleマップを生成します。

var map = new google.maps.Map(document.getElementById("map"), {
	zoom : 10,
	center: new google.maps.LatLng(35.5555, 139.555555),
	mayTypeId: google.maps.MapTypeId.ROADMAP
});

「google.maps.ImageMapType」を使用して、オーバレイを生成します。

var weatherMapType = new google.maps.ImageMapType({
	getTileUrl: function(coord, zoom) {
		return "https://tile.openweathermap.org/map/clouds_new/" + 
			zoom + "/" + coord.x + "/" + coord.y + ".png?appid=xxxxxxxx";
	},
	tileSize: new google.maps.Size(256, 256),
	maxZoom: 9,  //表示する最大のズーム値
	minZoom: 0,  //表示する最小のズーム値
	name: 'clouds_new'
});

googleマップに、先程作成した「ImageMapType」を追加します。

map.overlayMapTypes.insertAt(0, weatherMapType);

追加した「ImageMapType」をクリアする方法です。

map.overlayMapTypes.clear();

サンプルのデモサイトです。右上のメニューより、表示したいデータをクリックすると、Google マップ上に重ねて表示します。

Full Screen

OpenWeatherMap には他にも多くのAPIが有るようです。（例：指定した緯度経度の天気情報をJSONで取得など）こちらについては、また次の機会に紹介したいと思います。

なお、OpenWeatherMap で公開されている天気情報がどこまで正しいのか、私には判断できかねますので、ご利用する際は自己責任でお願いします。

もし、もっと正しい天気情報が欲しい！という方には、株式会社ハレックスさんが公開している Halex Dream という天気情報サービスがあります。弊社でも取扱しておりますので、もしご興味がある方はお問い合わせください。私も利用したことがありますが、かなり正確な情報を取得することができます！

地図タイル画像について

今回は既に公開されている地図タイル画像をGoogle マップ上に重ねてみましたが、タイル画像は、一般に公開されているものだけではなく、自分達で作成することも可能です！

弊社でも、お客さまの要望によりCADで作成した図面からタイル地図を作成することがよく有ります。屋内や土木の現場などでは、どうしても地図情報が不足していますので、そのような時にご利用頂いています。

もっと詳しく聞きたい場合は、以下の問い合わせフォームよりご質問ください。

バイ！