標高の取得と地図の状態の変更
標高APIを利用して指定した位置の標高を取得し、その値を利用して地図の状態を変更する関数を作成します。この関数は標高の取得が成功したタイミングで地図の状態を変更し、グローバル変数altitude_APIにその値を保存して、標高情報を表示します。地図の状態を変更する際には先ほど作成したchange_style関数を利用します。
//標高情報
var getAltitude=function(lat,lon,hour) {
// タイムシフト値が0の場合のみ取得する
var url = "http://alt.search.olp.yahooapis.jp/OpenLocalPlatform/V1/getAltitude";
var coordinates = lon + "," + lat;
var param = {
appid : APPID,
output : "json",
coordinates : coordinates
};
$.ajax({
"url" : url,
"data" : param,
"dataType" : "jsonp",
"success" : function(result){
var feature = result.Feature[0];
if ((result.ResultInfo.Count > 0)) {
altitude_API=feature.Property.Altitude;
document.getElementById("altitude").innerHTML="標高 : "+altitude_API+"m"; //標高の表示
}
change_style(hour);
}
});
}
中心位置変更時に地図の状態を変更する関数の作成
「今っぷ！」では現在地や現在時刻だけでなく、中心位置によっても地図の状態を変更したいので、そのための関数を作成します。この関数では現在時刻と地図の中心座標を取得し、これまでに作成したreversGeo,getWeather,getAltitude,local_searchの4つの関数を利用して地図の状態を変更します。
//地図の状態を変更
var change_center= function(move){
var latitude =now_latitude;
var longitude =now_longitude;
if(move){
latitude =map.getCenter().lat();
longitude = map.getCenter().lng();
//地図がmoveで移動したときのみGPSの高度情報を初期化
if(now_latitude!=latitude || longitude!=now_longitude){
altitude_GPS=0;
}
}
//時刻の取得
var now_totaldate = new Date();
var hour = String(now_totaldate.getHours());
var min = String(now_totaldate.getMinutes());
document.getElementById("time").innerHTML="更新時刻 : "+hour+"時"+min+"分"; //時間の表示
//地図の更新
reverseGeo(latitude,longitude);
getWeather(latitude,longitude);
getAltitude(latitude,longitude,hour);
//時刻によるローカルサーチ;
if(((hour >= 11) && (hour < 13)) || ((hour >= 18) && (hour < 21))){
eat_time=true;
if(!RouteSearchlayer){
local_search("飲食店",latitude,longitude);
}else{
map.addLayer(RouteSearchlayer);
}
}
else if(eat_time){
eat_time=false;
map.clearFeatures();
my_marker = new Y.Marker(new Y.LatLng(now_latitude,now_longitude), {icon: icon});
map.addFeature(my_marker);
}
}
地図が手動で動かされたときのみ地図の中心座標を取得しており、それ以外では現在地が中心座標です。今回はローカルサーチを使って「飲食店」というキーワードでの検索を行い、店舗情報を取得しています。また、その検索タイミングは食事時にあたる11時～13時、18時～21時としました。
地図の中心位置が変更になった際に、この関数が呼び出されるようにmapのmoveendイベントに登録しておきます。具体的には、window.onload内のdrawMapの前にbindメソッドを利用してmapに登録します。
map.bind("moveend", function(){change_center(true);});
GPS情報の取得と地図の状態の変更
GeolocationAPIを使って現在地を取得し、その情報に基づいて地図の状態を変更する関数を作成します。この関数は、GPS情報の取得が成功したタイミングでpanToメソッドを用いてその位置に地図の中心を移動し、現在地を示すアイコンの表示位置を変更します。地図の状態変更は、panToメソッドが呼ばれた際に発生するmoveendイベントを通して先ほど作成したchange_centerを呼び出して行っています。また、取得時間は5秒でタイムアウトするように設定しました。
//GPS情報の取得
var get_GPS = function(){
navigator.geolocation.getCurrentPosition(
function(result){
//現在地情報の更新
latitude=result.coords.latitude;
longitude=result.coords.longitude;
now_latitude=result.coords.latitude;
now_longitude=result.coords.longitude;
if(result.coords.altitude){
altitude_GPS=result.coords.altitude;
}
//地図と現在地の更新
map.panTo(new Y.LatLng(now_latitude,now_longitude),false);
map.removeFeature(my_marker);
my_marker = new Y.Marker(new Y.LatLng(now_latitude,now_longitude), {icon: icon});
map.addFeature(my_marker);
},
function(){},
{enableHighAccuracy: true,timeout: 5000});
}
GPS情報の取得は、プログラムにアクセスしたタイミングで行いたいので、window.onload内の一番下に追加します。また、5分ごとに地図の状態を自動更新するように設定を追加します。
get_GPS(); //現在地の取得
setInterval(change_center, 1000*60*5); //時間による地図の再描画
表示サイズの変更時に地図のサイズも更新する
端末を回転させた時やウィンドウの最大化を行ったときなどに、画面の大きさに合わせて地図のサイズを更新するように、windowのonresizeイベントにupdateSizeメソッドを設定しておきます。
//回転が起こった際の再描画
window.onresize = function() {
map.updateSize();
}
各種ボタンへの関数登録
すべての関数の作成が完了したので、ページレイアウトの作成時に作成した現在地更新ボタンとルートの削除ボタンに関数を登録します。
<input type="button" value="現在地更新" onclick="get_GPS()">
<input type="button" value="ルートの削除" onclick="remove_root()">
おわりに
いかがでしたでしょうか。今回はYahoo! JavaScriptマップAPIの各種機能と気象情報API・標高APIを使って、状況に応じて自動的に地図の状態を変化させるWebアプリ「今っぷ！」を作ってみました。より詳細な条件分けやYOLPの提供するその他のAPIを利用することによって、さらにさまざまな条件にあわせて自動的に変化する地図を開発することも可能です。
また、Yahoo! iOSマップSDKとYahoo! AndroidマップSDKを利用いただければ、同様のサービスをネイティブアプリとして開発することもできます。
今回の記事を参考にしていただきつつ、YOLPの提供するAPI/SDKを活用して、面白くて便利なアプリ・サービスを開発いただけますと幸いです。
