GoogleMapに雨雲を表示

f:id:haru-komugi:20140710214318j:plain

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>