検索結果を地図上にマッピングする
ローカルサーチAPIで返却されるXML/JSONはYOLPの共通フォーマットであるYDFになっているので、YOLPのマップAPIを利用して簡単に地図上にマッピングできます。
JavaScriptマップに表示する
JavaScriptマップは、マウスを使ってドラッグ&ドロップすることでスクロールを行えるマッピングAPIです。JavaScriptマップにローカルサーチAPIの結果をマッピングするにはLocalSearchクラスを利用します。
下の例は、表示している地図の中心から半径1.5km以内にあるコンビニを近い順に検索した結果をJavaScriptマップ上にマッピングするためのコードの一部です。
var keyword = "コンビニ"; //検索キーワード var cid = ""; //すべてのカセット var options = { lat : map.getCenter().lat(), // 中心緯度 lon : map.getCenter().lng(), // 中心経度 sort : "dist", // ソート dist : 1.5, // 半径 start : 1, // 取得開始位置 results : 30, // 取得件数 }; var local = new Y.LocalSearch(); local.search(keyword, cid, options, function(){ map.addFeatures(result.features); });
スタティックマップに表示する
スタティックマップAPIは、静的な地図画像を生成するためのAPIです。JavaScriptに対応していないモバイル端末用のページを作成する場合などに適しています。
スタティックマップAPIに検索結果を表示する場合、urlパラメーターにローカルサーチAPIのURLをUTF-8でURLエンコードしたものを追加します。スタティックマップAPIでは地図のスタイルを簡単に変更することができるので、通常とは異なる見栄えの地図を作ることができます。
下の例では、スタイルをシンプル図式(&view=base:simple)で表示します。
http://map.olp.yahooapis.jp/OpenLocalPlatform/V1/static?appid=<あなたのアプリケーションID> &mode=map&style=base:simple&z=16&width=600&height=400&icon_num=on&icon_label=off&view=base:simple&url=http%3A%2F%2Fsearch.olp.yahooapis.jp%2FOpenLocalPlatform%2FV1%2FlocalSearch%3Fappid%3D<あなたのアプリケーションID> %26query%3D%25E3%2582%25B3%25E3%2583%25B3%25E3%2583%2593%25E3%2583%258B%26sort%3Ddist%26lat%3D35.65861844679345%26lon%3D139.74540946810274%26dist%3D1.5%26results%3D30
おわりに
YOLPカセットギャラリーは1000万を超すPOIのデータベースになっています。ローカルサーチAPIはその膨大なデータベースの中から、パラメーターを組み合わせ、目的に応じたPOIを検索するためのAPIです。検索した結果はYDFで統一されているため、今回紹介したJavaScriptマップAPIやスタティックマップAPIだけではなく、SilverlightマップAPIやiOS Map SDK、Android Map SDKとも簡単に連携し、地図にマッピングできます。
パラメーターを極めて素晴らしい地図をご自身のページに掲載してみませんか?