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

 

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

バイ!

 

 

地図や位置情報を用いたシステムのご提案・開発ならマルティスープへ

マルティスープは、創業以来のGISとモバイル開発の実績と技術力で、営業支援システムやリサーチ・公共インフラ・工事・警備業界の現場を支援するシステム開発など、地図や位置情報を使った業務システムの導入のご提案や開発をいたします。

現場をつなぐコミュニケーションが屋内外業務のパフォーマンスを最大限に。マルティスープのiField(アイ・フィールド)®シリーズは、屋内外業務の現場の実力を減少させるコミュニケーション障壁を除き、使い慣れたスマートデバイスを使って 現場の実力をリアルに伝えるサービス。

位置・空間情報のエキスパート集団として一緒に働きませんか?

マルティスープは地図情報をはじめとする位置・空間情報技術のエキスパート集団です。当社で日々研究している地図や位置情報といった技術は、災害支援など貢献度の高いシステムとして使用されることもあれば、スマートフォンアプリのゲームとして使われることもあり、その利用用途・価値は、今後もますます広がっていっています。
私たちの企業理念は、「創る喜び、使う喜び」です。
今後の開発体制をより強化するために、新卒・中途問わず、当社の未来を共に創っていただける新メンバーを募集します!

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

2018.01.14

Googleマップに表示されるお店のアイコンを消したい

みなさん、こんにちは。

Googleマップ上には色々なお店のアイコンがありますが、用途によってはいらないな~と思うことはありませんか?

続きを読む

2019.05.19

Maps JavaScript API の新機能・表示範囲制限

みなさん、こんにちは。

5月14日頃、Maps JavaScript API はのバージョンが「3.36」に更新されました。今回は、3.36で・・・

続きを読む

2018.03.31

Googleマップに地域メッシュを描画する

みなさん、こんにちは。

今回は、地域メッシュを Google マップ上に描画してみたいと思います。

地域メッシュは、Wik・・・

続きを読む

 - GIS, Google Maps JavaScript API