YOLP(地図)

プラグインを利用する

目次




注記クリックプラグイン(Y.MapAnnotationPlugin)

注記クリックプラグインは、地図上の交差点や店舗アイコンといった、注記情報を取得する機能を提供します。
六本木周辺の注記情報を表示
この機能は、注記クリックプラグイン(Y.MapAnnotationPlugin)をY.Mapオブジェクトに追加することで利用できます。地図上の注記がクリックされた際に、クリック対象となった注記情報を受け取ることが可能になります。

//宣言済みのMapオブジェクト(変数名map)に注記クリックプラグインを設定するサンプルです。

//注記をクリックした際に呼び出される関数を定義します。
var showAnnotation = function(annotation) {
    //注記の位置にマーカーを設定します。
    var nameMarker = new Y.Marker(
        annotation.centerLatLng,
        {
            "title": annotation.name
        }
    );
    map.addFeature(nameMarker);

    //注記の矩形を透過ポリゴンで描画します。
    var ne = annotation.latLngBounds.getNorthEast();
    var sw = annotation.latLngBounds.getSouthWest();
    var boundary = [
        new Y.LatLng(sw.lat(), ne.lng()),
        new Y.LatLng(ne.lat(), ne.lng()),
        new Y.LatLng(ne.lat(), sw.lng()),
        new Y.LatLng(sw.lat(), sw.lng())
    ];
    var boundPolygon = new Y.Polygon(
        boundary,
        {
            "strokeStyle": new Y.Style("3300ff", 1, "1.0"),
            "fillStyle": new Y.Style("3300ff", 5, "0.2")
        }
    );
    map.addFeature(boundPolygon);
};

//地図の縮尺を変更した際に呼び出される関数を定義します。
var clearAnnotation = function() {
    map.clearFeatures();
};

//注記クリックプラグインの設定を記述します。
var configs = {
    "match": showAnnotation, //注記にマッチした際にshowAnnotation関数をコール
    "threshold": 2 //注記情報とクリック位置が2ピクセルずれていてもマッチと扱う
};
var annotationPlugin = new Y.MapAnnotationPlugin(configs);

//プラグインをMapオブジェクトに追加します。
map.addPlugin(annotationPlugin);

//地図の縮尺が変更されたら、現在地図上に表示している注記情報を削除します。
map.bind("zoomend", clearAnnotation);

クリックされた位置に注記情報があったとき、annotationオブジェクトとして次のように構造化されたJSON形式で受け取ります。

 {
     "type"        : 注記種別(String)
                     'icon': アイコン注記、 'text': 文字列注記
     "label"       : 文字列注記だったときの文字列(String)
     "name"        : 注記の名称(String)
     "angle"       : 注記の回転角(Number)
     "vertical"    : 文字列注記の縦書きフラグ(Boolean)
     "clickLatLng" : クリックされた地理座標(Y.LatLng)
     "centerLatLng": 注記の中心地理座標(Y.LatLng)
     "latLngBounds": 注記を含める範囲の地理座標矩形(Y.LatLngBounds)
                     傾きがある(angleが0でない)場合、注記全体を覆う矩形を示す
     "size"        : コールバック時の縮尺における注記のスクリーン上のサイズ(Y.Size)
                     キー"latLngBounds"で表現される矩形と一致する
 }
        

注記クリックプラグインを利用するサンプルページはこちらになります。




経路探索プラグイン(Y.RouteSearchPlugin)

経路探索プラグインは、指定した地点間の経路を探索して地図上に表示する経路探索レイヤーを、インタラクティブUIから操作できる機能を提供します。
経路探索プラグインの利用イメージ
経路探索プラグイン(Y.RouteSearchPlugin)をY.Mapオブジェクトに追加することで利用できます。

地図上で経路の操作を行う

経路探索プラグインを使用することで、地図上で地点を指定して経路探索を行ったり、経路を編集したりできます。

//宣言済みのMapオブジェクト(変数名map)に経路探索プラグインを設定するサンプルです。
//プラグインをMapオブジェクトに追加します。
var plugin = new Y.RouteSearchPlugin();
map.addPlugin(plugin);
       

経路探索プラグインを利用したサンプルページはこちらになります。

地点を設定する

出発地点を設定
地図上で右クリックするとメニューが開き、右クリックした地点を出発地点、到着地点または経由地点に設定できます。
これらの設定した地点にはマーカーが表示され、マーカーをマウスオーバーするとその地点の住所が表示されます。
到着地点を設定し、経路を探索
出発地点と到着地点の2点を設定すると自動的に経路探索を行います。経路はポリラインで地図上に描画されます。
※地点間の総直線距離を1000km以下になるように設定してください。

経路を編集する

経路をポリライン上から編集
マーカーをドラッグ&ドロップすることで位置を修正できます。
ポリラインをマウスオーバーすると、ノードを追加できます。表示される円をドラッグ&ドロップすることで経由点を設定できます。
※ただし詳細設定の経由地点を回る順の項目で最適な順を選択した場合は、ノードを追加できません。
設定した地点を削除するときは、マーカー上で右クリックし、「この地点を削除する」を選択します。
すべての地点を削除するときは、右クリックメニューから「地点をクリアする」を選択します。
出発地点または到着地点のいずれかを削除すると、経路は削除されます。

詳細設定

詳細設定メニューを表示
右クリックメニューで「詳細設定」を選択すると、詳細設定メニューが開きます。設定できる項目は以下の通りです。

  • 経由地点を回る順
    • 指定した順:経由地点を指定した順に通る経路
    • 最適な順:指定順にかかわらず最適に経由地点を回れる経路
  • 交通手段
    • 車:車で移動したときの経路
    • 徒歩:徒歩で移動したときの経路
  • 優先項目
    • 時間:時間が最短となる経路
    • 距離:距離が最短となる経路
  • 交通規制
    • あり:交通規制を考慮した経路
    • なし:交通規制を考慮しない経路
  • フェリー
    • 使用しない:フェリーを使用しない経路(フェリーでしか行けない場所はエラー)。
    • 最低限使用する:フェリーが必要な個所のみ使用する経路
    • 使用する:フェリーを多く使用する経路
  • 有料道路
    • 使用しない:有料道路を使用しない経路(有料道路でしか行けない場所はエラー)。
    • 最低限使用する:有料道路が必要な個所のみ使用する経路
    • 使用する:有料道路を多く使用する経路

設定を変更し、「設定して閉じる」または「再探索」ボタンを押すと、設定が反映されます。「再探索」の場合は即時に経路探索が行われます。




GeoXml切り替えプラグイン(Y.GeoXmlPlugin)

GeoXml切り替えプラグインは、店舗や拠点の集積度や統計情報などをヒートマップ表現で地図上に表示する機能を提供します。
urlで指定した店舗の集積度をヒートマップで表示
この機能は、GeoXml切り替えプラグイン(Y.GeoXmlPlugin)をY.Mapオブジェクトに追加することで利用できます。プラグインを追加すると、ヒートマップコントロールが追加され、ヒートマップ/アイコンの切り替えが行えるようになります。
または、ヒートマップレイヤー(Y.GeoXmlHeatmapLayer)というレイヤーをY.Mapオブジェ クトに追加することでも利用できます。
いずれの機能もYDF形式のXMLが取得できるURLを指定する必要があります。ただし、GeomertyのTypeがpointのものだけ有効となりますのでご注意ください。
※対応ズームレベルは4~20です。ご注意ください。

GeoXml切り替えプラグイン

//宣言済みのMapオブジェクト(変数名map)にGeoXml切り替えプラグインを設定するサンプルです。

// 第1引数にはYDF形式のXMLが取得できるURLを指定します。
// 第2引数にはヒートマップ、アイコンの表示モードのオプションを指定します。
var plugin = new Y.GeoXmlPlugin(url, {heat:true});
// addPluginでMapオブジェクトに追加します。
map.addPlugin(plugin);
         

ヒートマップレイヤー

//宣言済みのMapオブジェクト(変数名map)にヒートマップレイヤーを設定するサンプルです。

// GeoXmlHeatmapLayer(ヒートマップ表示用レイヤー)を初期化します。
// 第1引数にはYDF形式のXMLが取得できるURLを指定します。
var layer = new Y.GeoXmlHeatmapLayer(url);
// addLayerでMapオブジェクトに追加します。
map.addLayer(layer);
// ヒートマップを描画します。
layer.draw();
        

GeoXml切り替えプラグインを利用するサンプルページはこちらになります。
このサンプルでは、静的なYDF形式のXMLファイルを用意して引数のurlとして指定しています。
他にも、YDF形式のXMLを取得する手段として、例えばローカルサーチAPIのレスポンスを指定することが可能です。

var url = "http://search.olp.yahooapis.jp/OpenLocalPlatform/V1/localSearch?query=&appid=<あなたのアプリケーションID>&cid=d8a23e9e64a4c817227ab09858bc1330&results=100";
var geoxmlplugin = new Y.GeoXmlPlugin(url, {heat:true});
        



独自プラグインの作成

プラグインの作成

組み込みで用意されているプラグインと同様に、APIに対する処理をJavaScriptで記述し、プラグインとして公開することが可能です。
独自のプラグインを作成するには、Y.extendメソッドを使ってY.Pluginオブジェクトを継承し、 下記のインターフェースを持つメソッドを実装する必要があります。

Y.Plugin.load(Y.Map ymap)
Y.Map.addPluginの実行時に呼び出されます。引数として、プラグインと関連付けられたY.Mapオブジェクトが渡されます。
Y.Plugin.unload()
Map.removePluginの実行時に呼び出されます。
//地図上にアイコンを表示するHelloプラグインを作成します。
var HelloPlugin = Y.extend(Y.Plugin, function() {

});

//loadメソッドを実装します。呼び出されたときに地図上にマーカー追加し情報ウィンドウを表示します。
HelloPlugin.prototype.load = function(ymap) {
    this.ymap = ymap;
    this.marker = new Y.Marker(this.ymap.getCenter());
    this.ymap.addFeature(this.marker);
    this.marker.openInfoWindow('Hello!');
};

//unloadメソッドを実装します。地図上に追加していたマーカーを削除します。
HelloPlugin.prototype.unload = function() {
    this.ymap.removeFeature(this.marker);

    if (this.ymap.isInfoWindowOpen()) {
        this.ymap.closeInfoWindow();
    }
};

プラグインの利用

作成したプラグインはY.Map.addPluginの引数に渡すことで有効化されます。
このとき、実装したloadメソッドに引数としてY.Mapオブジェクトが渡されます。

var plugin = new HelloPlugin();
ymap.addPlugin(plugin);
        

有効化されたプラグインを無効にするにはY.Map.removePluginを実行します。
このとき、実装したunloadメソッドが呼ばれます。

ymap.removePlugin(plugin);
        

独自プラグインを作成して利用するサンプルページはこちらになります。