MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2017.09.10

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

weathermap

みなさん、こんにちは。

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

 

OpenWeatherMapのサイトはコチラ

 

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

 

Google Maps で OpenStreetMap を表示する!

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

 

 

 

表示する天気情報

名称タイル画像の取得URL
降水量https://tile.openweathermap.org/map/precipitation_new/{z}/{x}/{y}.png
https://tile.openweathermap.org/map/clouds_new/{z}/{x}/{y}.png
温度https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png
風速https://tile.openweathermap.org/map/wind_new/{z}/{x}/{y}.png
海面の圧力https://tile.openweathermap.org/map/pressure_new/{z}/{x}/{y}.png

※{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で作成した図面からタイル地図を作成することがよく有ります。屋内や土木の現場などでは、どうしても地図情報が不足していますので、そのような時にご利用頂いています。

 

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

バイ!

 

 

【関連記事】こんな記事も読まれています

2017.03.05

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

みなさん、こんにちは。

今回は、Google Maps に KMLファイルをロードしてマーカー、ライン、ポリゴンを表示する方法を紹介します。<・・・

続きを読む

2017.01.16

東京の花粉量をヒートマップで可視化する

みなさん、こんにちは!

Google Maps JavaScript API のライブラリには、データ可視化ライブラリ(visualiza・・・

続きを読む

2017.08.20

Google Static Maps API の使い方

みなさん、こんにちは!

今回は、今まで紹介していなかった「Google Static Maps API」の使い方を紹介いたします。

続きを読む

 - GIS, Google Maps JavaScript API

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

(※)は入力必須項目です。

当社では、お客様がお問い合わせの際に必要な個人情報または、 お問い合わせ内容等につきましては、
お問い合わせの回答の目的のみに利用します。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)