« IT:ホームページのリニューアル完了 | メイン | IT:「新発田マップ」のリニューアルが一応完了 »

IT:「新発田マップ」のリニューアル中間報告

◆「新発田マップ」のリニューアルを開始
 マップに新発田城の古地図をオーバーレイ表示したいと考えた。
 一応の作業構想はできていたので、一週間の予定で、スタートした。(1/10)
 結果は、10日かけて、作業やり直しの状態となった。

 ただ、再挑戦の見通しはかなり明るい。
 試行錯誤を繰り返したお陰で、必要ななテクニックを取得できている。
 以下は、そのてん末。

◆古地図のお城部分の画像ファイルを作成
元にする古地図は、「新発田藩家中屋敷割図」(明治初年版)。
 これはきわめて明解な絵図なので、縮小画像にしても概ね読み取れる。
 城郭(本丸、二ノ丸、三ノ丸)部分の画像を作成した。

 城郭部分に限定したのは、以下の理由による:
 --・画像ファイルの容量を押さえる
 --・城郭部分は、現在のGoogleマップと良く一致しているので、重ね合せが容易
 --・城下町の部分は、縮尺も方位も不正確で、現在のマップとは重ねられない
 
 古地図画像をGoogleマップに重ねると、マップの移動、拡大・縮小に連動する。
 前回は、Googleマップのズームレベル=14に合わせて、画像ファイルをさくせいした。
 ところが、見易いズームレベル=15では、画像がボケて、16になると大ボケ。
 
 ズームレベルが一つ上がると縦横が各2倍になる。
 そこで今回は、ズームレベル=16に合わせてファイルを作成することにした。
 画像の横縦は、800×800pixcelとなった。(前回は、190×190pixcel)

 画像をGoogleマップに正確に重ねる手順(今回)は以下の通り:
 --・Googleマップ(ズームレベル=16)の表示画面をファイルに保存する
 --・Adebe Photoshop Element 11に読み込み、その上に古地図画像を読み込む
 --・古地図画像を半透明にして、重ね合わせを調整する
 --・本丸のお堀を基準にして、古地図画像を移動、回転、拡大・縮小する
 --・重ね合せがうまくできたら、画像から必要な部分を切り抜く
 --・回転で生じた周囲の余白部分を透明化する
 --・完成した画像をgifファイルとして保存する

◆古地図の画像ファイルをマップにのせる
 頼りにするのは、Googleのグラウンドオーバーレイ機能:
 --・半透明の古地図画像をのせると、下のGoogleマップが透けて見える
 --・画像は、マップの移動、拡大・縮小に連動する
 --・画面上に配置するボタンをクリックして、画像の表示・非表示を切替えられる

 この機能を利用する良いサンプルをwebで探すのに2日かかった。
 画像をマップに配置する北東端の緯度・経度を算出するJavascriptを書くのに4日間。
 画像をマップに表示するJavascriptを書くのに2日間。

 ついで、表示した古地図画像を非表示にしようと四苦八苦でギブアップまで2日間。
 ここは想定していたやり方ではダメで、他のやり方に替えることにした。
 結局、10日間かけたが、公開できる成果は上がらなかった。