h19e blog

YOLP (Yahoo! Open Local Platform) 自作の検索APIの情報も地図にプロット

2012-02-05T00:05:00.001+09:00

前回、前々回に引き続き、Yahoo!がAPIとして提供している YOLP (Yahoo! Open Local Platform)を使用して、周辺検索のサンプルを作っていきます。

今回は、自作の検索APIの情報を地図にプロットする方法なのですが、ちょっと一から自作の検索APIを作成するのは大変なので、YOLPの　ローカルサーチAPI を自作のAPIと見立てて YOLPに標準で装備されている、Y.LocalSearch を使用しないでリクエストする方法を解説していきます。

これができることによって、今すでにある位置情報系サービスに、YOLPの情報を簡単に追加することも可能になると思います。

前回と同様ですが、今回のサンプルページです。

サンプルでは、すき屋の情報を、Y.LocalSearch を使用して地図にプロット。マクドナルドの情報を、ローカルサーチAPI を直接リクエストして地図にプロットしています。

今回もYOLPのカセットギャラリーのデータを使用しています。

すき屋　カセットID：8cfa8ed3d825ba896fa8d7cffd28cd67

マクドナルドカセットID：d115e2a62c8f28cb03a493dc407fa03f

ローカルサーチAPIにリクエストして、結果を地図にプロットしている箇所

    var search_plus = function(lat,lon) {

        var cid = 'd115e2a62c8f28cb03a493dc407fa03f';

        $.getJSON("http://search.olp.yahooapis.jp/OpenLocalPlatform/V1/localSearch?output=json&lat=" + lat + "&lon=" + lon + "&cid=" + cid + "&dist=10&results=10&sort=10&appid=（取得したAPPID)&callback=?",function(result){

           for (var i = 0, len = result.Feature.length; i < len; i++ ) {
                var feature = result.Feature[i];
                var latLng = feature.Geometry.Coordinates.split(',');
                var marker = new Y.Marker(new Y.LatLng(latLng[1],latLng[0]),{icon:icon_m});
                ymap.addFeature(marker);
                marker.bindInfoWindow('<div class="info_window"><a href="http://loco.yahoo.co.jp/place/' + feature.Property.Uid + '/" target=_blank >' + feature.Name + '</a><p>住所 [ ' + feature.Property.Address + ' ] </p><p>ジャンル [ ' + feature.Property.Genre[0].Name + ' ] </p></div>');
            }

        });

    }

$.getJSONにより、ローカルサーチAPIにリクエストし、resultにレスポンスを取得します。

その後は、Y.LocalSearch　で取得した場合と同様、件数分繰り返し処理を行います。

ただ、データ構造が若干違うので、　ローカルサーチAPIのレスポンスのリファレンスや、console.log(result)により確認してください。

注意点としては、ローカルサーチAPIからの緯度経度のレスポンスは、
Feature.Geometry.Coordinates に格納されているのですが、lat, lon の順ではなく lon, lat で格納されているので、気をつけてください。

緯度経度が取得できれば、　Y.LatLng を使用して緯度経度情報をプロットできる形に成型します。

その後は、前々回の解説を参照ください。

呼び出す際は、以下のように地図の移動後両方の検索を行います。

    ymap.bind('moveend',function(){
        var latLng = ymap.getCenter();
        ymap.clearFeatures();
        search(latLng.lat(),latLng.lng());
        search_plus(latLng.lat(),latLng.lng());
        current_point(latLng.lat(),latLng.lng());
    });

検索は、並列にAPIをリクエストして、レスポンスの順番の制御を行っていないので一旦リクエストの直前に、マーカーの削除処理　ymap.clearFeatures();　を行っています。

これで、自作の検索APIの情報も地図にプロットするためのサンプルの出来上がりです。

関連
YOLP (Yahoo! Open Local Platform) で周辺検索
YOLP (Yahoo! Open Local Platform) で緯度経度から住所取得

YOLP (Yahoo! Open Local Platform) で緯度経度から住所取得

2012-02-04T23:15:00.000+09:00

前回に引き続き、Yahoo!がAPIとして提供している YOLP (Yahoo! Open Local Platform)を使用して、周辺検索のサンプルを作っていきます。

今回は、緯度経度情報から、地図の中心の住所を取得して表示してみます。

使用するAPIは、リバースジオコーダーです。

今回作成したサンプルは、こちらです。

地図を移動させると、地図の上部の住所が地図の中心に合わせて表示されます。

緯度経度から、住所文字列を取得している部分はこんな感じです。

var current_point = function(lat,lon) {

    $.getJSON("http://reverse.search.olp.yahooapis.jp/OpenLocalPlatform/V1/reverseGeoCoder?output=json&lat=" + lat + "&lon=" + lon + "&appid=（取得したAPPID)&callback=?",function(result){
            address = result.Feature[0].Property.Address;
            $("#current_position").html(address);
    });
}

var latLng = ymap.getCenter();

current_point(latLng.lat(),latLng.lon());

APIのリクエストには、jQueryを使用しました。

$.getJSON に、リバースジオコーダーのAPIのリクエストを渡して、resultにレスポンスを取得します。

result.Feature[0].Property.Address　に、指定した緯度経度の住所文字列が格納されているので、その値を、id: current_position に表示します。

全体のソースコードは、サンプルページで確認ください。

このサンプルでは、前回に追加してローカルサーチをYOLPで準備された Y.LocalSearch を使用せずに、jQueryの$.getJSONを使用してリクエストしています。
こちらの解説は次回行う予定です。

モバイル端末等で、GPSで緯度経度を取得して表示する場合は、

こちらも参考にしてください。

ちかくのコンビニ　のサービスで使用してます。

YOLP (Yahoo! Open Local Platform) で周辺検索

2012-02-03T23:45:00.001+09:00

YOLPで周辺検索 - coding note

Yahoo!がAPIとして提供している YOLP (Yahoo! Open Local Platform)を使用して、
よくある周辺検索のサンプルを作ってみたいと思います。

YOLPを使用した周辺検索サンプル

YOLP自体について詳しくはこちら

まずYOLPを使うためには、アプリケーションIDが必要になるため、まだ取得していない方は、無料で取得可能なので、こちら から、ページの説明に従って取得ください。

アプリケーションIDが取得出来たら、まずは自分のサイトに地図を表示してみましょう。

特に今回はサーバサイドでプログラムはしないので関係ないのですが、前回セットアップした、CodeIgniterの環境で開発してみます。

前回の内容 CodeIgniter2.1.0 セットアップ

application/controller/sample.php を作成

<?php

class Sample extends CI_Controller

{

public function map()

{

//map.php テンプレートを呼び出しているだけ

$this->load->view('map');

}

application/views/map.php の作成

<!DOCTYPE html>

<html>

<body>

<div id="map" style="width:800px; height:600px"></div>

<script type="text/javascript" charset="utf-8" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=(取得したアプリケーションID)"></script>

<script type="text/javascript">

window.onload = function(){
    var ymap = new Y.Map("map",{
        configure : {
            doubleClickZoom : true
        }
    });

ymap.drawMap(new Y.LatLng(35.3192254, 139.54668679999997), 17, Y.LayerSetId.NORMAL);

}

</script>

</body>

</html>

これで、800×600のサイズの地図が画面上に表示されます。

この地図に、ローカルサーチAPIを使って地点情報をプロットします。

サーバサイト側で、このAPIを使って地図にプロットすることももちろん可能ですが、今回はjavascriptのみを使用して、実装します。

※サーバサイドでYOLPを使用しているサンプルはこちらにソースコードを公開しています。

地図をドラッグして移動すると、移動後の中心点から近い順に10件の地点情報を取得して地図上にプロットしています。

地図上にプロットするアイコンは自作のアイコンを使用しています。
吹き出しには、地点の名称と、Yahoo!ロコのPOIへのリンク、住所、ジャンル名を表示します。

全体の動作とソースコードは、サンプルで確認ください。

1. ローカルサーチAPIをjavascript経由でリクエスト

var local = new Y.LocalSearch();　//40行目

local.search(keyword,cid,options,function(result) { //48行目

ローカルサーチのインスタンスを生成し、ローカルサーチの searchメソッドを使用します。
引数に関しての詳細は、こちら

cid (カセットID）は、YOLPカセットギャラリー　から好きなものを選択して使用します。
今回のサンプルは、Yahoo!ロコプレイス店舗/施設情報Ver.1　のカセットを使用しています。

2. ローカルサーチAPIで取得した地点データを地図上にプロットする

for (var i = 0, len = result.features.length; i < len; i++ ) { //51行目

var feature = result.features[i];

var marker = new Y.Marker(feature.latlng,{icon:icon});

ymap.addFeature(marker);

}

resultは、ローカルサーチAPIからのレスポンスで、地点の件数分featureを保持しているので、
取得した件数分、処理を繰り返します。
マーカーのインスタンスを生成して、ymap.addFeature(marker)で、地図上にプロットします。

3. マーカーに自作のアイコンを使用する。

var icon = new Y.Icon('/images/h19e_icon.png'); //31行目

var marker = new Y.Marker(feature.latlng,{icon: icon});　　//53行目

Y.Iconのインスタンスを生成する際に、自作したアイコンのイメージパスを指定して、
そのインスタンスを、Y.Markerインスタンスの生成時に icon に渡してあげます。

4. 吹き出しを付ける

marker.bindInfoWindow('<div class="info_window"><a href="http://loco.yahoo.co.jp/place/' + feature.property.Uid + '/" target=_blank >' + feature.name + '</a><p>住所 [ ' + feature.property.Address + ' ] </p><p>ジャンル [ ' + feature.property.Genre[0].Name + ' ] </p></div>');

marker.bindInfoWindow()に、吹き出しに表示したい文字を渡してあげると、マーカーをクリックした際に、その内容が表示された吹き出しが表示されます。

resultオブジェクトは、firebugを使用して、console.log(result)で中身を確認しながら行うとやりやすいと思います。

5. 地図を移動したときに、検索を行う

ymap.bind('moveend',function(){
var latLng = ymap.getCenter();
search(latLng.lat(),latLng.lng());

});

ymap.bindで、イベントに対しての動作を設定できます。
上記の記述では、地図を移動した後（moveendイベント)、地図の中心の緯度経度を取得し、検索を行います。

このままでは地図を移動するたびに、マーカーが増えてしまうので、 ymap.clearFeatures(); で移動前のマーカーを一旦削除しています。

と、これぐらいのソースコードと時間で周辺検索のサービスを完成させることができました。
参考になれば幸いです。

CodeIgniter2.1.0　セットアップ

2012-02-01T23:46:00.003+09:00

CodeIgniter2.1.0 + bitbucketで環境セットアップ coding note

CodeIgniter2.1.0を使用してWebアプリケーションを開発していきます。

ソースコード管理には、bitbucketを使用します。

まずは、bitbucketで新しくリポジトリを作成します。

https://bitbucket.org

そして、自分の開発環境に作成したリポジトリのcloneを作成します。

開発環境のディレクトリ構成は、coreserver を想定して以下とします。

/virtual/h19e ホームディレクトリ

/virtual/h19e/webapp　のディレクトリを作成して、ここにリポジトリのcloneを作成します。

アカウントが、h19e リポジトリをh19e.bex.jp という名称で作成した場合、

git clone ssh://git@bitbucket.org/h19e/h19e.bex.jp.git

/virtual/h19e/webapp/h19e.bex.jp というディレクトリが作成されます。

ここまで準備が出来たら、CodeIgniter2.1.0のソースコードをダウンロードします。

http://codeigniter.com/

ダウンロードしたら圧縮ファイルを解凍します。
/virtual/h19e/CodeIgniter_2.1.0 　のような感じです。

このディレクトリの中に、
system , application , user_guide のディレクトリと、index.php , license.txt のファイルがあります。
system と、applicationのディレクトリ、license.txtは、先ほどのリポジトリに移動して、以下のような配置にします。

/virtual/h19e/webapp/h19e.bex.jp/system
/virtual/h19e/webapp/h19e.bex.jp/application
/virtual/h19e/webapp/h19e.bex.jp/license.txt

user_guideはCodeIgniterのマニュアル類なので移動の必要はありません。

次に、サイトのDocumentRootにindex.phpを移動します。

今回は、/virtual/h19e/public_html/h19e.bex.jp/ をDocumentRootとしているので、ここに移動します。

/virtual/h19e/public_html/h19e.bex.jp/index.php

最後に、index.phpを編集します。

$system_path = 'system';

↓

$system_path = '/virtual/h19e/webapp/h19e.bex.jp/system';

$application_folder = 'application';

↓

$application_folder = '/virtual/h19e/webapp/h19e.bex.jp/application';

ここまでで、Welcomeページが表示されるようになります。

http://h19e.bex.jp/

で、一旦ここで
/virtual/h19e/webapp/h19e.bex.jp/
以下に移動したファイル群をcommitして、bitbucketにpushまでしておきます。

ブログ引っ越し予定

2012-01-30T00:38:00.001+09:00

Bloggerちょっと使ってみて、いい感じであれば引っ越してみようかと検討中。
昔使おうとして、やめたんだけど色々変更されているみたい。