GoogleMapに雨雲を表示
GoogleMapに雨雲を表示します。
サンプルはこちら
http://moeten.info/js/20140710_cloudMap/rainmap.html
ポイントとなるのは、GoogleMapにズームや移動に対応したオーバーレイを表示する場合は、xy何番目のタイルかと、ズーム値に対応した画像(縦横256ピクセル)が必要になります。
GoogleMapはドラッグやズームを行うと、その都度、オーバーレイの画像のリクエストを発行します。
ソースコードはこちら
index.html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=GOOGLE _MAP_API_KEY&sensor=false"></script> <script type="text/javascript"> //初期化関数 function init(){ //マップオプション var mapOptions = { center: new google.maps.LatLng( 37.4958709,139.9271118 ), zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP }; //マップの描画 map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); //雨雲リクエスト日付の作成 var now = new Date(); var year = now.getFullYear(); var month = now.getMonth() + 1; var day = now.getDate(); var hours = now.getHours(); var minutes = now.getMinutes(); if (month < 10) month = '0' + month; if (day < 10) day = '0' + day; if (hours < 10) hours = '0' + hours; minutes *= 0.1; minutes = Math.floor(minutes); minutes *= 10; if (minutes < 10) minutes = '0' + minutes; //雨雲リクエストのオプション設定 var radarLayerOpts = { getTileUrl: function(coord, zoom) { //位置とズームを微調整 var shift = zoom - 1; var x =coord.x; var y = Math.pow(2, shift) - 1 - coord.y; var z = zoom + 1; //雨雲画像 var url = 'http://weather.map.c.yimg.jp/weather?x='+x+'&y='+y+'&z='+z +'&size=256&date=' + year + month + day + hours + minutes //console.log(url); return url; }, tileSize: new google.maps.Size(256, 256), opacity: 0.5, minZoom: 1, maxZoom: 18, isPng: true }; //雨雲画像をオーバーレイとしてマップに追加 var radarLayer = new google.maps.ImageMapType(radarLayerOpts); map.overlayMapTypes.insertAt(0, radarLayer); } </script> <style type="text/css"> html { height: 100%; } body { height: 100%; margin: 0; padding: 0; } #map_canvas{ width: 100%; height: 100%; } </style> </head> <body onload="init()"> <div id="map_canvas"></div> </body> </html>
参考リンク
Google地図上にYahoo雨雲を乗せる - jsdo.it - Share JavaScript, HTML5 and CSS
日本アメッシュ
- 作者: 勝又雅史,株式会社ゴーガ
- 出版社/メーカー: アスキー・メディアワークス
- 発売日: 2012/12/01
- メディア: 大型本
- 購入: 1人 クリック: 1回
- この商品を含むブログ (9件) を見る