地図をタッチして雨の強さをチェック！
YOLPで作る簡単便利地図アプリ

スマホアプリ開発の最新トレンド！ ぜったい外せない位置情報活用術（7）

タップしたポイントの住所を検索して表示

　先程取得した座標を基にその地点の住所を検索し、サブウィンドウに表示します。

住所を検索

function searchAddress(){
    var request = {"latlng": latlng};
    var geocoder = new Y.GeoCoder();
    geocoder.execute(request, function(ydf) {
        if (ydf.features.length >= 1) {
            var feature = ydf.features[0];
            if (feature.property.AddressElement) {
                var saddress = feature.property.Address;
                $('#rainfall').html(saddress + ' の降水強度予測値(mm/h)<br><br>');
            }
        }
    });
}

取得した降水強度予測値の表示

　取得した降水強度予測値をサブウィンドウに表示します。あらかじめ作成しておいたサブウィンドウに10分毎の降水強度予測値（数値mm/h）を表示します。降水強度予測値に合わせて、色分けも行います。

降水強度予測値を表示

function dispWether(data) {
    var feature = data.Feature[0];
    if (data.ResultInfo.Count > 0) {
        //リスト作成
        var aryRainfall = new Array(7);
        for (var i = 0; i < 7; i ++) {
            aryRainfall[i] = feature.Property.WeatherList.Weather[i].Rainfall;
        }
        var wArea = $('.warea').get();
        var date = weather.getNowDate();
        date = date.substring(8, 12);
        for (var i = 0; i < 7; i ++) {
            var wData = $('.wdata', $(wArea[i]));
            if (aryRainfall[i] <= 0.0 ){
                wData.css({
                    'background-color': 'white'
                });
            } else if (aryRainfall[i] > 0.0 && aryRainfall[i] < 1.0) {
                wData.css({
                    'background-color': '#CCFFFF'
                });
            } else if (aryRainfall[i] >= 1.0 && aryRainfall[i] < 2.0) {
                wData.css({
                    'background-color': '#66FFFF'
                });
            } else if (aryRainfall[i] >= 2.0 && aryRainfall[i] < 4.0) {
                wData.css({
                    'background-color': '#00CCFF'
                });
            } else if (aryRainfall[i] >= 4.0 && aryRainfall[i] < 8.0) {
                wData.css({
                    'background-color': '#0099FF'
                });
            } else if (aryRainfall[i] >= 8.0 && aryRainfall[i] < 12.0) {
                wData.css({
                    'background-color': '#3366FF'
                });
            } else if (aryRainfall[i] >= 12.0 && aryRainfall[i] < 16.0) {
                wData.css({
                    'background-color': '#33FF00'
                });
            } else if (aryRainfall[i] >= 16.0 && aryRainfall[i] < 24.0) {
                wData.css({
                    'background-color': '#33CC00'
                    });
            } else if (aryRainfall[i] >= 24.0 && aryRainfall[i] < 32.0) {
                wData.css({
                    'background-color': '#199900'
                });
            } else if (aryRainfall[i] >= 32.0 && aryRainfall[i] < 40.0) {
                wData.css({
                    'background-color': '#FFFF00'
                    });
            } else if (aryRainfall[i] >= 40.0 && aryRainfall[i] < 48.0) {
                wData.css({
                    'background-color': '#FFCC00'
                });
            } else if (aryRainfall[i] >= 48.0 && aryRainfall[i] < 56.0) {
                wData.css({
                    'background-color': '#FF9900'
                });
            } else if (aryRainfall[i] >= 56.0 && aryRainfall[i] < 64.0) {
                wData.css({
                    'background-color': '#FF0000'
                });
            } else if (aryRainfall[i] >= 64.0 && aryRainfall[i] < 80.0) {
                wData.css({
                    'background-color': '#B70014'
                });
            } else if (aryRainfall[i] >= 80.0) {
                wData.css({
                    'background-color': '#ff3366'
                });
            } else{
                wData.css({
                    'background-color': 'white'
                });
            }
            wData.html(aryRainfall[i]);

            var date = feature.Property.WeatherList.Weather[i].Date;
            var h = date.substring(8, 10);
            var m = date.substring(10, 12);
            var wDate = $('.wdate', $(wArea[i]));
            wDate.html(h + ":" + m);
        }
    }
}

　また、雨雲レーダーレイヤーは5分ごとに自動更新されるので、その更新に合わせて指定されている地点の降水強度予測値を再取得します。自動更新するとgetWeatherData()が呼び出され、気象情報APIにアクセスして更新を行います。

端末を回転させた時に地図のサイズも更新

　端末を回転させた時に、画面の大きさに地図を合わせるように、windowのresizeイベントにmap.updateSize()を設定しておきます。

リサイズ（回転）の時に地図更新

$(window).resize(function() {
    map.updateSize();
});

おわりに

　いかがでしたでしょうか。今回はYahoo! JavaScriptマップAPIと気象情報APIを使って、指定した場所の降水強度予測値をチェックできるWebアプリ「雨フル？タッチ」を作ってみました。気象情報APIは、この他にもさまざまなシーンでの利用が考えられると思います。

　また、Yahoo! iOSマップSDKとYahoo! AndroidマップSDKを利用いただければ同様の機能を利用して、ネイティブアプリを開発することも可能です。

　今回の記事を参考にしていただきつつ、YOLPの提供するAPI/SDKを活用して、皆さまのお役に立ちそうなアプリ・サービスを開発いただければ幸いです。