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

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

現在地を取得して、中心位置に設定

　次に「雨フル？タッチ」にアクセスしたときに現在地を中心位置に設定します。

　GeolocationAPIを使って現在地を取得し、その値を設定します。現在地の取得に成功した場合、現在地の地図を表示します。

Geolocation API を使って現在地を取得して移動

function setNowPoint() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(pos) {
            pos = new Y.LatLng(pos.coords.latitude, pos.coords.longitude);
            map.panTo(pos);
            clickMap(pos);
            latlng = pos;
        }, null, {
            enableHighAccuracy: true, timeout: 3000, maximumAge: 0
        });
    }
}

　Geolocation APIの詳しい仕様についてはhttp://www.w3.org/TR/geolocation-API/を参考にしてください。

タップイベントの設定

　次に地図をタップしたときの処理を設定します。地図をタップした時にclickMap関数が呼び出されるように、clickイベントを設定しておきます。

地図をタップした時に clickMap() を呼びだす

map.bind('click', clickMap);

　clickMap関数の内容は以下のとおりです。

タップイベント設定

function clickMap(pos) {
    latlng = pos;
    // 雨雲レーダーレイヤーを更新
    setTimeShift(0);
    // アイコン表示
    map.clearFeatures();
    var marker = new Y.Marker(latlng);
    map.addFeature(marker);
    // 住所を検索
    searchAddress();
}

　タップした地点の緯度経度を取得し、以下の処理を行います

• 降水強度予測値を取得、サブウィンドウに表示
• マーカーを作成して表示
• タップした住所を検索

雨雲レーダーレイヤーの更新

　ここで、サブウィンドウの凡例の操作と、雨雲レーダーレイヤーの更新を行います。updateWeather()が実行されて更新した時に、雨雲レーダーレイヤーを追加するときに設定したコールバック関数getWeatherData()が実行されるようになっています。

タイムシフト値を設定

function setTimeShift(time){
    var wArea = $('.warea').get();
    for (var i = 0; i < 7; i ++) {
        var wData = $('.wdata', $(wArea[i]));
        if (i * 10 == time) {
            wData.css({
                'margin-top':'2px',
                'border-color': '#ff0000'
            });
        } else {
            wData.css({
                'margin-top':'0px',
                'border-color': '#ffffff'
            });
        }
    }
    // タイムシフト値が0の場合のみ自動更新する
    if (time === 0) {
        weather.startAutoUpdate();
    } else {
        weather.stopAutoUpdate();
    }
    weather.setTimeShift(time * 60000);
    weather.updateWeather();
}

降水強度予測値の取得

　気象情報APIを使ってタップした場所の降水強度予測値を取得します。雨雲レーダーレイヤーの時刻、タップした地点の緯度経度をAPIの引数として渡しています。取得に成功した場合はdispWether()を呼びだして結果を表示するようにします。

　ここでも<あなたのアプリケーションID>の部分は、ご自身で取得されたアプリケーションIDに書き換えてください。

気象情報APIを使って降水強度予測値を取得

function getWeatherData() {
    // タイムシフト値が0の場合のみ取得する
    if (weather.getTimeShift() !== 0) {
        return;
    }
    var url = "http://weather.olp.yahooapis.jp/v1/place";
    var time = weather.getNowDate();
    var coordinates = latlng.Lon + "," + latlng.Lat;
    var param = {
        appid       : <あなたのアプリケーションID>,
        output      : "json",
        date        : time,
        coordinates : coordinates
    };
    $.ajax({
        "url"       : url,
        "data"      : param,
        "dataType"  : "jsonp",
        "success"   : function(result){
                          var ydf = new Y.YDF(result); 
                          dispWether(result);
                      },
        "error"     : function(){
                      }
    });
}