地図を表示する
まずは地図を表示します。地図の表示サイズはネイティブアプリっぽくしたいので全画面表示とし、Y.Mapのインスタンスを作成するときにweatherOverlay: trueとしておくことで、雨雲レーダーレイヤーを追加して表示できるようにします。ルート情報を表示するための小さなウィンドウも追加しておきます。
JavaScriptマップAPIを呼び出すところの<あなたのアプリケーションID>の部分はご自分で取得されたアプリケーションIDに書き換えてください。
// 地図表示
var map = new Y.Map('map', {
configure : {
scrollWheelZoom : true,
weatherOverlay: true // 雨雲レーダーON
}
});
map.drawMap(new Y.LatLng(35, 135), 15, Y.LayerSetId.NORMAL);
map.addControl(new Y.ZoomControl());
これでズームレベル15以上のときは雨雲レーダーレイヤーを表示することができます。初期表示位置は先述のとおり日本へそ公園にしています。また、iPhoneではピンチ操作で拡大・縮小ができますが、Androidでは対応していない端末もあるので、拡大・縮小を切り替えるためのコントロール（GUI）であるY.ZoomControlを追加します。
現在地を取得して、ルートの始点を設定する
次にルートの始点を設定します。ルートの始点はGeolocationAPIを使って現在地を取得し、その値を設定します。現在地の取得に成功した場合、現在地の地図を表示します。
// 始点は Geolocation API を使って現在地を取得
var start = new Y.LatLng(35, 135); // 始点
var end; // 終点
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(pos) {
start = new Y.LatLng(pos.coords.latitude, pos.coords.longitude);
map.panTo(start);
}, null, {
enableHighAccuracy: true, timeout: 3000, maximumAge: 0
});
}
Geolocation APIの詳しい仕様についてはhttp://www.w3.org/TR/geolocation-API/などを参考にしてください。
ルートの終点を設定する
次にルートの終点を設定します。ルートの終点は、地図上をタップして設定できるようにします。終点を設定した場合に、現在地を再度取得してcreateRoute()を呼び出してルートを表示するようにします。
// 終点は地図をタップして設定
map.bind('click', function(pos) {
end = pos;
// 現在地を取得
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(pos) {
start = new Y.LatLng(pos.coords.latitude, pos.coords.longitude);
createRoute(start, end);
}, function() {
// 取れなかった場合
createRoute(start, end);
}, {
enableHighAccuracy: true, timeout: 3000, maximumAge: 0
});
}
});
ルートを表示するためのレイヤーを設定する
JavaScriptマップAPIにはルートを検索して表示するためのレイヤー（Y.RouteSearchLayer）が用意されていますので、それを使ってルートを表示します。ルートを表示したあと、dispRouteInfoメソッドを呼び出してルート情報を小さなウィンドウに表示します。
// ルートを表示するためのレイヤーを設定する
var routeSearchLayer = new Y.RouteSearchLayer();
routeSearchLayer.bind('drawend', function(result) {
dispRouteInfo(result);
});
map.addLayer(routeSearchLayer);
ルートを表示する
先程準備したY.RouteSearchLayerに始点と終点を渡してルートを表示します。
// ルートを表示する
var createRoute = function(s, e) {
if (s && e) {
routeSearchLayer.clearRoute();
var config = {
enableRestrict: true, // 交通規制を考慮する
useCar: true, // 自動車を使う
useFerry: true // フェリーを使用する
};
routeSearchLayer.execute([s, e], config);
}
}
ルート情報を表示する
ルート情報の表示部分を実装します。ルート検索結果のresult から総距離と総時間を取得します。総距離（単位はm）はTotalDistance、総時間（単位は分）はTotalTime に格納されています。
// ルート情報を表示する
var dispRouteInfo = function(result) {
$('#summary').html('総距離' + result.TotalDistance + 'm, 総時間' + result.TotalTime + '分');
// 始点と終点の住所を取得して表示
var geocoder = new Y.GeoCoder();
geocoder.execute({latlng: start}, function(r) {
$('#cur').html('現在地 : ' + r.features[0].property.Address);
});
geocoder.execute({latlng: end}, function(r) {
$('#dst').html('目的地 : ' + r.features[0].property.Address);
});
}
端末を回転させた時に地図のサイズも更新する
端末を回転させた時に、画面の大きさに地図を合わせるように、windowのresizeイベントにmap.updateSize()を設定しておきます。
// リサイズ(回転)の時に地図更新
$(window).resize(function() {
map.updateSize();
});
おわりに
いかがでしたでしょうか。今回はYahoo! JavaScriptマップAPIのルート検索機能と雨雲レーダーレイヤー表示を組み合わせて、ルートを探しながら雨雲をチェックできるWebアプリ「ルート雨雲チェッカー」を作ってみました。雨雲レーダーレイヤーは、この他にもさまざまなシーンでの利用が考えられると思います。
また、Yahoo! iOSマップSDKとYahoo! AndroidマップSDKを利用いただければ同様の機能を利用して、ネイティブアプリを開発することも可能です。
今回の記事を参考にしていただきつつ、YOLPの提供するAPI/SDKを活用して、面白くて便利なアプリ・サービスを開発いただけますと幸いです。
※定期的に現在地を取得して自動的にルート検索を行う機能には、YOLPはご利用いただけませんのでご注意ください。
本稿でも利用している「雨雲レーダーレイヤー表示」などに対応した、iOSアプリ「地図 Yahoo!ロコ」の最新版を現在提供しています（無料）。データの読み込み速度が倍以上になった他、iPadにも対応しました。ぜひ併せてご利用ください。
