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)