2007年03月04日

「電子国土」が面白くなりそう--APIを使ってみた--

地図情報サイトというと、なんといってもGoogle Mapが熱い。
Ajaxの活用で地図をグリグリ動かせて、世界中の詳細な地図や航空写真を見ることができるこのサイトの登場は、衝撃的だったし、さらにGoogle Map APIを提供してその膨大な地図情報を外部の個人のサイトから利用可能にしてくれたのだ。(同様のAPIの提供は、Yahooの地図サイトなども行っているようだ。)

しかし、この地図情報、アウトドアの情報発信に利用しようと思うと…、やはり等高線の情報が貧弱である。できれば、2万5千分の1の地形図の情報をグリグリと動かしたい。
地形図と同様の情報を利用可能なサイトというと、「電子国土」がある。
地図情報の共有を目的に掲げたサイトで、外部から利用可能なAPIを公開している。
が、電子国土サイトの情報を利用するためには、ブラウザごとに専用のプラグインをインストールしなくてはならず、しかも、最新のFireFox(僕のメインブラウザ)には対応していなかったりするのだ。サイトの動作もいまいち重くて、正直あまり興味を持っていなかった。

ところが、最近サイトを訪れてみると、プラグインを使わないブラウザの機能とAjax技術のみで動かすバージョンのβテストを開始した、とある。というわけで、さっそくちょっと触ってみた。

ファーストインプレッションとしては「まだ使えね〜」
地図の表示と、XML形式にした情報の重ね合わせはできるのだが、イベント関係の機能がまったく使えない。描画関係の機能がはIEでは使えることになっているが、描いた情報が地図と一緒に動いてくれなかったり、まだかなりバグの多いように思われる。

でも、動きは軽く、その点はかなり好印象。いろいろいじくっているうちに、ブラウザの持つイベント処理の機能をうまくミックスして、結構面白い地図サイト作れるかも,という気になってきた。
方針はこうだ。
denshikokudo.png 電子国土サイトの基本構造は、サイト作成者側のメインhtmlファイルにフレームを用意し、そのフレーム内に電子国土が提供する「webtis_map_obj_ie.htm」というhtmlファイル(このhtmlファイルが電子国土サイトと直接通信を行う)を読み込ませ、情報の処理や動作などは、サイト作成者側のhtmlファイルに記述するようになっている。(上図)

この「webtis_map_obj_ie.htm」というファイルに手を加えて、マウスのクリックなどの動作を取得、クリックされた座標などをメインhtmlファイルに送信し、メインhtmlファイル側では、独自に重ね合わせた地図情報XMLファイルを取得して、「webtis_map_obj_ie.htm」から送られるマウスの動作情報とあわせて、処理を行うのだ。

「webtis_map_obj_ie.htm」の内容はこんな感じ。最後の< script >タグで囲まれた部分が、付け加えたコードである。この部分は、汎用的に使えるように、特定の情報作成に特化した処理は入れていない。

次に、地図情報XMLファイルを作成する。
今回は、昨年4月に行った氷ノ山の時の写真と、その撮影地点のデータをひとつのポイントのデータにまとめ、XMLファイルにしてみた。フォーマットは、詳しくは電子国土のサイトの技術情報(リンクはトップページにとの指定があったので、たどってください)を見てもらうとして、簡単に言えば< coordinate>タグに位置情報を、< attribute>に地点の情報を書けばよい。なお、の属性名に、@をつけると、地図上でポップアップする情報(プラグイン版でしか動作しない機能だが)に表示されないようだ。
xmlファイルの内容はこちら。今回は画像のURLとサイズの情報を書き込んだ。

上で作成したXMLファイルのURLは、地図を開くAPIの呼び出しの際に引数として渡し、地図に重ね合わせて撮影地点をあらわすカメラのマークが表示されるようにした。あわせて、メインのhtmlファイル独自にも、このXMLのデータを取得しておく。そして、マウスでこれらの撮影地点を表すシンボルマークがクリックされたら、XMLファイルに記述されたその地点で撮影された画像をポップアップウィンドウで表示させるのだ(詳しくは、ソースを直接見て)。

さて、ここまで作成して…IEでは、このページ、まったく動作しない(T_T)
そもそも、IE上では、イベントの取得がまったくできないようで、やや本末転倒であるが、プラグインをインストールしてもらうしかないようだ。(それ用のコードも記述してある)

で、作成したのが以下
ただ、比較的新しいバージョンのFireFoxか、プラグインをインストールしたIEでしか、動作しないと思われる。その辺は、習作ということで勘弁を。


使い方
●FireFox(少なくとも、Ver2では動作確認)
地図をドラッグして移動、右上のボタンで縮小、拡大、地図上のカメラマークをクリックで、その地点の画像をポップアップ表示(ポップアップを許可しておいてください)。マウスホイールによる地図の拡大、縮小も可能

●IE(要プラグイン。プラグインなしでは、表示のみ)
地図の上にある、「パンニングモード」「セレクションモード」「ズームモード」で、地図の移動、ポイントの選択、地図の拡大縮小を切り替え。セレクションモードで、地点をクリック(クリックでうまく動かない場合は、囲むようにドラッグするとよい)すると別ウィンドウで画像の表示、地点に近づくと、情報表示の吹き出しが出る

今のところ、このβ版APIはバグや不具合っぽい動作がいろいろ見られる。しかし、これが機能充実してくると、かなり面白いことができるのではないか、と感じている。
簡単に思いつくあたりでも
・テキストベースの地点情報が動く地図上でポップアップ
・動画の貼りこみ
・GPSデータの表示、および画像やテキストの地点情報との連携
・テキスト、画像、動画、GPSデータと地図を組み合わせたマルチメディア山行記録。
・山行アニメーション(これはもっと機能充実してこないと厳しいか)
・よくあるテキストベースのものではなく、地図上に貼りこまれた山行情報リンク集。
・さらには、インタラクティブに情報をXMLファイルに付け加えていく、山行情報をユーザーが地図上に貼り付けていけるサイト
などが考えられそうだ。
簡単なものから、時間のあるときにちょっとずつトライしてみようかと思っている。

しかし、ブログ上でこんなことができてしまうシーサーブログの自由度の高さもなかなかすごいな…

なお、今回載せたソースやファイルの再利用は自由ですが、一言トラックバックやコメントなりを残してもらえるとうれしいです。
posted by S.A at 20:38| Comment(4) | TrackBack(0) | 電子国土で遊ぼう | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
写真のマークが出ないよ。
firefoxのバージョンが古いせいかな?
でも、地図はちゃんと動きます。
Posted by kayo at 2007年03月04日 23:45
あまり、さまざまなブラウザへの対応は考慮できていないので…古いバージョンではうまく動かないかも。
電子国土側のサーバーの動作もいまいち安定していないようで、カメラのマークが読み込まれたり、読み込まれなかったりすることがあるようです。リロードすると読み込まれたりもします。
Posted by 野遊び人 at 2007年03月05日 19:54
XMLを読み込んで座標判定する処理のソースを,利用させていただきました.
ありがとうございます!
Posted by かも at 2008年04月15日 00:12
大分昔に書いた記事が、役に立つのはうれしいことです。
電子国土API、だいぶ変わっているようだから、そろそろ手を加えたいところですが…
Posted by 野遊び人 at 2008年05月26日 19:48
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: [必須入力]


この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。