個々の機能実装
ベースとなる地図を表示
まずは、JavaScriptマップAPIを読み込み、ベースとなるスクロール地図を表示します。
今回はヒートマップを重ねた時の見栄えを考慮して、航空写真地図の上に地名などの注記情報を表示したハイブリッド表現のレイヤーセットを使います。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptマップAPI x ローカルサーチAPI x ヒートマップ</title>
</head>
<body>
<div style="width:620px; margin-left:auto; margin-right:auto;">
<h1>東京23区マクドナルド分布</h1>
<div id="map" style="width:600px; height:480px;"></div>
<p>
<!-- Begin Yahoo! JAPAN Web Services Attribution Snippet -->
<a href="http://developer.yahoo.co.jp/about">
<img src="http://i.yimg.jp/images/yjdn/yjdn_attbtn1_125_17.gif" title="Webサービス by Yahoo! JAPAN" alt="Web Services by Yahoo! JAPAN" width="125" height="17" border="0" style="margin:15px 15px 15px 15px"></a>
<!-- End Yahoo! JAPAN Web Services Attribution Snippet -->
</p>
</div>
<script src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=＜あなたのアプリケーションID＞"></script>
<script>
// 地図のオプションを指定
var mapOptions = {
"configure": {
"hybridPhoto": true,
"scrollWheelZoom": true
}
};
// 地図を初期化
var map = new Y.Map("map", mapOptions);
map.addControl(new Y.LayerSetControl());
map.addControl(new Y.ZoomControl());
map.drawMap(new Y.LatLng(35.665627,139.730738), 13, Y.LayerSetId.PHOTO);
</script>
</body>
</html>
これで今回のWebアプリケーションのベースとなるスクロール地図の準備ができました。
地名から位置情報を取得
選択された地点の位置情報を取得するにはジオコーダAPIを利用します。
JavaScriptマップAPIのY.GeoCoderオブジェクトを使えば、次のようにして「東京都港区」の緯度経度を知ることができます。
var geoCoder = new Y.GeoCoder();
var request = {
"query": "東京都港区"
};
geoCoder.execute(request, function(ydf) {
var hasResult = ydf.result.count > 0;
if (hasResult) {
// 「東京都港区」のジオコーディング結果を取得
var latlng = ydf.features[0].latlng;
}
});
ここを任意のqueryで検索できるようにすることで、今回のWebアプリケーションの要件は満たせそうです。
指定の位置を中心とした周囲のショップ情報を検索してYDFで取得
ジオコーダAPIで取得した位置情報から、周辺のショップ情報を検索するのにはローカルサーチAPIを利用します。
ローカルサーチAPIは多くの店舗やイベントを検索することができますが、今回はYOLPカセットギャラリーに日本マクドナルド株式会社から「オフィシャルカセット」として提供されている「マクドナルド店舗情報」を検索対象に指定します。
ローカルサーチAPIに指定する、具体的なリクエストパラメータは次のとおりです。
| パラメータ | 指定する値 |
| appid | ＜あなたのアプリケーションID＞ |
| cid | d115e2a62c8f28cb03a493dc407fa03f |
| sort | dist（距離を中心にソート） |
| results | 100（一度に最大100件を取得） |
| dist | 5（中心から5km圏内を検索） |
| lat | ジオコーダAPIで取得した緯度 |
| lon | ジオコーダAPIで取得した経度 |
先ほどの「東京都港区」でジオコーディングした位置情報を使うと、次のようなURLでローカルサーチAPIを呼ぶことになります。
http://search.olp.yahooapis.jp/OpenLocalPlatform/V1/localSearch?appid=＜あなたのアプリケーションID＞&cid=d115e2a62c8f28cb03a493dc407fa03f&sort=dist&results=100&dist=5&lat=35.6528678&lon=139.73720093
WebブラウザのアドレスバーにURLを貼り付けて、検索結果をYDF（YOLP Data Format）で取得できていることを確認してみてください。
YDFをヒートマップ表現でプロット
YDFで受け取ったのショップ情報の検索結果をJavaScriptマップAPI上に重ねて表示するには、Y.GeoXmlHeatmapLayerオブジェクトを利用します。
変数cassetteUrlにローカルサーチAPIのURLが格納されているとき、次のようにY.Mapオブジェクトに追加することで重ね合わせが実現できます。
var heatmapLayer = new Y.GeoXmlHeatmapLayer(cassetteUrl); map.addLayer(heatmapLayer);
