風景写真集などのページで,場所を示すための地図をポップアップ表示できれば便利だ.電子国土APIの地図とYahoo UI Libraryのパネルを使って,何とか実装してみた.

このボタンを押すと,尾瀬沼ビジターセンターの地図が出る.

地図の説明ページへ
3枚の地図が連動し,それぞれの地図上をドラッグで移動,「+」「-」でズームという操作.

環境

YahooUIのバージョンが異様に古いのは,特に意味はない.カモランドで使い始めた時点でのバージョンのまま,バージョンアップしていないだけ.ファイルのタイムスタンプを見ると2006年5月13日なので,相当古いバージョンだ.

IE7,FireFoxそれぞれでよくわからない挙動に悩まされ,もう発狂しそうになりながら,試行錯誤の末なんとかそれらしく動く実装にたどりついた.

電子国土の地図とYUIのパネルを,それぞれ別に使う場合は何の問題もないのだが,一緒に使うと途端にわけの分からない動きになってしまった.

結局難しかったのは,

  1. YUIのPanel(YAHOO.widget.Panel)をnewするタイミング.これはbody.onLoadより先に実行する.(<body>内に記述する)
  2. YUIのPanelをrenderするタイミング.これは電子国土のapp_main()コールバックが全て終わってからのタイミングにする.(これをしないとIE7でページを表示できませんエラー)
  3. 電子国土のapp_main()コールバックが二重に発生するので,フラグを使って1回目はスキップする

といったところ.

もう,疲れました.


© 2024 KMIソフトウェア