Ajaxを使ってKMLをGoogle Maps上にマップする
今度はAjaxを使ってKMLをGoogle Maps上にマップしてみました。
kml2gmaps.html: Maps KML file onto Google Maps
上記のURLにアクセスするとサンプルKMLファイルをAjaxを使って読み込み、Google Maps APIを使ってマップ表示します。また、下のように「?url=」に続いてKMLファイルのURLを指定すればそのファイルをマップ表示します。
http://as-is.net/maps/kml2gmaps.html?url=http://as-is.net/maps/sample2.kml
georss2kml.cgi: GeoRSSをGoogle Earthにマップするスクリプトを中継に使うことで、GeoRSSをGoogle Maps上にマップすることもできます。
http://as-is.net/maps/kml2gmaps.html?url=http://as-is.net/maps/georss2kml.cgi?url=(以下省略)
注意点
上記のkml2gmaps.htmlは自由に再利用していただいて構いませんが、Hawk's W3 Laboratory : XML : XMLHttpRequestについてで詳しく解説されているように、XMLHttpRequestを使って読み込むURLには主に以下のような制約があります。
- 同一ホスト、ポートのリソースしか取得できない。
- Content-Typeとしてtext/xml, application/xmlを返すリソースしかDOMDocumentに変換できない(場合がある)。
このため、この条件を満たさないKMLファイルを利用するには、kml2gmaps.htmlと同一のホスト、ポートを用いる適当なプロキシーを用意する必要があります。kml2gmaps.htmlの場合には以下の簡単なスクリプトを作って使っています。
http://as-is.net/maps/aproxy.cgi?src=1
まとめ
察しのよい方は気が付いているかもしれませんが、私がPin It On The Earth!: Googleマップで閲覧中の地点をGoogle EarthにマップするBookmarklet、georss2kml.cgi: GeoRSSをGoogle Earthにマップするスクリプト、そしてこのエントリーで確認したかったのは、
- KML(Google Earth KML Documentation)は汎用の(つまり出力系に依存しない)地理情報アノテーションを実現する言語である
- 優れたKMLエディタ/ツール(典型的にはGoogle Earth)さえあれば、わざわざ他のデータ形式を考案したり、それに特化したエディタ/ツールを作る必要はない
ということでした。部分的には確認できたのではないかと思います。さらにKMLの記述の柔軟性(曖昧性)を逆手に取ってKMLファイル内にプログラムを記述し、ブラウザ(アプリ)側でevalことで、場所に即した振る舞いをするアプリも容易に実現できるでしょう。
2006-03-16追記
入力のKMLのLookAt要素に含まれるlongitude, latitudeだけを見ていたため、一部のKMLで正常に動作していませんでした。Point要素があればその値を使い、なければLookAt要素に含まれる座標情報を使うように動作を変更することでこの問題に対処したつもりです。
このエントリーのトラックバックURL: http://as-is.net/mt/mt-tb.cgi/302
桜前線 さくらマッピング
http://mapping.jp/
というサービスがあるのですが ここで出力されているKML
http://mapping.jp/map/kml.cgi
ではウマく動きませんでした。
緯度経度を<longitude><latitude>ではなく<coordinates>だけで出力しているからかも知れません。
ご指摘の通りです。
kml2gmaps.htmlを修正して、入力のKMLにPoint要素があればその値を使い、なければLookAt要素に含まれる座標情報を使うように動作を変更してみました。
http://as-is.net/maps/kml2gmaps.html?url=http://mapping.jp/map/kml.cgi
素早い対応ありがとうございます!
imさんのつくられたサイトを参考に、桜前線公式サイトに実装させていただきました。proxy.cgiも応用させていただいております。
http://mapping.jp/index2.html
こちらよりご覧になれます。
最下段に、imさんの作成されたウェブサイト、及びこのblog記事へのリンクを設けさせていただきました。
アクセス過多で負荷が大きくなったなど、もし問題がございましたらご連絡くださいませ!
本当にありがとうございました。
watanaveさま:
コメントありがとうございます。
このエントリではJavascriptのDOMを使って表示する方法を紹介していますが、どうせproxyが必要ならproxy上でJSONに変換するようにした方が楽だったなーと思いました。