地図と検索の連携
YOLPは、地域情報サイトなどを開発するにあたって、従来非常に不便だった問題を解決しています。その一端として、検索と地図表現の連携部分を紹介します。
リスティングと地図の融合
地域情報サイトを作るときに、非常によく利用されるのが、検索結果のリスト表示と、地図上での表示、あるいはその組み合わせであると思います。YOLPは、これらを簡潔なコードで書けるよう設計されました。
リスト表示と地図表示のサンプルコード
<html><head>
<script type="text/javascript" charset="utf-8" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=＜あなたのアプリケーションID＞"></script>
</head>
</style></head>
<body>
<div id="list"style="width:20%;"></div>
<div id="map" style="width:80%;height:50%;"></div>
<script >
//リスティング初期化
var listing = new Y.Listing("list");
//地図初期化
var map = new Y.Map("map", {configure:{doubleClickZoom:true, doubleClickPan:true, scrollWheelZoom:true}});
//レイヤをローカルサーチAPI（電話帳データ cid:d8a23e9e64a4c817227ab09858bc1330）から生成
var layer = new Y.GeoXmlLayer("http://search.olp.yahooapis.jp/OpenLocalPlatform/V1/localSearch?
appid=＜あなたのアプリケーションID＞&cid=d8a23e9e64a4c817227ab09858bc1330");
map.drawMap(new Y.LatLng(35.665627,139.730738), 6,Y.LayerSetId.NORMAL);
map.addLayer( layer ); //地図にレイヤを追加
listing.addLayer( layer ); //リスティングにレイヤを追加
layer.execute(); //レイヤ描画を実行
</script>
</body></html>
図8 リスト表示と地図表示のサンプルコード実行例
CSSを適用することで、レイアウトを整えれば、地域サイトのできあがりです。
アイコン表現とヒートマップ表現
地図上に検索結果を表示するとき、次のようなピンアイコンを立てることが多いと思います。
図9 ピンアイコンでの検索結果表示例
YOLPローカルサーチAPIでは、非常にたくさんのデータがあるため、ピンアイコンでの表現では、場合によって使いにくかったり、わかりにくい状態となってしまいます。
JavaScriptマップAPIには、ヒートマップ表現に切り替える機能が準備されています。
図10 ヒートマップでの検索結果表示例
ヒートマップ表現を利用するサンプルコード
window.onload = function() {
var map = new Y.Map("map", {configure:{doubleClickZoom:true,doubleClickPan:true, scrollWheelZomm:true}});
map.addControl(new Y.LayerSetControl());
map.addControl(new Y.SliderZoomControlVertical());
//地図を描画します。
map.drawMap(new Y.LatLng(35.66,139.73), 15 , Y.MAP_LAYERSET);
//YDF, geoRSS, KML に対応します。
var url="http://1st.geocities.jp/yjmapstaff/yolp/ydf/geoSearch.xml";
//GeoXmlのアイコンとヒートマップを切り替えられるプラグインを作成します
var geoxml = new Y.GeoXmlPlugin(url, { heat:true});
//プラグインをマップに追加します。
map.addPlugin(geoxml);
}
ページを利用する人が、ピンアイコンとヒートマップの表示を切り替えられるボタンも準備しています。
プラグイン開発
前述のヒートマップ機能は、JavaScriptマップAPIのプラグインを利用して実装しています。このプラグインは、誰でも自由に開発、追加することが可能です。
HelloPluginを追加するサンプルコード
<script>
<!--
var map;
window.onload = function() {
//地図を初期化
var map = new Y.Map("map");
map.addControl(new Y.LayerSetControl());
map.addControl(new Y.ZoomControl());
map.drawMap(new Y.LatLng(35.665627,139.730738), 18,Y.LayerSetId.NORMAL);
//プラグインを追加
var plugin = new HelloPlugin();
map.addPlugin( plugin );
}
//プラグインの定義
//地図上にアイコンを表示するHelloプラグインを作成します。
var HelloPlugin = Y.extend( Y.Plugin , function() {
} );
HelloPlugin.prototype.load = function( map ) {
this.marker = new Y.Marker( map.getCenter() );
map.addFeature( this.marker );
this.marker.openInfoWindow( 'Hello!' );
}
HelloPlugin.prototype.unload = function() {
map.removeFeature(this.marker);
}
//-->
</script>
おわりに
今回は、「YOLPオーバービュー」と題して、YOLPにできること、公開されているAPIの概略やテクノロジを紹介しました。各APIやSDKの詳細については、今後の連載で順次解説いたします。
