2011年2月19日

隠居の探鳥ウォーク:泉北ニュータウン栂地区で観察した水鳥をプロットしてみた

 【隠居のGoogle Maps: (続)Google Maps API を使って野鳥出現地点をカスタム・マーカーでプロットする】で記録した方法で、泉北ニュータウンなどで観察・撮りためた水鳥の撮影地点をプロットしてみた。(一部は除く) これは、【野鳥の写真サムネイル】の【大阪泉州の池・川などで撮った写真】に、【撮影地点地図】というボタンを置いて、これをクリックすると Google Map の形式で観察地点にカルガモ(水鳥を代表させている)マークが表示されるようにした。     

 先のエントリーでも記録しているが、この地図を作成するには、以下の項目を実施しなければならない。結構時間がかかる作業であるが、記録としては面白いのではないかと思っている。
  1. 掲載する写真を集めた Picasa のWeb Album を作成する。
    アップロードする写真は【野鳥の写真サムネイル】を参考にしながら、ソースからすでにレンタル・サーバーにアップしている写真のファイル名を選択する。
  2. Google Maps API の JavaScript に呼びこんでくる XML file を作成する。ここで必要なタグは、10進法の経度(lat)・緯度(ing)、表示する写真のファイル名(html)、場所名(label) である。
    私の場合、XMLnotepad でもととなるファイルを開き、新しい名前で保存する。
  3. 経度・緯度は、Web Album の写真の情報をC&P する。経度・緯度情報がない場合は、Google Map で撮影地点情報を取得し、Web Album にある該当写真に10進法の経度・緯度の場所情報を付加する。
  4. 表示する写真のファイル名は、【野鳥の写真サムネイル】のソースからC&P する。また、label の地名も【野鳥の写真サムネイル】のソースから取得する。
  5. 【撮影地点地図】となる Google Maps API のJavaScript を含むHTMLを作成する。(もととなるソースを新しい名前で保存する。) ソースをいじる箇所は、
    • 地図のタイトル名
    • 立てるマーカーの画像ファイル名
    • 地図の中心とする経度・緯度と縮尺
    • 呼びこんでくる XML file名
  6. 【野鳥の写真サムネイル】ソースHTMLに、地図を表示させるボタンを設置するコードを挿入する。
  7. このボタンをクリックすると、新しいウィンドウを開き【撮影地点地図】を表示する JavaScript を作成する。このJavaScript は、 ひとつの地図につきひとつの JavaScript が必要であり、【野鳥の写真サムネイル】ソースHTMLと同じフォルダー(サーバー)におき、【野鳥の写真サムネイル】ソースHTMLの<head> 部に JS file を呼びこんでくるコードを挿入する。


 このようにして作成した撮影地点地図は、水鳥だけでなく、【カワラヒワ】 【ホオジロ】 【ツグミ】 でも作成した。随時、時間を見て追加していく予定である。また、従来の地図に新しく撮った写真地点も追加する予定である。

コメントする

(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)