Yahoo! Open Local Platform JavaScriptマップAPI の Y.GeoXmlLayer クラスを使って経路の情報を持つKMLを地図上に表示してみるサンプルを作ってみた。
⇒ KML on Yahoo! Open Local Platform using GeoXmlLayer

JavaScript によるコードを一部抜粋。


<script type="text/javascript" charset="utf-8" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=<YOUR APPLICATION ID>"></script>
<script type="text/javascript">
function initialize() {
  try{
    var map = new Y.Map("map");
    map.addControl(new Y.LayerSetControl());
    map.addControl(new Y.ScaleControl());
    map.addControl(new Y.SliderZoomControlVertical());
    map.drawMap(new Y.LatLng(35.17072677789611, 136.88260304318726), 17, Y.LayerSetId.NORMAL);
    var dataUrl = "http://www.nilab.info/f/0/20110830_sample.kml";
    var geoXmlLayer = new Y.GeoXmlLayer(dataUrl);
    map.addLayer(geoXmlLayer);
    geoXmlLayer.execute();
  }catch(e){
    alert(e);
  }
}
window.onload = initialize;
</script>

最初、手持ちのYDFデータで試してみたけどうまく表示されなかった。
同じデータがスタティックマップAPIでは表示されてたのになぁ…
⇒ [ヅ] ルートラボのKML経路データをYDFへ変換して地図画像を生成する

調べてみたら、YDFしかダメかと思ったらどうやらKMLでも良いらしい。
Yahoo!地図版ルート地図 のKMLを読み込んで表示するコードが参考になった。

YDF（YOLP Data Format）は、YOLP（Yahoo! Open Local Platform）の標準データフォーマットです。
地図を表示するAPIと、拠点データを出力するWeb APIとの間の入出力を仲介します。
ジオコーダAPIなどの検索結果のフォーマットとして用いられたり、また点や線・面といった地理的な情報を記述して地図APIで表示することができます。
(中略)
YDFはGeoXmlLayerを利用して呼び出します。
Y.GeoXmlLayerにYDFのパスを指定して生成し、Y.GeoXmlLayer.execute()を実行してください。

Yahoo!デベロッパーネットワーク - YOLP（地図） - YDF
GeoXmlLayer(url)
YDF形式のXMLファイルを地図上に表示するレイヤーです。
ListingLayerクラスを継承しています。

Yahoo!デベロッパーネットワーク - YOLP（地図） - JavaScriptマップ - リファレンス - Layerクラス

Ref.
- Yahoo!デベロッパーネットワーク - YOLP（地図） - JavaScriptマップ - リファレンス - Layerクラス - GeoXmlLayer

tags: yahoo_maps_api kml

Posted by NI-Lab. (@nilab)