ローカルサーチを利用する関数の作成
ローカルサーチを使って、与えられた座標情報周辺の店舗情報を取得し、地図上に表示する関数を作成します。JavaScriptマップAPIにはローカルサーチ用のクラスY.LocalSearchが用意されていますので、それを使用します。
//ローカルサーチ
var local_search=function(keyword,lat,lon){
var local = new Y.LocalSearch();
var cid = "d8a23e9e64a4c817227ab09858bc1330"; //カセットID
var options = {"dist":"1","results":10,"lat":lat,"lon":lon};
local.search(keyword, cid, options,
function(result){
map.clearFeatures();
my_marker = new Y.Marker(new Y.LatLng(now_latitude,now_longitude), {icon: icon});
map.addFeature(my_marker);
//マーカーを立てる。
for(var i=0; i < result.features.length; i++){
result.features[i].bind("click",function(){root_search(this.getLatLng())} );
map.addFeature(result.features[i]);
}
});
}
cidでは、検索対象のデータ（以下、カセット）のIDを指定しています。今回は電話帳カセットを使用します。YOLPには他にもさまざまなカセットがあり、YOLPカセットギャラリーで利用可能なものが公開されておりますので、ぜひご覧ください。
また、optionsの指定によって指定された位置から1km圏内の10件以内を結果として取得しています。
検索結果の表示はマーカーで行い、その作成の際に先ほど作成したroot_search関数をbindメソッドでクリックイベントとして登録しておきます。これでマーカーをクリックすると、そこまでの経路を表示してくれるようになります。
地図の状態を変更する関数の作成
現在時刻や現在地の高度に応じて地図を変更する関数を作成します。この関数は、高度の確認・現在時刻の確認をそれぞれ順に行い、変化があった場合のみ再描画を行います。また、変更時には、現在の地図の状態に関する情報を表示します。
//地図のstyle変更関数
var change_style=function(hour){
var style_name=state;
//時刻による地図のスタイルの指定
if((hour < 4) || (hour >= 20)){
style_name = "midnight"; //ミッドナイトに変更
}else if((hour >=16) && (hour < 20)){
style_name = "orange"; //オレンジに変更
}else if((hour >= 4) && (hour < 10)){
style_name = "blue"; //ブルーに変更
}else{
style_name = "bold"; //ボールドに変更
}
//地形図の判定
if(altitude_API>500){
style_name = "topographic";
}
//GPSの高度情報から地図を切り替え(航空写真の判定)
if((altitude_GPS-altitude_API) > 20 ){
style_name = "photo";
}
// 地図の変更
if (state !== style_name) {
if (state === "photo") {
map.setConfigure("hybridPhoto",false);
stylemaplayer.base = style_name;
map.setLayerSet("stylemap");
} else if (style_name === "photo") {
map.setConfigure("hybridPhoto",true);
map.setLayerSet(Y.LayerSetId.PHOTO);
} else {
stylemaplayer.base = style_name;
stylemaplayer.redraw();
}
state = style_name;
}
// 表示の変更
var display_name = "";
switch (style_name) {
case "blue":
display_name = "ブルー";
break;
case "bold":
display_name = "ボールド";
break;
case "orange":
display_name = "オレンジ";
break;
case "midnight":
display_name = "ミッドナイト";
break;
case "topographic":
display_name = "地形図";
break;
case "photo":
display_name = "航空写真";
break;
break;
}
document.getElementById("map_kind").innerHTML="現在の地図 : " + display_name;
}
まず、時刻に応じて地図のスタイルを変更しています。今回は朝・昼・夕方・夜のそれぞれに対して、ブルー・ボールド・オレンジ・ミッドナイトを使用してみました。YOLPではこの他にも鉄道路線図や行政色分け図など、さまざまな地図のスタイルを用意しています。スタイルの種類についてはこちらを参照してください。次に、グローバル変数に保存されている標高APIから取得した高度altitude_APIに応じて、地形図に変更します。続いて、altitude_APIとグルーバル変数に保存されているGPSから取得した高度altitude_GPSの値を比較して、航空写真に変更します。最後に、決定した地図の状態に変更し、その状態を表す情報を更新しています。
気象情報の取得と雨雲レーダーの追加
気象情報APIを利用して指定した位置の降水強度予測値を取得し、雨雲レーダーレイヤーを地図に表示する関数を作成します。この関数は、降水強度予測値の取得が成功したタイミングで雨雲レーダーレイヤーを表示します。また雨雲レーダーレイヤーの有無に関する表示を変更します。
//気象情報
var getWeather=function(lat,lon) {
var url = "http://weather.olp.yahooapis.jp/v1/place";
var coordinates = lon + "," + lat;
var param = {
appid : APPID,
output : "json",
coordinates : coordinates
};
$.ajax({
"url" : url,
"data" : param,
"dataType" : "jsonp",
"success" : function(result){
weather_result=result.Feature[0];
//雨雲レーダーの追加
if(weather_result){
var rainy = false;
for (var i = 0; i < 7; i ++) {
if(weather_result.Property.WeatherList.Weather[i].Rainfall > 0.1){
rainy = true;
break;
}
}
map.setConfigure('weatherOverlay', rainy);
document.getElementById("weather").innerHTML = ((rainy) ? "雨雲レーダー情報 : あり" : "雨雲レーダー情報 : なし");
}
}
});
}
この関数では、与えられた時刻から1時間以内に指定した場所に0.1mm以上の雨が降る場合に雨雲レーダーレイヤーを表示し、それ以外の場合では非表示にしています。
