2017年1月 5日

隠居の散策:泉北ニュータウン栂地区、12月の生き物たち(3)

昨年12月には、冬の風物を楽しむ下のような別のご近所散策コースを歩いている。このコースは泉北高速鉄道の隣駅「光明池」近くにある鴨谷池を回るコースである。この池には、冬場になると少し変わった種の水鳥が飛来する。ただ、この池は大きくて、鳥たちはズームを使っても捉えきれない沖の方で泳いでいる。
 このコースのもう一つの楽しみは、和田川から美多弥神社にあがる道路沿いにあるお屋敷の庭に咲く花などである。この季節は、山茶花や南天・クロガネモチの赤い実などが観覧できる。
 また、もう一つの楽しみは、泉北高速鉄道沿いの側道に植え込まれているいろいろな低樹木が種々な樹の実をつけていることである。泉北ニュータウンの道路沿いに植えられている樹木はどういうわけか雑多である。
 この日は、いつもの α7Ⅱ+FE24240 zoom のセットとは別に、NEX-7+SEL50F18 を携行して、いろいろと撮影をたのしんだ。ミラーレス・デジカメは軽くて持ち歩くのは便利である。

;クリックすると大きな写真になります。 2016/12/20 和田川(堺市)
コガモ♂
餌をつつきながら時々羽ばたきをする。なんのためかよくわからない。エクリプスから抜けて完全に繁殖羽となっている。頭の黒と茶色のコンビが特徴的だ。
SONY ILCE-7M2 SEL24240 zoom
240.0mm digitalzoom X3 crop 絞り優先 f6.3 1/250s ISO100 露出補正 0
;クリックすると大きな写真になります。 2016/12/20 美木多(堺市)
南天
このお屋敷の庭にある南天は、白い実がなる株と赤い実がなる株がある。F9.0まで絞ると後ろの赤い実もはっきりとわかる。
SONY NEX-7 SEL50F18 OSS
50.0mm 絞り優先 f9.0 1/80s ISO250 露出補正 +0.3
161220_040.jpg 2016/12/20 鴨谷台(堺市)
タチバナモドキ
泉北1号線の側道沿いに植わっている。初夏には、白い花が咲くようだ。いちど撮りにきたい。
SONY NEX-7 SEL50F18 OSS
50.0mm 絞り優先 f8.0 1/80s ISO400 露出補正 +0.7

2016年12月25日

隠居の散策:泉北ニュータウン栂地区、12月の生き物たち(1)

12月に入ってからも、なにやかやとあって、散策ができていないが、冬鳥の飛来はどうなっているだろうかと気になり、3回に分けて違うコースを歩いてみた。
 このような散策のときには、スマホのアプリ<山旅ロガー>で、歩いた経路を記録している。 Google map 地図作成機能に、この記録 KML ファイルを読み込んで、歩いた経路と撮影ポイントをプロットしてみた。

12月7日の散策
上神池を中心に


;クリックすると大きな写真になります。 2016/12/7 上神池(堺市)
ホシハジロ
この池には、他にキンクロハジロ、カイツブリ、コガモもいる。
SONY ILCE-7M2 SEL24240 zoom
240.0mm digitalzoom x2 絞り優先 f6.7 1/1000s ISO400 露出補正 +0.7
;クリックすると大きな写真になります。 2016/12/7 和田川(堺市)
モズとジョウビタキ
私は初めてであるが、この2種はよく一緒にいるらしい。
SONY ILCE-7M2 SEL24240 zoom
240.0mm digitalzoom x2 絞り優先 f6.7 1/3000s ISO400 露出補正 -0.7
 

2016年12月11日

隠居の散策:千早赤阪村金剛山のロープウェイに乗る

昨年の暮に、学生時代に参加していた教育キャンプ場のキャンプ長だった方が亡くなった。一周忌前に、偲ぶ会が開かれた。それに参加するために、埼玉から同期の友人がやってきた。その日、梅田で宿泊した翌日、金剛山に行きたいというので、付き合った。
 今年のはじめ登山中に脚の筋肉を痛め、まだリハビリ中ということで、ロープウェイで上るという。奈良の友達二人も付き合ってくれた。
 その一人が何回か来たことがあり、山上を案内してくれた。頂上にある葛木神社にも参って、さわやかな秋の日を楽しんだ。
 記録は、埼玉の友に教えてもらったスマホのアプリ<山旅ロガー>で記録し、それから出力したKMLファイルをもとに、Google Map で歩行地図を作成してみた。

2016年11月13日

隠居のパソコン備忘録:Google Map で旅行地図を作成する

先日から、独自のルート地図を作るなどで Google Map をいろいろといじっていて分かったのだが、スマホアプリの山旅ロガーなどで記録したKMLファイルがなくてもルートを表現した旅行地図を作成をできることが分かった。
 当サイトのブログ Studio YAMAKO の執筆者は旅行した記録をこまめにアップロードされている。この旅行地図を、今までは Google Maps API という Javascript を使ったユティリティで作成して、Studio YAMAKO に、収載してもらっていた。。
 今回、郡上八幡や高山をバスツアーした記録を4回に分けてブログにアップロードされている。これを参照して旅行ルート地図を作成したので、手順を記録として残して置きたいと思う。

Google Map でルートつき旅行地図を作成する方法
  1. Google Map を起動する。
  2. 画面左上の検索窓左にあるメニューアイコンgmap02.JPGをクリックすると表示される「マイプレイス」をクリックすると表示される画面で、さらに「マイマップ」をクリックすると枠の下の方に地図を作成という青い文字が現れる。
  3. 地図を作成をクリックすると「無題の地図」と表示されたポップアップが表示される。
    gmap03.JPG

  4. ここで、ツールアイコン群から、ルート追加ボタンtour12.JPGをクリックし、左ボックスの下に表示される交通手段がになっていることを確認して、その下の枠に出発点から順次、マーカーを立てたい場所を入力する。すると、下のスクリーンショットのように、ルートが自動的にルートが表示される。
    tour11.JPG

  5. 地点を入力し終えると、下のようにルートが描画される。地点名は、例えば平湯温泉と入力すると何地点か候補を表示してくれるので、適切と思われる名前を選択すればよい。
    tour13.JPG

  6. この地図を左ボックスの右上にあるメニューボタンgmap16.JPGをクリックすると表示されるリストから、「KMLにエクスポート」を選択する。すると、下のようなボックスが表示されるので、セレクトボックスで<XXX地点からXXX地点へのルート>を選択し、<KMLファイルにエクスポートします・・・>にチェックを入れて、【ダウンロード】ボタンをクリックする。
    tour14.JPG

    KMLファイルに任意なファイル名をつけて、任意のフォルダーに保存する。

  7. 一旦、Google Map を閉じて、再度起動する。そして、上記 1. 2. まで実行する。

  8. ここで、左上ボックスの無題レイヤーの下のインポートをクリックする。すると、<インポートするファイルの選択>という画面が出るので、「アップロード」タグになっているのを確認して、【パソコンからファイルを選択】ボタンをクリックする。

  9. すると、ファイルを選択する画面となるので、先ほど保存した KML ファイルを読み込む。すると多分下のスクリーンショットのような縮尺の大きな地図が表示される。
    tour16.JPG

  10. 地図の縮尺の大きさは、右下のtour17.JPGボタンでも調整できるが、左ボックスの上部の「プレビュー」をクリックすると下のように適切な大きさで表示してくれる。
    tour15.JPG

  11. ここで、ボックス上部の「編集します」をクリックすると各マーカーを編集できるようになる。マーカーにカーソルを合わせクリックすると、下のスクリーンショットのように、マーカーの色やスタイル、リンク先のURL 表示、関連写真や動画の挿入などができるツールアイコンが表示される。
    tour19.JPG

  12. 用意されているマーカのスタイルは、例えば下の例のように、場所のジャンルだけでも数多くのスタイルの中からチョイスできる。
    tour18.JPG

  13. そのようにして、Google Map として機能する旅行地図を作成したものが以下の地図である。


2016年11月11日

隠居のスマホ備忘録:山旅ロガーを使う。測定結果を Google Map に表示する方法

前回のYahoo!地図印刷のエントリーを書くために、いろいろとウェブサーチをしているときに、Yahoo! が地図上にルートを描くことのできる「ルートラボ」というユティリティを提供していることが分かった。
 この「ルートラボ」を使って、ご近所散策ルートを作成したのが、下の地図である。作成方法などについては、ルートラボの使い方に詳しく載っている。
 旅行後の記録として、地図に記載しておくのは便利かもしれないが、まだ使い方をよく理解していないので記録ができない。

Yahoo! ルートラボによる地図作成

 

 この「ルートラボ」の学習と関連して、Google MAP での地図作成を再度復習してみると、前回2014年11月7日に記載した手順からさらに進化していることが分かった。 それで上で「ルートラボ」で表示した近頃散策しているコースを、スマホのアプリ山旅ロガーで記録した結果をもとにルート地図を作成した方法を記録しておきたいと思う。
 最新の方法で作成した地図を以下に示す。 

Google Map での地図作成



 2014年11月7日に記載した手順を最新の方法に修正して記録しておきたい。
山旅ロガーで記録したKML ファイルで歩行記録地図を作成する方法
 
  1. Google Map を起動する。Google のアカウントを持っていない場合には、新たに登録する。アカウントをひとつ持っておけば、Gmail(Web mail)、Google chrome(ブラウザ)、You Tube 、Google Map(地図検索)、Google ドライブ(クラウド型データ保存)などを利用できる。特に、Google ドライブは、スマホからデータを転送するときに便利なので、インストールしておきたい。
    起動すると登録したアカウントの場所を中心とする地図が表示されるはずである。

    Google 地図検索画面
    gmap01.JPG

  2. 画面左上の検索窓左にあるメニューアイコンgmap02.JPGをクリックすると表示される「マイプレイス」をクリックすると表示される画面で、さらに「マイマップ」をクリックすると枠の下の方に地図を作成という青い文字が現れる。
  3. 地図を作成をクリックすると「無題の地図」と表示されたポップアップが表示される。
    gmap03.JPG

  4. 上の画面で、インポートをクリックすると、下のようにKMLファイルを選択する画面となる。私はスマホで山旅ロガーに記録したKMLファイルを Google ドライブに転送しているので、<Google ドライブ>タグをクリックして <マイドライブ>を開き収納されているKMLファイルをインポートした。
    gmap04.JPG

  5. 最近の散策で山旅ロガーを使って記録した KMLファイルをインポートすると、下のスクリーンショットのように表示された。
    gmap07.JPG

  6. このとき、<プレビュー>タグをクリックすると適切な縮尺で表示される。
    ここで<編集します>をクリックすると下のスクリーンショットのように編集のためのボタンガ表示される。
    この手順以降の地図修飾手順がが、2014年11月7日のエントリーと大きく変わっている。
    gmap06.JPG

  7. <マーカーを追加>ボタンgmap11.JPGをクリックするとカーソルが十字マークになるので、目的とする位置でクリックしてマーカーを設置する。
    マーカーを設置するとその位置にポップアップ画面が表示されると同時に、左のポップアップ画面のマーカーのタイトルにカーソルすると、スタイルアイコンgmap13.JPGが出て来る。ここで<マーカーアイコンの色や形を選択できるようになっている。
    gmap14.JPG
  8. マーカーを保存し、再度マーカーをクリックすると、編集アイコンが表示されるので、<編集ボタン>でリンク先を挿入したり、<カメラボタン>をクリックして該当マーカーに関する写真をアップロードしたりできる。
    gmap15.JPG


  9. 上のいろいろなツールを使って、地図を編集し終わったら、左上のボックスの<コマンドボタン>gmap16.JPGをクリックすると表示されるボックスで「地図をコピー」を選択すると「Google マップ」⇛「マイプレイス」⇛「マイマップ」に保存できる。
    上の同じボックスで、「自分のサイトに埋め込む」を選択すると、HTMLコード( <iframe ・・></iframe>)が表示されるの、これをコピーしてブログに貼り付ければ、ブログ上に作成したMapが表示できる。

 行程を記録する KML ファイルがあれば、ルート地図の作成はなんとかなりそうである。もう少し学習して、旅行地図を google maps API の助けなしに作ってみたいと考えている。

2016年10月15日

隠居のパソコン備忘録:ヤマレコ掲載の山行き記録から Yahoo! 地図を印刷する

Walking が好きで、いろいろな街道などを歩き回っている友人から、「ヤマレコ」というサイトに掲載されている山行き記録から、Yahoo!地図をコピーし印刷できる良い方法がないかとの相談があった。
 このヤマレコには、全国山好きな人たちが登山記録を投稿しており、山行きの計画をする人は参考にしているようだ。この記録の中に、「地図/標高グラフ」という項があり、その中の<Yahoo! 地図>をトリミングして印刷したいという。このヤマレコには、「地図プリで印刷」というサービスが提供されているが、これではあまり役に立たないらしい。
 パソコンに表示される画面を切り取って印刷するには、Windows10 で提供されている OneNote を利用するのが便利と思う。従って、以下に記録する方法は、何もヤマレコの地図をトリミングし印刷することに特定しているわけではない。Web のページの一部を切り取って印刷する場合には、全て適用できる。

例示として、ヤマレコの記録ID:378410 で投稿されている阪急芦屋川駅から有馬温泉までのハイキング記録で表示される地図の印刷の手順を記録してみたい。

  1. Windows10 のブラウザ Microsoft Edge を立ち上げる。
  2. ヤマレコのサイトから、記録ID:378410 を開き、地図/標高グラフの項を表示する。
  3.   
  4. 地図から、Yahoo! 地図を選択する。
  5. 画面左上の縮尺バーを使って、好みの大きさに画面を拡大し、印刷したい部分を画面に表示する。
  6. Edge の画面右上にある、<Web ノートの作成>アイコンyamareko02.JPGをクリックして、OneNote を立ち上げる。
  7. すると左上に、クリップ・アイコンyamareko01.JPGが表示されるので、これをクリックすると、画面が半透明に黒く反転し、「コピーする範囲をドラッグする」と大きく表示される。
  8. 画面上で十字のカーソルキーをマウスでドラッグして印刷したい部分をトリミングする。その状態で、右上の<Web ノートへ保存>アイコンyamareko05.JPGをクリックする。
  9. すると、下のようなポップアップ画面がでるので、保存ボタンをクリックする。このとき、デフォールトでは、保存するページは「クイックノート」になっている。もし、ページがすでに作成されている場合には、そのページを選択してもよい。

    yamareko07.JPG

  10. 保存ボタンをクリックすると「ノートが保存されました。<ノートを表示>」というポップアップがでるので、<ノートを表示>ボタンをクリックする。
  11. すると、下のように OneNote の<ホーム>に、印刷したいページが表示される。

    yamareko11.JPG

  12. ここで、画面左上のナビゲーション・アイコンyamareko12.JPGをクリックすると、 下の画面のように、印刷ボタンが表示されるので、これをクリックすれば、設定しているプリンター で印刷することができる。

    yamareko10.JPG

     map の異なる部分を印刷するには、上の順序を繰り返せばよい。
  13. 上記のように、ホームページから印刷はできるのであるが、できれば<fromYAMAREKO>というようなページ(フォルダー)を作っておいて、そのページに保存しておきたい。
 なお、例示に取り上げたハイキングのルート表示は、スマホの「山旅ロガー」というアプリをつかっているようだ。
 ヤマレコの有料サイト プレミアム(月額360円)を使えば、スマホに目的とする地図が見られるようだ。

2015年1月19日

隠居のドライブ:ドライブ・レコーダーを試してみる


 どこかにドライブに出かけるとき、車を運転しながら前方の風景をカメラで撮りたくなる時がある。だが、運転中は危険である。ブログに旅行記などを記録するときなど、道案内の道路標識や前方に見えた景色などを写真で掲載できれば面白いと思っていた。
 車で事故を起こした時の状況を記録するドライブ・レコーダーのパンフレットを見ていると、車のスイッチが入っている間はずーっと記録しているらしい。そして、事故を起こして衝撃を検出した場合には、衝撃録画データが記録される仕組みになっている。言うまでもなく、ドライブ・レコーダーは、そのためのものであり、保険みたいものである。
 が、その本来の機能から外れて、ドライブ記録に使えば面白いのではないかと検討してみた。デジカメで動画を撮影した時と同じように、一瞬を切り出して静止画にすることもできる。これは使えそうだ。
 隠居の道楽として、comtecという会社のドライブ・レコーダー(isafe simple)を装着してみることにした。配線などややこしいから、ディーラーまかせである。

 記録は、microSD カードに記録される。記録される映像は、映像の大きさが、1280x720px(HD) と 640x360px(SD) の2つ、フレームレートは30,15,10.5fps の4つから選択できるが、ディーラー設定では HD 30fps となっている。付属の8GB microSD カードでは、目安として約48分しか記録できないようだ。それより長い場合は、上書きされていく。もう少し、フレームレートを落とすとか容量の大きいmicroSD カードすれば、長時間記録できそうである。microSD カードは、32GBでも2000円弱であるから、差し替えをもっているといいかもしれない。

 実際の記録を確認してみた。ディーラーで装着した後は、ACCスイッチが ON であるかぎり(エンジンがかかっているときはもちろん)、録画が始まっている。
ドライブ・レコーダーの本体から microSD カードを抜き出し、PCのカード・リーダーに挿せば表示されるフォルダーに iSafeViewer.exe というビューアソフトが表示されるので、これをを実行すると下のスクリーンショットのように表示される。

ビューアソフトの画面 150118-3.JPG

 動画は、約1分ごとに分けて記録されている。画面の右上には、Google Map で現在地がマークされている。この地図は、車が移動するにつれて変化していく。 isafe では、位置測定はアメリカのGPS だけでなく、ロシアのグロナス、日本のみちびきも利用して精度の向上を図っている。
 ビューアソフトの画面下の、動画アイコンmovie.JPGをクリックすると、該当ファイル(AVI ファイル)を保存することができる。また、カメラアイコンphoto.JPGをクリックすると画面に表示されている静止画を下のスクリーンショットのように切り取り保存することができる。形式は、jpg である。

動画から切り出した静止画 driverecorder-005-010-000698.jpg



 ディーラーで装着した後、自宅に帰る道で記録された動画の一部を取り出して保存し、Youtube にアップしてみた。まともな逆光であるが、まあまあの記録になっているのではないかと思う。 鳴っている音は、カーオディオとウィンカーの音である。
追記(2015/1/23): 動画の後ろで流れている音は、カーオーディオで流していたJazz であったが、Youtube で著作権に引っかかるとの warning が表示された。それで、動画の音声は途中から削除した。
音をミュートする設定もできるので、今後は音無しの録画にしたい。

記録されている動画の一部



2014年11月 7日

隠居のスマホ備忘録:山旅ロガーを使う。(3)測定結果を Google Map に表示する他の方法


 山旅ロガーで得られたトラッキング・データ KML ファイルをGoogle Map で表示する方法については、前回のエントリーで記録した。そのような作業をしているうちに、もっと簡単で便利な方法を Google が提供していることが分かった。今回は、その方法について記録しておきたいと思う。

 地図検索に使ってきた Google Map は、今年の2月くらいに新しくなっている。
 新しくなった Google Map では、オリジナルのカスタム マップを作成して共有することができる。この場合に、山旅ロガーで得られる KML ファイルを使うことができる。

 作成方法を、以下順を追って記録する。
  1. Google Map を起動する。Google のアカウントを持っていない場合には、新たに登録する。アカウントをひとつ持っておけば、Gmail(Web mail)、Google chrome(ブラウザ)、You Tube 、Google Map(地図検索)、Google ドライブ(クラウド型データ保存)などを利用できる。
    起動すると登録したアカウントの場所を中心とする地図が表示されるはずである。

    Google 地図検索画面
    new-map-01.JPG

  2. 画面左上の検索窓をクリックすると表示される「マイマップ」をクリックすると、作成ボタンが現れる。

    new-map-03.JPG

  3. 作成ボタンをクリックすると「無題の地図」と表示されたポップアップが表示される。
    new-map-06.JPG

  4. 上の画面で、インポートをクリックすると、下のようなKMLファイルを選択する画面となる。どのような形式のファイルか確認はしていないが、CSV ファイルでもOKのようだ。
    new-map-07.JPG

  5. 前回のエントリーで使った山旅ロガーで得た KMファイルをインポートすると、下のスクリーンショットのように表示された。
    new-map-08.JPG

  6. この画面で、例えば 15 のマーカーをクリックするとこの地点について編集できる画面となる。
    new-map-09.JPG

  7. この編集画面で、様々なことができる。編集ボタンをクリックするとマーカーをクリックした時に表示されるテキストやURL へのリンク、写真の表示などを指定できる。
    また、左枠内のマーカーにカーソルを合わせた時に表示されるnew-map-12.JPGボタンをクリックすると下の画面のように数多くのアイイコンを選択できるようになる。アイコンは、自分が作成したものでもOKのようだ。
    編集画面の上部にあるツールアイコンのライン描画new-map-13.JPGを使うと自由に線を引くことができる。
    また、地図の表題を変更するのもこの画面でできる。
    new-map-10.JPG

  8. 上の編集のためのツールを使って、下のような地図を作成することができる。
    new-map-11.JPG

  9. この画面の右上にある緑の「共有」ボタンをクリックするとメールやFacebookでこの地図を送信できたり、ブログなどで公開できたりする。
    右をクリックすると地図が表示される。駅への道地図 


 このGoogle Mapでオリジナルのカスタム マップを作成する方法を使えば、散策するときにスマホの山旅ロガーを起動し、行動を記録しておけば、ブログのエントリーに面白いかもしれない。いろいろと試してみたいと思う。

2014年11月 3日

隠居のスマホ備忘録:山旅ロガーを使う。(2)測定結果を Google Map に表示する


 前回、スマホのアプリ山旅ロガーを使う方法について記録した。
 このトラッキング測定結果は、GPX というファイルとKML という形式のファイルでPC に送信することができる。GPX ファイルについては、ネットにあまり自分がやりたいことにぴったり来る情報がない。KMLファイルは、XML ファイルの一種のようなので、多少馴染みがあるので、こちらでトライしてみることにした。
 PC への送信方法は、メールにファイルを添付する方法と Bluetooh で送信する方法がある。PC の近くでの作業では、どちらをとっても大差はない。

測定結果をPCに送信する
測定結果ファイルの機能ボタンをタップすると 左の画面で「共有・出力」ボタンをタップすると;クリックすると大きな写真になります。 ファイル送信方法の選択画面;クリックすると大きな写真になります。"
測定結果一覧で該当ファイルの機能ボタンをタップすると、上のような画面になる。 左の画面で「共有・出力」ボタンをタップすると右の画面になる。 上の画面で Gmail または Bluetooth を選択して、指示に従いPC に送信する。


上の真ん中のスクリーンショットにあるように、KMLファイルを出力するときには、3つの形式から選択できる。
  • ①トラッキングしたルート(ライン)のみを表示する。
  • ② ①に時刻をつける
  • ③ 測定地点にマーカーを立て、時刻と text を表示する

 このような KMLファイルをPC に取り込んで、Google Maps API 表示するサンプルを見つけた。
 このサンプルコードを参考に、自宅から栂・美木多駅までの測定結果の ② の形式KMLファイルを取り込んだHTMLページを作成すると次のように表示された。


 上の地図は、Google Map の機能を持っているので、ストリートビューが見られるなど、駅から自宅までの道案内に有用かもしれない。

 同じトラッキングデータを上の ③ の形式で取り込んで、上のサンプルコードの kml アドレスを変更して Google Map に表示してみると、測定地点のマーカが連なって表示される。
 この時のKMLファイルの中身を覗く方法がわからなかったが、KMLがXMLファイルの一種であることにヒントを得て、XML notepadで開いてみると、これで編集できることが分かった。(もちろん、秀丸のようなテキスト・エディタでもできる)
 だが、固有のタグについては、かなりの学習が必要なようだ。とりあえず、分かりそうなタグに見当をつけて、試行錯誤を繰り返して見た。

 そのようにして作ってみた地図を下に表示する。


  この地図では、もともと38個あったマーカーを間引きして9個にし、
  • 地点1を"自宅"の文字に置き換え、
  • 駅への通り道にある風邪を引いた時などにお世話になる清水内科近く(15の地点)にはGoogle サーチの結果リンクを、
  • 24の地点(池のそば)のマーカ(24の地点)には、その地点で撮った水鳥の写真を表示するリンクを、
  • 終点の栂・美木多駅には、泉北高速鉄道のサイトで表示される栂・美木多駅ページヘのリンク
を挿入してみた。
  写真表示には、撮った写真をかっこ良く表示させる、Google Maps API を使って地図を作成する時に使っている、lightbox のコードを追加してみると上手く動いてくれた。

 上の地図のためのコードは、以下である。

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:v=\"urn:schemas-microsoft-com:vml\">
<head> 
<meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no\" />

<!-- jQuery lightbox2.51 -->
<script type=\"text/javascript\" src=\"http://n-shuhei.net/atelier/Jquery2.51/js/jquery-1.7.2.min.js\"></script>
<script type=\"text/javascript\" src=\"http://n-shuhei.net/atelier/Jquery2.51/js/lightbox.js\"></script>
<link rel=\"stylesheet\" type=\"text/css\" href=\"http://n-shuhei.net/atelier/Jquery2.51/css/lightbox.css\" media=\"screen\" />

<script type=\"text/javascript\" src=\"http://maps.googleapis.com/maps/api/js?sensor=false&hl=ja\"></script>
<script type=\"text/javascript\">
  function initialize() {
    var initPos = new google.maps.LatLng(34.490435, 135.482852);
    var myOptions = {
      noClear : true,
      center : initPos,
      zoom : 15,
      mapTypeId : google.maps.MapTypeId.ROADMAP
    };
    var map_canvas = new google.maps.Map(document.getElementById(\"map_canvas\"), myOptions);
    
    var kmlUrl = \"http://n-shuhei.net/atelier/maps/KML-test/141025P.kml\";
    var kmlLayer = new google.maps.KmlLayer(kmlUrl);
    kmlLayer.setMap(map_canvas);
  }

</script>
  </head>

<body onload=\"initialize()\">
  <div id=\"map_canvas\" style=\"width:100%; height:500px\"></div>
</body>
</html>


 ここで、指定しているKMLファイルは、テキストコードは以下である。実際の編集は、XML notepad で作業している。


<?xml version=\"1.0\" encoding=\"utf-8\"?>
<kml xmlns=\"http://www.opengis.net/kml/2.2\">
  <Document>
    <name><![CDATA[2014-10-25 09:15:02]]></name>
    <description><![CDATA[自宅ー駅:2014-10-25 09:15~2014-10-25 09:33]]></description>
    <Placemark>
      <name>自宅</name>
      <description>2014-10-25 09:15:02:</description>
      <TimeStamp>
        <when>2014-10-25T00:15:02.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48277,34.490517,30</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>5</name>
      <description>2014-10-25 09:16:44</description>
      <TimeStamp>
        <when>2014-10-25T00:16:44.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48332,34.49017,37</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>10</name>
      <description>2014-10-25 09:18:55</description>
      <TimeStamp>
        <when>2014-10-25T00:18:55.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48485,34.489635,33</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>15</name>
      <description><![CDATA[<a href=\"https://plus.google.com/104149416183172006475/about?gl=jp&hl=ja\">清水内科</a>]]></description>
      <TimeStamp>
        <when>2014-10-25T00:21:05.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48608,34.488583,45</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>20</name>
      <description>2014-10-25 09:23:15</description>
      <TimeStamp>
        <when>2014-10-25T00:23:15.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48712,34.487377,48</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>24</name>
      <description><![CDATA[<a href=\"http://n-shuhei.net/atelier/photo_birds/DSC04864.JPG\" title=\"\" rel=\"lightbox[]\">マガモ交雑種</a>]]></description>
      <TimeStamp>
        <when>2014-10-25T00:25:00.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48792,34.486824,46</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>29</name>
      <description>2014-10-25 09:27:12</description>
      <TimeStamp>
        <when>2014-10-25T00:27:12.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48877,34.48632,54</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>35</name>
      <description>2014-10-25 09:30:48</description>
      <TimeStamp>
        <when>2014-10-25T00:30:48.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.49054,34.485283,53</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>38</name>
      <description><![CDATA[<a href=\"http://www.semboku.jp/station/toga_mikita/outline/\">栂・美木多駅</a>]]></description>
      <TimeStamp>
        <when>2014-10-25T00:33:30.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48999,34.484875,61</coordinates>
      </Point>
    </Placemark>
  </Document>
</kml>


 もう少し高度な加工ができそうであるが、一段の学習が必要のようだ。痴呆予防には役立つかもしれないので、もうちょっと遊んでみたいと思っている。

2014年9月20日

隠居のドライブ:若狭路を走る


 車が新しくなったことや、舞鶴若狭自動車道の小浜から敦賀までが、この7月に開通したこともあって、前から泊まってみたいと思っていた三方五湖の宿を求めた。しばらく家内と泊まりがけの旅行もしていない。

 ドライブするときには、できるだけ今まで走ったことのない道を走ってみたい。が、新しい道は覚束ないから、カーナビ頼りである。新しい道はどんどんできる。カーナビのデータベースは追い付いていないことが多い。ただ、最近つけたカーナビでは、マップオンデマンドというシステムがあり、新しい道の開通一週間後には、カーナビのHDDにダウンロードできる。
 今回も京都府・福井県の最新データをダウンロードしていった。その場合は、同時に全国の高速道路の最新情報もダウンロードされるから、今回走る予定の京都縦貫道や舞鶴若狭自動車道も新しいデータに更新されているはずである。
 このマップオンデマンドというシステムのおかげで、一度も道に迷うことはなかった。目的地は、スマホのアプリ NaviCon を使って設定した。 NaviCon では、全工程の設定もできるようだが、今回は行きたい場所をブックマークに登録しておいた。予定している行程は、その時の状況によってしばしば変更するからだ。一つの目的地から、次の行きたところを設定する場合は、前回設定していた目的地を消去し、新たな目的地をスマホ NaviCon のブックマークから選び、カーナビに送信するだけでいいから,そのほうが簡単である。

 最初の目的地を舞鶴港に設定し、通過地点に久我山JCTを指定すると、堺市南区の我が家からは、阪和自動車道⇒近畿自動車道⇒第二京阪道路⇒京滋バイパス⇒京都縦貫自動車道⇒舞鶴若狭自動車道⇒舞鶴東ICのコースをたどる。京都縦貫自動車道の丹波IC から京丹波わちIC の間は、まだ工事中であり一般道を40分ほど走らなければならない。京丹波わちICの手前の一般道にある道の駅・和(なごみ)には、地元産の農作物などいろいろのものが置いてあるが、高速道がつながれば車を駐める人は、ぐっと少なくなるだろう。

 自宅を6時40分ごろに出発し、途中2回小休憩をしたが、舞鶴港についたのは、9時20分ころだったので、2時間40分ほどで到着したことになる。
下図は、ドライブした場所を Google Maps API を使って、プロットしてみたものである。


 簡単に行けるのに、何かと有名な舞鶴港にはこの歳まで来たことはなかった。舞鶴港の前島埠頭には車を駐めるスペースがたくさんあり、多くの人たちが釣り竿を出していた。何を釣っているのかと聞いてみるとサビキ釣りでアジを釣り、それを餌にヒラメを狙っているが、あまり釣れないと言っていた。
 ここは、海上自衛隊の基地でもある。埠頭からは、接岸しているイージス艦2隻が見えた。近くの桟橋には、巨大な浮きブイが置いてある。戦艦が接岸するときに使うもののようだ。

 次の目的地を高浜城址城山公園に設定して、カーナビに言われるまま海岸沿いの一般道を走ると、40分ほどで到着した。
 城山公園には、無料の駐車場が5台ほどあり、シーズンオフの平日とあって駐めることができた。駐車場奥は、手入れの行き届いた芝生が海岸線に続いており、 WEB などで紹介されている明鏡洞(めいきょうどう)は、すぐそこにある。海水は透き通っており、さすが美しい日本海である。
 明鏡洞の横の小さな岬にある散策路をたどると綺麗な磯を見渡せる展望台もある。公園の反対側には、砂浜の海水浴場があり、水着姿の女性が犬を泳がせていた。

 次に目的地を設定したのは、小浜の道の駅「若狭おばま」である。若狭路にある小浜も、貫地谷しほり主演の朝ドラ「ちりとてちん」を見てから、一度行ってみたいと思っていた。だが、もう一つ行きたいと思われる場所はない。ただ、若狭蒔絵塗り箸を求めかったので、道の駅に行ってみることにした。この道の駅も新しいが、もう一つ購買意欲はわかなかった。

 昼時になったので、調べてあった三方五湖にあるうなぎ屋に車を走らせることにした。うなぎ屋は四軒調べてあったが、これはと思っていた「淡水」といううなぎ屋に行ってみると本日休業の看板。次に「徳右エ門」というところに行ってみると団体が入っていて、当分空きそうにないという。確かに、駐車場にはバスが駐まっている。そこからすぐにある丹後街道沿いにある「源与門」に行ってみると、30-40分待ちだがありつけそうであった。結局、うな重にありついたのは、1時半を過ぎていた。が、空腹には何よりものご馳走であった。

 地図を見ると今晩宿泊する若狭町営旅館「水月花」は、そんなに遠くない。時間は少し早いが、荷物だけも置こうと行ってみた。だが、チェックインは3時からということで、30分あまり時間がある。ホテルの近くに入り口があるレインボーラインは、翌日登ることにして、三方五湖の先に突き出ている岬の端、常神まで行ってみた。
 新人社員だった頃、会社の仲間と民宿に釣りと魚を食べに出かけたことのある「神子」というところを過ぎて海岸沿いの走ると20分ほどで岬の突端「常神」につく。確か大昔は、道はついていなかったと思う。静かな漁港である。港内にあるいけすには、アオサギとトビがのんびりと留まっていた。

 ホテルに引っ返し、車に積んできていたクーラの缶ビールで一息入れたあと、大浴場に向かった。浴場は小さいが、誰も入っていない浴場の大きなガラス戸のすぐ向こうは、水月湖が見渡せる。やっぱり、手足をゆったりと伸ばせる温泉はいい。
 その夜は、天気が良ければ十六夜の月が見られるはずである。夕食のアルコールでうとうとしていたが夜9時頃眼を覚ますと、湖に面したガラス戸の向こうに、十六夜の月が湖面を照らしているのが見える。慌てて、カメラを手にベランダに出て、雲で月が隠れるまでシャッターを何回か切った。このようなシーンをどのように撮るのかの知識がない。プログラム・オートで撮った写真は、いずれも露光不足である。Picasa でレタッチすると何とか感じの出る写真となった。
 翌明け方、土砂降りの雨となった。6時過ぎ朝風呂に行く頃には、雨は上がり静かな朝となった。朝食は、Morning Cruise という、船で水月湖を遊覧しながら朝食を摂るオプションを申し込んでいた。熟年ライダーのグループや老人会的団体の参加もあってテーブルは満席である。
 お弁当の食事を終えて、デッキに出てクルーズを楽しんでいると、湖上に虹がかかった。明け方の強い雨のせいかもしれない。今日、走る予定の三方五湖を見渡せる山上公園に登る有料道路は、レインボーラインという。この辺りには虹がよくかかるのだろう。虹を撮った経験もないので、プログラムオートで撮った写真は虹が薄い。レタッチするとなんとか色彩がでてきた。

 レインボーラインを登り切った山上公園の駐車場から、梅丈岳頂上には、リフトかケーブルカーで上る。頂上からは薄雲がかかってくっきりとは見えないが、若狭湾や三方五湖が見渡される。福井県出身の五木ひろしの「ふるさと」の歌碑があり、来る人来る人がボタンを押すので、「ふるさと」のメロディがずっとかかっていた。また、恋人の聖地ということで「誓の鍵」がいたるところにかかっていたりする。「かわらけ」投げでは、家内が「二人がぼけないように」と記した土の皿を投げていた。

 三方五湖に別れて、敦賀に向かう。行ってみたいのは、日本三大松原という「気比の松原」だ。梅丈岳の頂上からは、1時間足らずで到着する。今度は、この7月に開通したばかりの舞鶴若狭道を走った。ナビは駐車場に誘導してくれる。バスが数台駐っており、近くの海岸では体操ユニフォームの中学生が、アチラコチラで車座になってみんな同じ弁当を食べている。修学旅行だろうか。あるグループがトビに弁当をさらわれたのか、今度は残った弁当を餌におびき寄せて仕返しをしよとしているがなかなかうまく行かない。
 京都の鴨川岸での飲食は、トビに注意ということがよく知られているのだが。

 敦賀では、氣比神宮にも行ってみたかった。ここの駐車場がわからなかった。周りをぐるっと回って裏の門の方に回ると、駐車場の看板はなかったが車のご祈祷をするところにかなり大きな駐車場があった。もう少し大きな神社と思っていたが、そこそこの大きさだった。特段に見るものもなく、本殿にお参りしただけだった。交通安全の御札を求めた社務所でどこかお薦めの昼食の場所はないかと尋ねて、教えてもらった蕎麦屋に行ってみると定休日だった。
 NaviCon で敦賀でブックマークに登録していた「日本海さかな街」に行く途中に、そば・麺類の店を見つけ、そこで昼食を摂ることにした。いささかお腹が空いていた。
 食後、国道27号線沿いにある「日本海さかな街」に行って、ぶらぶらとたくさんの海産物を売る店を歩いてみたが、もひとつ購買意欲がわかず、早々に退散した。

 少し早かったが、ゆっくりと帰宅の途につくことにした。敦賀ICから北陸自動車道⇒名神高速⇒京滋バイパス⇒第二京阪道路⇒近畿自動車道⇒阪和自動車道と乗り継いで帰宅したのは、午後4時頃であった。トリップメーターを見ると、この2日間の走行距離は 516.6km で、リッターあたり 21.7km を示していた。運転できる間に、またどこかに出かけたいと思っている。

 

2014年9月17日

隠居の旅行:青森の秘湯を巡る:蔦温泉・青荷温泉・酸ヶ湯温泉


 情報システム部門の仕事をしていた現役時代の某システム研究会の役員だった(まだ現役もいる)人たちが、年一回集まる行事がある。「露天風呂研究会」と称して、各地の秘湯を巡る旅をしている。昨年は、同じ9月の初旬に、高山・奥飛騨温泉郷を旅している。

 今年は、元会長夫妻が訪れて良かったという八甲田山麓にある蔦温泉とランプの宿として有名な青荷温泉を訪れるという計画が立てられた。

 日本旅行がアレンジした旅程では、大阪からの二人は伊丹空港からJAL で青森まで飛び、新幹線でくる東京組と新青森駅で合流することになっている。名古屋小牧空港から FDA というLCCで来た名古屋組2名と空港で合流して、3日間世話になるツアーバスに乗り込んだ。
 この旅行、温泉を楽しむことが主目的であるが、アルコール好きが多く、東京組が到着するのを待つ間、10時から空いていた駅のレストランで、ホヤの刺し身をあてに、再会を祝して乾杯した。東京組は、新幹線の中で一升瓶を開けたという。

 はじめに訪れた三内丸山遺跡は、日本最大級の縄文集落跡ということである。浅学の身にとっては、あまり有り難みがよくわからないが、野球場が計画されていた土地を掘り返していて発見されたという遺跡は広大である。野球場の工事を中止し、遺跡を保存するとの当時の北村知事の決断を掲載した1994年7月27日付け新聞が展示されていた。
 ボランティアガイドの案内で、一通り見学した後、施設内にあるレストランで昼食をしてから、八甲田山雪中行軍遭難資料館に向かった。

 新田次郎の小説『八甲田山死の彷徨』を原作とした高倉健主演の映画「八甲田山」の一部が上演される映像が15分ほど映写される。館の説明員は多弁である。建物横にある幸畑陸軍墓地は清掃が行き届いているが、亡くなった時の軍における地位がそのまま墓の大きさや場所に反映されているのには、いささか違和感を覚える。

 バスは八甲田山麓森林の中の山道を1時間あまり曲がりくねりながら走り、国道103号線沿いにある森に囲まれた一軒宿の蔦温泉に到着する。
 早速、浴衣に着替えて、古くからの内湯「久安の湯」に入る。熱い。蔦温泉の風呂はいずれも源泉の上に浴槽がありブナ材を使用した湯船の底板から湧き出す空気に触れていない「生の湯」ということである。確かに、風呂の下に敷かれた板の間から、熱い湯が湧いてくる。43.5度はあるということだ。

 翌早朝、もう一つの湯「泉響の湯」に浸ってから、朝食までの間、一周3kmという沼巡りの散策路を歩いた。ブナの森林浴は、気持ちが良い。鳥の鳴き声は、ときたま聞こえるが姿は見つけられない。トチの実が何回か音を立てて落ちてくる。
 朝食を済ませて、出発までまだ時間があるので、付近を歩いてみた。 蔦温泉には、大町桂月の墓がある。桂月は青森県の十和田湖と奥入瀬をことに愛し、晩年は同地の蔦温泉(現:十和田市)に居住し、1925年(大正14年)4月には本籍も蔦温泉に移したが、ほどなく胃潰瘍のため死去、57歳。と Wikipedia にはある。

 バスは奥入瀬渓流に向かう。2005年の11月に、奥入瀬にはレンターカーで訪れている。その時は、紅葉はもう終わっていたが、今回はまだ早い。その時は、渓流沿いの道は歩くことはなかったが、今回はバスツアーなので、1kmちょっとを歩くことができた。

 十和田湖の団体目当てのレストランで昼食を摂った。横には、中国から来られた方々が、昼食をとっていた。蔦温泉には、韓国の方々が泊まられていたし、近隣の国からの観光も着実に増えているようだ。
 40分ほどの遊覧船は、十和田湖をぐるっと回ってくれるが、緑が続く湖岸の景色はあまり変化がない。

 バスは、十和田湖の縁を巡ってから、緑一杯の国道102号線を外れて、ランプの宿青荷温泉に向かう。国道102号線を外れてからは、谷底に転げ落ちるように急坂を下っていく。
 谷底の幅10mほどの川沿いにある一軒宿は、ランプの宿という文字通り電気が通じている気配はない。スマホももちろん通じない。翌日の朝まで、電気のない夜を経験することになった。たまにはいいもんだ。
 この湯には、滝を見ながら浸かれる「滝見の湯」という露天風呂がある。泉質は炭酸泉であり、透明度の高い綺麗な湯である。風呂は、宿の敷地内に 5つありそのうち 2つが露天風呂である。宿の入り口にある「健六の湯」は、内湯ながら窓越しにせせらぎが見える最大の風呂であり、ゆっくりと手足が伸ばせる。
 LED 電球に慣れた眼には、ランプだけの夕食ははじめのうちは、何を食べているのかよくわからないが、段々と目が慣れてわかるようになってくる。

 翌日、八甲田で有名な酸ヶ湯(すかゆ)温泉に向かった。ここの公衆浴場は千人風呂といわれる混浴の広い風呂がある。男女の区分は、低い衝立があるだけである。
 泉質は、酸性硫黄泉(含石膏、酸性硫化水素泉) であり、白く濁っている。酸性がかなりキツイらしい。誤って金属製のバンドの腕時計をしたまま風呂に入ってしまったが、今も動いているところを見ると被害はなかったらしい。
 宿は、八甲田山中の一軒宿で登山帰りに立ち寄る登山客も多いということだ。入浴後、付近を散策してみると、日曜日とあって山登りの服装をした老若男女と多く出会った。

 名古屋に帰る二人(LCC のFDA は、昼前にしか便がない)を青森空港に送って、「青森県観光物産館アスパム」に休息する。りんご以外は土産に買うものもなく、隣接する青森港を見渡せる木製の散策デッキを歩いてみた。近くにねぶた会館があったが、見学する時間がなかった。
 東京に帰る仲間と新青森駅で別れた後、バスは大阪に帰る二人を青森空港まで送ってくれた。 天気に恵まれ、秘湯と緑にどっぷりと浸った、気の合う仲間との思い出に残る楽しい旅であった。

 行程地図を例によって Google Maps API で作ってみた。前回に作成して以来に、マップタイプに地形図がついかされているので、地形図で表現してみた。青荷温泉が、いかに谷底にあるかがよく分かるように思う。



 この旅行では、野鳥の姿をあまり見かけず、写真にも収めることができなかったが、蝶については、何種類かの写真をとることができた。名前を YAMAKO さんに同定してもらうと、こちら関西では見かけない蝶がほとんどであった。

旅行中に見かけた蝶・トンボ
アキアカネ;クリックすると大きな写真になります。 アキアカネ:葛温泉
2014/9/6
Fujifilm HS60EXR
50.9mm 1/160s f/5.0 ISO200
メスグロヒョウモン♂:葛温泉;クリックすると大きな写真になります。 メスグロヒョウモン♂:葛温泉
2014/9/6
Fujifilm HS60EXR
138.4mm 1/160s f/5.6 ISO320
ヒメキマダラヒカゲ:葛温泉;クリックすると大きな写真になります。 ヒメキマダラヒカゲ:葛温泉
2014/9/6
Fujifilm HS60EXR
43.9mm 1/200s f/5.0 ISO200
クモガタヒョウモン:十和田湖;クリックすると大きな写真になります。 クモガタヒョウモン:十和田湖
2014/9/6
Fujifilm HS60EXR
55.0mm 1/900s f/7.1 ISO200
メスグロヒョウモン♀:十和田湖;クリックすると大きな写真になります。 メスグロヒョウモン♀:十和田湖
2014/9/6
Fujifilm HS60EXR
55.0mm 1/480s f/5.6 ISO200
ウラギンヒョウモン:酸ヶ湯;クリックすると大きな写真になります。 ウラギンヒョウモン:酸ヶ湯
2014/9/7
Sony SO-04E
4.1mm 1/160s f/2.4 ISO40


2014年5月21日

隠居の登山:新緑の氷ノ山に登る


 一昨年の秋に、飲み仲間で山好きの高校同期生に連れられて、何十年ぶりかに氷ノ山の頂上に登った。
 その時、先導してくれた健脚二人は、標高差400mくらいのなだらかな登山道には飽きたらず、標高差が810mほどで5.3km、3時間半くらいの親水公園からのコースを歩きたいと希望していた。前回は紅葉の時だったので、今回は新緑の季節にすることにした。
 足に覚えのない二人は、前回通り大段ケ平から登る(2.8km、2時間)。関宮町の福定から林道に入り、健脚2人を親水公園で下し、雪解け後にまだあまり修復されていない舗装と砂利道がつながる林道を30分ほど走ると大段ケ平の駐車スペースに着く。

 尾瀬に行った時に、友から借りたトレッキング・ポール(ストック)がずいぶん助けになったので、貸してくれた友に助言を求めると、Black Diamond のストックがいいと教えてくれた。山登りなどあまりしないが、齢も齢なのでそのうちに役に立つことがあると買い求めた。これのお陰で、一度経験していることもあるだろうが、前回よりも楽に登ることができた。
 今回は、首から Fujifilm HS50 をぶら下げて登り所々で写真を撮ることができた。
 野鳥も撮りたいと望遠の効く HS50 をぶら下げて行ったのだが、ピンぼけばかりであった。それらの写真の EXIF に記録されている時刻を参照して、登山記録を作ってみた。


なお、この地図は、右メニュウに【新緑の氷ノ山登山】として掲載している。

 登山の前日には、山小屋に行く途中、和田山の白井大町ふじ公園に寄った。ちょうど満開で、いい香りが漂っていた。また、鉢伏高原も散策したので、その時に撮った写真も記録しておきたいと思う。

氷ノ山登山で観察した花など
白井大町藤公園;クリックすると大きな写真になります。 白井大町藤公園
2014/5/13
NEX-7+e 18-200mm
21.0mm(35mm換算31mm)
プログラムオート1/60s F10.0 ISO100
露出補正 +0.7
白井大町藤公園;クリックすると大きな写真になります。 白井大町藤公園
2014/5/13
NEX-7+e 18-200mm
42.0mm(35mm換算63mm)
プログラムオート1/25s F18.0 ISO100
露出補正 -0.3
ツルキジムシロ;クリックすると大きな写真になります。 ツルキジムシロ:鉢伏高原
2014/5/13
NEX-7+e 18-200mm
101.0mm(35mm換算151mm)
プログラムオート1/1000s F6.3 ISO100
露出補正 -1.3
ショウジョウバカマ:鉢伏高原;クリックすると大きな写真になります。 ショウジョウバカマ:鉢伏高原
2014/5/13
NEX-7+e 18-200mm
92.0mm(35mm換算138mm)
プログラムオート1/30s F6.3 ISO100
露出補正 +0.3
オオカメノキ(ムシカリ)の新芽;クリックすると大きな写真になります。 オオカメノキ(ムシカリ)の新芽:大段ケ平
2014/5/13
Fuji Finepix HS50
14.4mm(35mm換算81mm)
プログラムオート1/800s F4.5 ISO400
露出補正 なし
ハウチワノカエデの花;クリックすると大きな写真になります。 ハウチワノカエデの花:大段ケ平
2014/5/14
Fuji Finepix HS50
12.4mm(35mm換算70mm)
プログラムオート1/170s F4.0 ISO400 露出補正 なし
センダイムシクイ?:大段ケ平;クリックすると大きな写真になります。 センダイムシクイ?:大段ケ平
2014/5/14
Fuji Finepix HS50
115.0mm(35mm換算644mm)
プログラムオート1/000s F8.0 ISO100 露出補正 なし、トリミング
ゴジュウカラ:大段ケ平;クリックすると大きな写真になります。 ゴジュウカラ:大段ケ平
2014/5/14
Fuji Finepix HS50
143.6mm(35mm換算804mm)
プログラムオート1/75s F5.6 ISO400 露出補正 なし、トリミング


stock
Black Diamond(ブラックダイヤモンド) トレイル BD82328
BlackDiamond(ブラックダイヤモンド)
売り上げランキング: 24,287
 

2013年12月14日

隠居のパソコン備忘録: Google Map で緯度・経度を求める


 Google のソフトは、メール(gmail)でも、地図検索(google map) でも、カレンダー(スケジュール帳)でも、どんどん進化?している。だから、ちょっと前までできていたことが、突然できなくなったりする。

 このブログに掲載している私的な観光地図(例えば、【京都・滋賀・奈良私的観光地図】 )では、Google Maps API というアプリを使っている。このアプリも進化しているが、いまここでは触れない。
 このような地図を作るときには、ピンマークを建てる位置の経度・緯度(10進法での)が、必要である。今までは、Google の地図検索で探した地点の赤ピンマーク map-09.JPG の根元を右クリックするとセレクトボックスが出て、その中から、「この場所について」を選択すると検索地点入力ボックスに、10進法の緯度・経度が表示されるので、これを使っていた。

 だが、最新のGoogle 地図検索では、セレクトボックスは出てこないし、緯度・緯度を表示してくれる機能が見当たらない。困ったので、緯度・経度を表示するサービスはないかと検索してみると、【Googleマップで緯度・経度を求める (拡張版)】というサービスが見つかった。最新のGoogle 地図検索では、検索した時に、検索入力ボックスに検索地点の住所が表示されるので、上のサービスの検索入力ボックスに Copy&Paste すれば、その地点の緯度・緯度を10進法と60進法の両方で表示してくれる。

 ところが、この記事を書くために、再度最新の Google 地図検索を開いてみると、右下の方にあるヘルプアイコンmap-07.JPGをクリックすると「以前のマップに戻る」という項目が用意されていて、これを選択すると、Google 地図検索の前のバージョンになる機能が追加されていた。Google のアプリは基本的に無料であるから、自由気ままに変えているのかなと思ってしまう。

最新のGoogle 地図検索 画面
map-01.JPG

ヘルプアイコンをクリックすると
map-02.JPG

以前のGoogle 地図検索 画面
map-03.JPG

検索地点の赤ピンマークの根元をクリックする
map-04.JPG

「この場所について」を選択する
map-05.JPG

Googleマップで緯度・経度を求める (拡張版)
map-06.JPG


2013年5月16日

北九州ドライブ旅行私的観光地図(番号入りマークを表示する)


 いつものように、旅行で訪れた地点をマークで表示する旅行地図を Google Maps API V3 で作成した。前回、和歌山を旅行した時の【初春の南紀私的観光旅行地図】のソースを土台にした。
 ソースは、html と xml のファイルがセットである。html のソースに手を加える部分は、タイトル、地図の中心点・大きさの指示であるが、今回は表示する地点が、14箇所となったので、これらのマークを作成するコードの追加が必要(単純に、元の行の数字を変えるだけであるが)であった。ついでに、マークの色を、オレンジ色に変えた。
また、呼び込んでくる xml ファイル名を指定しなければならない。

 このような新しいマークを作るのは、ICANN というサイトが提供している【Google-Maps markers generator】というページが極めて有用である。
 画面の指示通り、ピン・マークの色を選び、中に表示する数字またはアルファベットを指示して、ダウンロードボタンをクリックすると指定したフォルダーに指示したマーカーの数だけのファイルがダウンロードされる。今回の場合は、例えば、norange_Marker_xx.png というファイルが作成されている。これをFFFTPでサーバーにアップロードして使えばよい。

 単純だか、時間がかかる作業は、訪問地点の経度・緯度、地点名、表示する写真などにリンクするhtml コードをリストする xml ファイルの作成である。
 これも、前回の xml ファイルの内容を変更し、地点数を増やすだけの作業である。入力する経度・緯度の表示は、Google Maps で地点を特定し、地点を右クリックすると現れるポッピアップの「この場所について」をクリックして表示される10進法の数字を使う。私の場合、写真の EXIF に経度・緯度が表示される(カメラにGPSユニットをつけている。)が、これは60進法で、10進法に変換する必要があるので、Google Maps で地点が特定できないときに使っている。

北九州ドライブ旅行地図
  クリックすると地図として機能します。
map_kyusyu.JPG


2013年4月 7日

泉北ニュータウン栂地区の桜地図


 泉北ニュータウンは開発されてから40年以上にもなって、開発当初に植えられた樹木も大きくなった。街路樹に、百日紅が植えられているようなところもあるので、時にびっくりすることもあるが、やはり桜が多い。
 特に栂地区には、泉北高速鉄道栂・美木多駅からすぐの西原公園を中心にして、多くの桜が植えられていて、4月のはじめには今年も賑やかに咲いた。西原公園の桜の下は芝生になっているので、多くの花見客で賑わった。

 探鳥ウォークのついでに撮った写真を、Google Maps API V3 を使って、地図にプロットしてみた。作成した地図は、右メニューにリンクボタンを置いた。



下は、昨年の桜地図である。

2013年3月28日

隠居のドライブ:南紀の私的観光地図とその作成方法。


 南紀をドライブしたときの訪問地点を地図にプロットしてみた。地図作成に使ったのは、【隠居のパソコン備忘録: Google Maps API JS V3 で、番号付きマーカーを表示する】で記録した方法である。この地図は、右メニューの観光地図一覧に【初春の南紀私的観光地図】として追加した。



 この地図を作るためには、Google Map を表示するための HTML ファイルと、このページに呼び込んでくる XML ファイルを記述する必要がある。いずれも、宍道湖周辺を旅行した時の地図を作ったファイルをコピーして作成した。
 html ファイルはテキスト編集ソフト【秀丸】で、xml ファイルは Microsoft が提供する【XML Notepad】で修正をした。XML ファイルは、秀丸でも編集できるが、このXML Notepad は、XMLファイル編集に特化しており、文法の間違いも指摘してくれるので助かる。

 html ファイルで修正・追加する箇所は次の青字部分である。

90行目あたり、
     case "num05": num = "05";
                break;
     case "num06": num = "06";
                break;
--------------------------------------------------------------------------
に、次を追加する。番号マークは、7番目まで設定したので。
    case "num07": num = "07";
                break;  

103行目あたり
    gicons["num05"] = getMarkerImage(category2num("num05"));
      gicons["num06"] = getMarkerImage(category2num("num06"));
-----------------------------------------------------------------------------------
 に、次を追加する。
      gicons["num07"] = getMarkerImage(category2num("num06"));

184行目あたり、
zoom: 10,
      center: new google.maps.LatLng(35.430603,133.012136),   //松江
      zoom: 10,
--------------------------------------------------------------------------------------------------
を、次の地点の経度・緯度に変更する。もう少し、拡大したい場合は、zoom を11と大きくする。

   center: new google.maps.LatLng(33.676354,135.677032),   //熊野古道中辺路道の駅
   zoom: 10,     

193行目あたりの 読み込む xml ファイルを新しい xml ファイルに変更する。
      downloadUrl("http://n-shuhei.net/atelier/maps/V3_sinnjiko_num.xml", function(doc) {
----------------------------------------------------------------------------------------------------------------
      downloadUrl("http://n-shuhei.net/atelier/maps/V3_kisyuu_num.xml", function(doc) {  

221行目あたり、
<tr><td align="center"style="width:1000px; background-color: #ffffe0;" ><br /><h2>晩秋の宍道湖私的観光地図</h2></td></tr>
--------------------------------------------------------------------------------------------------------------
地図のタイトルおよび大きさを指定する。地図の幅を指定する箇所はもう一箇所ある。
<tr><td align="center"style="width:700px; background-color: #ffffe0;" ><h2>初春の南紀州観光地図</h2></td></tr>      
<tr><td><div id="map" style="width: 700px; height: 500px"></div></td></tr><tr>


読み込む XML ファイルは、XML Notepad を使って、宍道湖の地図を作った時のファイルをもとに、番号マークをプロットする地点の経度・緯度とプロット地点の名前や紹介する写真リンク先を 入力すればよい。リンク先のURL などは、ブログのソースを使えば簡単である。参考までに、作成した XMLファイルは次のようなものである。


<?xml version="1.0" encoding="utf-8"?>
<markers>
 <marker name="1:志原海岸" address="<a href="http://n-shuhei.net/atelier/photo_drive/130321_024.jpg" title="志原海岸" rel="lightbox[nanki]">志原海岸</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_003.jpg" title="ハマダイコン:志原海岸" rel="lightbox[nanki]">ハマダイコン</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_004.jpg" title="イソヒヨドリ:志原海岸" rel="lightbox[nanki]">イソヒヨドリ</a>" lng="135.431213" lat="33.570291" category="num01"/>
 <marker name="2:串本海中公園" address="<a href="http://n-shuhei.net/atelier/photo_drive/130321_020.jpg" title="水中トンネル:海中公園" rel="lightbox[nanki]">水中トンネル</a>" lng="135.745783" lat="33.481639" category="num02"/>
 <marker name="3:串本ロイヤルホテル" address="<a href="http://n-shuhei.net/atelier/photo_drive/130321_023.jpg" title="露天風呂:串本ロイヤルホテル" rel="lightbox[nanki]">露天風呂:串本ロイヤルホテル</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_021.jpg" title="日の出:串本ロイヤルホテル" rel="lightbox[nanki]">日の出</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130322_028.jpg" title="小雨にけぶる橋杭岩:串本ロイヤルホテル" rel="lightbox[nanki]">小雨にけぶる橋杭岩</a>" lng="135.784836" lat="33.481281" category="num03"/>
 <marker name="4:潮岬" address="<a href="http://n-shuhei.net/atelier/photo_drive/130321_009.jpg" title="潮岬灯台" rel="lightbox[nanki]">潮岬灯台</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130322_027.jpg" title="潮岬から太平洋を望む" rel="lightbox[nanki]">潮岬から太平洋を望む</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_007.jpg" title="ジョウビタキ雌:潮岬" rel="lightbox[nanki]">ジョウビタキ雌</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_008.jpg" title="トビ:潮岬" rel="lightbox[nanki]">トビ</a>" lng="135.762500" lat="33.433055" category="num04"/>
 <marker name="5:樫野崎灯台" address="<a href="http://n-shuhei.net/atelier/photo_drive/130321_010.jpg" title="樫野崎灯台" rel="lightbox[nanki]">樫野崎灯台</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_025.jpg" title="樫野崎から潮岬の眺望" rel="lightbox[nanki]">樫野崎から潮岬の眺望</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_013.jpg" title="樫野崎から太平洋の眺望" rel="lightbox[nanki]">樫野崎から太平洋の眺望</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_012.jpg" title="内海側の定置網" rel="lightbox[nanki]">内海側の定置網</a>" lng="135.86259" lat="33.473263" category="num05"/>
 <marker name="6:那智の滝" address="<a href="http://n-shuhei.net/atelier/photo_drive/130321_018.jpg" title="那智の滝" rel="lightbox[nanki]">那智の滝</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_014.jpg" title="那智の滝への石段" rel="lightbox[nanki]">那智の滝への石段</a>" lng="135.887704" lat="33.675069" category="num06"/>
 <marker name="7:熊野那智大社" address="<a href="http://n-shuhei.net/atelier/photo_drive/130321_016.jpg" title="熊野那智大社" rel="lightbox[nanki]">熊野那智大社</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_015.jpg" title="イソヒヨドリ:熊野那智大社" rel="lightbox[nanki]">イソヒヨドリ</a>" lng="135.890236" lat="33.668533" category="num07"/>
 </markers>


なお、地図作成と直接関連していないが、Internet Explorer 9 では、ページを編集・更新して、サーバーにアップロードしてもも反映されないことが起こった。(Google Chrome ではすぐに反映される) IE8 のときと違って更新されるタイミングが異なるようだ。
 このようなときは、IE9 で ツール⇒インターネットオプション⇒全般タグ⇒閲覧の履歴の設定で、出てくるポップアップ画面で、インターネット一時ファイルの選択を【Web サイトを表示するたびに確認する】(default では 自動的に確認する となっている)を選択すれば治るようだ。

 

2012年9月22日

隠居のパソコン備忘録: Google Maps API JS V3 で、番号付きマーカーを表示する

 
 従来、右フレームの【晩秋の宍道湖私的観光地図】は、Google Maps API のV2版で作成したものを置いていた。V2 でかいた地図はまだ動くが、2010年5月に廃止されており、V3 へ移行することが奬められている。
 この地図では、必要性はあまりないが、マーカーに番号を表示させていた。新しく V3 で作りなおすときにも、学習も兼ねて番号を表示させたかった。

 ところが、番号入りマーカーを表示するサンプルコードが見つからない。V2 で作成したコードを V3 に置き換えることも試みたが、悲しいかな十分な知識がないし、一から勉強する意欲もないので、うまく行きそうにない。
 今までに成功した V3 のコードを眺めていると【Google Maps API JS V3 で、カテゴリー別に色違いマーカーを表示する】 で使ったコードを、わかる範囲でいじってみれば、なんとかなるのではないかと思われた。色違いのマーカーを、番号付きマーカーに置き換えるのである。この地図では、category 別に赤・青・黄色・緑などのマーカーにしているが、これを番号つきのマーカーに置き換えるのである。また、また、一つずつのマークを、一つのカテゴリーと考えるのである。
 このコードでは、マーカーを立てる地点の経度・緯度や吹きだしに表示するHTMLなどは、XML ファイルを読み込んでくることになっている。V2 で作成した地図では、HTMLの中に直接入力されていた。

 とりあえずうまく表示できるようなので、自分用の備忘録として、XML ファイルおよびHTML コードを記録しておきたい。よくわかった人から見れば、へんてこなコードとなっていると思うが、古希を超えるとほとんど羞恥心はなくなっている。

使用したXML ファイル。項目 category は num01, num02・・・のようになっている。
<?xml version="1.0" encoding="utf-8" ?> 
- <markers>
  <marker name="1:宍道湖温泉" address="   <a href="http://n-shuhei.net/atelier/photo_drive/DSC_4820-1.JPG" title="宍道湖の夕焼け" rel="lightbox[sinjiko]">宍道湖の夕焼け</a><br/>   <a href="http://n-shuhei.net/atelier/photo_drive/DSC_4831.JPG" title="宍道湖の朝" rel="lightbox[sinjiko]">宍道湖の朝</a>" lng="133.053875" lat="35.469199" category="num01" /> 
  <marker name="2:米子水鳥公園" address="   <a href="http://n-shuhei.net/atelier/photo_digisco/DSC01539.JPG" title="コハクチョウ" rel="lightbox[sinjiko]" >コハクチョウ</a><br/>   <a href="http://n-shuhei.net/atelier/photo_digisco/DSC01510.JPG" title="オナガガモ:♀を追いかける♂たち" rel="lightbox[sinjiko]" >オナガガモ</a><br/>   <a href="http://n-shuhei.net/atelier/photo_digisco/DSC01529.JPG" title="マガンの群れ:沖の州" rel="lightbox[sinjiko]" >マガンの群れ</a><br/>   <a href="http://n-shuhei.net/atelier/photo_digisco/DSC01591.JPG" title="キンクロハジロ?" rel="lightbox[sinjiko]" >キンクロハジロ</a>" lng="133.284674" lat="35.44333" category="num02" /> 
  <marker name="3:宍道湖グリーンパーク" address="   <a href="http://n-shuhei.net/atelier/video/digisco_1.wmv" target="_blank">コハクチョウ(video)</a><br/>   <a href="http://n-shuhei.net/atelier/photo_digisco/DSC01620.JPG" title="セグロセキレイ" rel="lightbox[sinjiko]" >セグロセキレイ</a><br/>   <a href="http://n-shuhei.net/atelier/photo_digisco/DSC01632.JPG" title="トビ?" rel="lightbox[sinjiko]" >トビ</a><br/>   <a href="http://n-shuhei.net/atelier/photo_birds/0911211.jpg" title="ジョウビダキ?" rel="lightbox[sinjiko]" >ジョウビダキ</a><br/>   <a href="http://n-shuhei.net/atelier/photo_drive/DSC_4872.JPG" title="ゴビウスにある水槽" rel="lightbox[sinjiko]">ゴビウスにある水槽</a>" lng="132.866077" lat="35.444729" category="num03" /> 
  <marker name="4:出雲大社" address="   <a href="http://n-shuhei.net/atelier/photo_drive/DSC_4886.JPG" title="出雲大社にて" rel="lightbox[sinjiko]">出雲大社にて</a>" lng="132.685919" lat="35.401434" category="num04" /> 
  <marker name="5:足立美術館" address="   <a href="http://n-shuhei.net/atelier/photo_drive/DSC_4908.JPG" title="足立美術館の紅葉" rel="lightbox[drive]">足立美術館の紅葉</a><br/>   <a href="http://n-shuhei.net/atelier/photo_drive/Stitched_003.JPG" title="枯山水の庭:3枚の合成写真" rel="lightbox[drive]">枯山水の庭</a><br/>   <a href="http://n-shuhei.net/atelier/DSC_4932.JPG" title="足立美術館:絵画を観ているように" rel="lightbox[drive]">仏間から庭を望む</a>" lng="133.198242" lat="35.377854" category="num05" /> 
  <marker name="6:米子自動車道大山PA" address="   <a href="http://n-shuhei.net/atelier/photo_drive/DSC_4720-1.JPG" title="雪化粧した大山:大山PAより" rel="lightbox[sinjiko]">大山の紅葉</a>" lng="133.419342" lat="35.386531" category="num06" /> 
  </markers>


 作成した地図作成の稚拙なHTMLコード(Google Maps API V3 のJavaScript を含む)は、右フレームに掲載している【晩秋の宍道湖私的観光地図】のソース・コードを見ていただければ、わかると思うが、参考までに下に記載し、少しのコメントを加えたいと思う。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 

<title>Google Maps Javascript API v3 Example: Marker Categories</title> 

<!-- jQuery lightbox2.51 -->
<script type="text/javascript" src="http://n-shuhei.net/atelier/Jquery2.51/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://n-shuhei.net/atelier/Jquery2.51/js/lightbox.js"></script>
<link rel="stylesheet" type="text/css" href="http://n-shuhei.net/atelier/Jquery2.51/css/lightbox.css" media="screen" />

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://n-shuhei.net/atelier/maps/V3test/downloadxml.js"></script>
    <title>Google Maps</title>
<style type="text/css">
html, body { height: 100%; } 
</style>
    <script type="text/javascript">
    //<![CDATA[
      // this variable will collect the html which will eventually be placed in the side_bar 
      var side_bar_html = ""; 
      var gmarkers = [];
      var gicons = [];
      var map = null;
var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });

gicons["01"] = new google.maps.MarkerImage("http://n-shuhei.net/Googlemaps/Markers/marker_01.png",
      // This marker is 20 pixels wide by 34 pixels tall.
      new google.maps.Size(20, 34),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is at 9,34.
      new google.maps.Point(9, 34));
  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.
  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.

  var iconImage = new google.maps.MarkerImage('http://n-shuhei.net/Googlemaps/Markers/marker_01.png',
      // This marker is 20 pixels wide by 34 pixels tall.
      new google.maps.Size(20, 34),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is at 9,34.
      new google.maps.Point(9, 34));
  var iconShadow = new google.maps.MarkerImage('http://n-shuhei.net/atelier/maps/V3test/msmarker.shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 34),
      new google.maps.Point(0,0),
      new google.maps.Point(9, 34));
 
function getMarkerImage(iconNum) {
   if ((typeof(iconNum)=="undefined") || (iconNum==null)) { 
      iconNum = "01"; 
   }
   if (!gicons[iconNum]) {
      gicons[iconNum] = new google.maps.MarkerImage("http://n-shuhei.net/Googlemaps/Markers/marker_"+ iconNum +".png",
      // This marker is 20 pixels wide by 34 pixels tall.
      new google.maps.Size(20, 34),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is at 6,20.
      new google.maps.Point(9, 34));
   } 
   return gicons[iconNum];
}

function category2num(category) {
   var num = "01";       
   switch(category) {
     case "num01": num = "01";
                break;
     case "num02": num = "02";
                break;
     case "num03": num = "03";
                break;
     case "num04": num = "04";
                break;
     case "num05": num = "05";
                break;
     case "num06": num = "06";
                break;
     default:   num = "01";
                break;
   }

   return num;
}

      gicons["num01"] = getMarkerImage(category2num("num01"));
      gicons["num02"] = getMarkerImage(category2num("num02"));
      gicons["num03"] = getMarkerImage(category2num("num03"));
      gicons["num04"] = getMarkerImage(category2num("num04"));
      gicons["num05"] = getMarkerImage(category2num("num05"));
      gicons["num06"] = getMarkerImage(category2num("num06"));
      // A function to create the marker and set up the event window
function createMarker(latlng,name,html,category) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        icon: gicons[category],
        shadow: iconShadow,
        map: map,
        title: name,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

        // === Store the category and name info as a marker properties ===
        marker.mycategory = category;                                 
        marker.myname = name;
        gmarkers.push(marker);

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
}

      // == shows all markers of a particular category, and ensures the checkbox is checked ==
      function show(category) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category) {
            gmarkers[i].setVisible(true);
          }
        }

        // == check the checkbox ==
        document.getElementById(category+"box").checked = true;
      }

      // == hides all markers of a particular category, and ensures the checkbox is cleared ==
      function hide(category) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category) {
            gmarkers[i].setVisible(false);
          }
        }

        // == clear the checkbox ==
        document.getElementById(category+"box").checked = false;
        // == close the info window, in case its open on a marker that we just hid
        infowindow.close();
      }

      // == a checkbox has been clicked ==
      function boxclick(box,category) {
        if (box.checked) {
          show(category);
        } else {
          hide(category);
        }

        // == rebuild the side bar
        makeSidebar();
      }

      function myclick(i) {
        google.maps.event.trigger(gmarkers[i],"click");
      }

      // == rebuilds the sidebar to match the markers currently displayed ==
      function makeSidebar() {
        var html = "";
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].getVisible()) {
            html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\/a>' + ' ' ;
          }
        }

        document.getElementById("side_bar").innerHTML = html;
      }

  function initialize() {
    var myOptions = {
      zoom: 10,
      center: new google.maps.LatLng(35.430603,133.012136),   //松江
      mapTypeId: google.maps.MapTypeId.HYBRID
    }
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

      // Read the data
      downloadUrl("http://n-shuhei.net/atelier/maps/V3_sinnjiko_num.xml", function(doc) {
  var xml = xmlParse(doc);
  var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new google.maps.LatLng(lat,lng);
          var address = markers[i].getAttribute("address");
          var name = markers[i].getAttribute("name");
          var html = "<b>"+name+"<\/b><p>"+address;
          var category = markers[i].getAttribute("category");
          // create the marker
          var marker = createMarker(point,name,html,category);
        }

        // == create the initial sidebar ==
        makeSidebar();
      });
    }

    //]]>
    </script>
  </head>

<body style="margin:0px; padding:0px;" onload="initialize()"> 
    <!-- you can use tables or divs for the overall layout -->
    <table border=1 >
<tr><td align="center"style="width:1000px; background-color: #ffffe0;" ><br /><h2>晩秋の宍道湖私的観光地図</h2></td></tr>      
<tr><td>
           <div id="map" style="width: 1000px; height: 500px"></div>
        </td></tr><tr>
<td valign="top" style="width:1000px; background-color: #ffffe0; font-size: small;"> 
 上の地図は、Google Mapsの機能を持っています。拡大・縮小・移動ができます。下の該当番号をクリックすると該当番号マーカーに吹きだしが出てきます。その吹き出しにある青文字をクリックすると写真(一部 動画)がでてきます。</td></tr><tr>
        <td valign="top" style="width:1000px; background-color: #ffffe0; font-size: small;"> 
           <div id="side_bar"></div>
        </td>
      </tr>
    </table>


    <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.
    </noscript>

<br /><br />
<!-- Google AdSense -->
<script type="text/javascript"><!--
google_ad_client = "pub-8556873278052332";
/* AdSense foot ad */
google_ad_slot = "1589991765";
google_ad_width = 728;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
  </body>
</html>


  • 番号付きマーカーは、dLINKbRING というサイトからダウンロードできる
  • 表示する地図を、ラベル付き航空写真とするには、mapTypeId: google.maps.MapTypeId.HYBRID とすればよい。通常は、HYBRID の部分が、ROADMAP となっている。
  • マーカーをクリックしてでる吹きだしの中に表示される写真リンクをクリックして出てくる写真を、同一画面の中央に表示するJavaScript ソフト lightbox は機能する。 jQuerylightbox2.51 を使った。


2012年9月14日

隠居の旅:久しぶりの東京と福島磐梯朝日あたり ー(2):高湯温泉など

 
 バス観光の出発場所は、東京八重洲口の鉄鋼ビル前である。バスはサロンカー、車内宴会用のビールをディスカウントストアで買い付けるために、出発は30分遅れ。首都高を抜けて東北道へ。昼食を予定している宇都宮までの車中では、持ち寄りの酒・ブランデーなどもでて、宴会である。

 昼食は、東北道を宇都宮で一旦降りて、インターチェンジ近くの豪華中華料理店。宇都宮名物の焼き餃子は出なかったが、水餃子・飲茶が美味しかった。
 再び、東北道に戻って、福島西IC で出て多くの果樹園が広がる飯坂町へ。果樹園では、桃(白桃)と梨(幸水)狩りをする。もぎたてを食べるとさすがにジューシーだ。土産に白桃と黄色い桃の詰め合わせを宅急便で送ったら、24時間後にはついていたらしい。なかなか好評だった。
フルーツラインから、県道70号線で曲がりくねった急坂を登って、磐梯吾妻スカイラインの入り口近くの硫黄の匂いがする高湯温泉に到着。乳白色の掛け流し温泉で、残暑でかいた汗を流した。宿の花月ハイランドホテルの大浴場は、大きいいが露天風呂は10人も入ればいっぱいだ。
 夕食後、メンバーの一人の落語まで飛び出して、楽しい飲み会となった。

 翌朝もいい天気だ。朝食前に、宿から1kmあまりの山道を登って、不動の滝といわれるとところに行ってみた。期待した野鳥も蝶々も姿がない。
朝食後、宿からすぐ近くの磐梯吾妻スカイラインへ。現在このあたりの湯量道路は無料開放中である。途中、有毒ガスのため草木が生えていないところを通る。看板には、駐車するなと書いてある。
 吾妻山の山頂付近浄土平レストハウス駐車場には、高級なバイクがずらり並んでいた。どうやら、この道路は、ツーリング族のメッカらしい。
 浄土から桧原湖までの道の両側は、緑の林一色である。下に降りてくると樹々の間から、秋元湖などが見えてくる。バスは桧原湖で小休憩を入れて、会津若松鶴ケ城を経て、南会津の大内宿まで走る。昼食は、大内宿にある三澤屋という蕎麦屋である。大ぶりのあゆの塩焼き、白ネギをかじりながらの大根おろしの辛味がよく効いたぶっかけ冷やし蕎麦(というんだろうか)が、遅めの昼食の腹に沁み込んだ。

 ツアーの行き先はここまでである。あとはひたすら東京まで帰るだけであったが、運転手さんが気を利かせてくれて、ライトアップした東京スカイツリーを一周するように、首都高を走ってくれた。
 1時間半ほど予定より遅れた到着時間に合わせて、大阪までの新幹線の列車は、スマホで簡単に予約変更ができた。世の中便利になったものだ。
 いつもながら、楽しい旅ができるのは、詳細に計画を練ってくれる仲間がいるからだ。Thanks a lot!! 多謝!

 行った先々を、Google Maps API V3 でプロットしてみた。今回は、少し学習して、吹きだしからクリックしてでる写真が、Lightbox (同一画面上に画像を上乗せ表示するためのスクリプト)で見られるようにしてみた。あんまりいい写真はないが。



 

2012年9月 2日

隠居のパソコン備忘録: Google Maps API JS V3 で、カテゴリー別に色違いマーカーを表示する


 酷暑で屋外での活動は歳を考えて自粛していた。それで、自然とパソコンに向かう時間が多くなっていた。取り組んだのは、V3 にバージョンアップした Google Maps JS API で旅行地図などを作成するなどのいろいろなトライである。

 といっても、一から Google Maps JS API で希望する地図を作成する能力はないから、公開されている人様のコードをいじることが主体である。このようなときに、重宝させていただいているのは、Using the Google Maps API v3にあるサンプルである。
 Mike Williams' tutorial というサイトで V2 でサンプル表示されていた More advanced stuff - Part 25 Marker Categoriesを、V3 コードに置き換えた translated to v3というのが紹介されている。これを利用すれば、野鳥撮影地点を種別に表示するときなどに使えそうと思い自分のできる範囲でいじって見ることにした。

 このような作業をする時の手順は、だいたい次のようにしており、備忘録として記録しておきたい。
  1. サンプル画面のソース・コード(IE の場合、メニューバーの表示⇒ソース)を取得する。これを、テキスト編集ソフト(私の場合:秀丸)にコピペし、名前をつけて、適当なフォルダーに、html ファイルとして保存する。
  2. サンプルコードで使用されている Javascript ユティリティ ファイル(今回の例では、downloadxml.js ファイル)や使用するマーカイメージ・ファイル(今回のサンプルでは、marker_red.png のようなファイル)を用意し、ファイル転送ソフト(私の場合:FFFTP )でサーバー(私の場合:Xserver )上の適当なフォルダーにアップロードしておく。
  3. サンプル・コードで使用されている xml ファイル(普通はサンプル・コード内で相対パスで表示されている。これを絶対パスにして、ブラウザで表示させる)をC&P して、秀丸の新しいファイルとする。適当な名前(xmlファイルで)で保存する。これも、先ほどと同じサーバー上の同じフォルダーにアップロードしておく。
  4. 秀丸画面で、自分の環境に合うように、サンプルコードのそれらのファイルの path を書き換える。私の場合、ミスがないように、絶対パスで書くことにしている。
  5. 自分のサーバー環境に合わせたサンプル・コードをブラウザで表示してみる。これで、參照サンプルと同じように表示されたら、サンプルのコピーは成功である。
  6. このサンプルコードを少しづついじって、目的とする地図(今回、地元の公園・ホームセンター・大型電気店を種別( category )に表示することを目指した。)に近づけていく。先ず、地図の中心を地元にするために、地図の center 緯度・経度を置き換えた。
  7. と同時に、xml ファイルも、サンプルで使われているファイルを真似して、新たに日本語を含むファイルを作って(XML ファイルの編集は、XmlNotepad を使っている)サーバー上にアップロードした。(日本語のエンコードは、UTF-8 )
  8. その他、category の名前を変えたことに対応する修正などを加えて保存、サーバーにアップロードして、ブラウザで表示してみた。地図やチェックボックス、日本語のサイドバーは、期待通り表示されたが、肝心のマーカーが表示されない。元のサンプルコードと見比べながら、チェックしてみたが、原因が分からない。
    JavaScriptや HTML のコードは、カンマ一つ抜けても動かないことがあるので、再度やり直すなど作業を続けて見たが、うまくいかない。
  9. 3日間ほど悩んで、諦めかけていたが、原因はどうやら XML ファイルにあるらしいと思われたので、再度フィルを眺めていると、ing(longitude:経度) と lat(latitude:緯度)の数字が入れ替わっていることに気がついた。今まで、このような XML ファイルは lat ⇒ lng という順序で記入していたのに、今回使ったサンプル XML ファイルは順序が逆になっていたのだ。サンプル XML ファイルの経度・緯度が海外の地点を示していたので、気づくのが遅れたらしい。
     数字を入れ替えてみると期待通りに表示されるようになった。ミスというのは大体において、このようにうっかりミスが多いものだが、ついつい難しく考えてしまいがちだ。
  10. このサンプルコードを土台に、マーカーの吹きだし(infowindow) に画像やリンクURL を表示を試みたが、それらも OK のようである。
     なお、写真の表示が、画面の中心に表示され背景がフェードアウトする lightbox も使えるので、今後いろいろな応用ができるのではないかと考えている。


 作成例:泉北ニュータウンの公園・ホームセンター・大型電気店地図 サンプル・ページ

  

2012年8月26日

隠居のパソコン備忘録: Google Maps API JS V3 での地図でマーカー地点をズームイン・アウトする


 V3 にバージョンアップした Google Maps JS API で旅行地図などを作成することをいろいろとトライしている。
 当サイト内の Studio YAMAKO のオーナーは、お住まいの横浜近郊はもちろんのこと、海外をも含めて様々なところを旅行され、それぞれの地点での綺麗な写真をブログにUPされている。
 旅行先を一枚の地図で表示することは無理なので、海外旅行については、その都度旅行先の地図を作って表示させてもらっているが、国内旅行については、年度別に、一枚の日本地図にプロットしている。(例:2011年旅行地図) だが、これでは地図が大まかすぎて、訪問先地点毎に、コントロールを使って、ズームインと地図の移動をする必要がある。

 それで何か良いサンプルはないかと探ってみると、Google Maps API links に、V2 で作成されたMike Williams' tutorial の The Basics - Part 3: Loading the data from an XML file with added "Zoom To, Zoom In, Zoom Out links in infowindow V3 に書き換えたサンプルコードが見つかった。
 2011年旅行地図では、隠居のパソコン備忘録: Google Maps API JS V3 でXML ファイルを読み込むに記録したサンプルコードを使った。今回のコードは、そのコードに、Zoom in・out の機能を付け加えたものである。呼び込んでくる XML ファイルは、同じ形式である。サンプルコードには、XML ファイルに zoom というタグが組み込まれていたが、なしでも機能するようである。
 2012年の旅行地図では、このコードを使った。見た目は、2011年旅行地図と変わらないが、地点をクリックして出てくる吹きだし(infowindow)に、表示される Zoom to [+] [-] をクリックすると、その地点が地図の中心となる。 さらに、[+] をクリックしていくと、Zoom が一段ずつUPする。2011年旅行地図に比べれば、少し改良された。
 下は、そのコードである。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps Javascript API v3 Example: Loading the data from an XML</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://xxxxxxxxxx/JSlibrary/downloadxml.js"></script>
<style type="text/css">
html, body { height: 100%; } 
</style>
<script type="text/javascript"> 
//<![CDATA[
      // this variable will collect the html which will eventually be placed in the side_bar 
      var side_bar_html = ""; 
      // arrays to hold copies of the markers and html used by the side_bar 
      // because the function closure trick doesnt work there 
      var gmarkers = []; 
     // global "map" variable
      var map = null;
// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html, zoom) {
    var contentString = html;
    // add the zoom links
    contentString += '<br><a  href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom('+zoom+');">Zoom To</a>';
    contentString += ' - <a  href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom(parseInt(map.getZoom())+1);">[+]</a>';
    contentString += ' - <a  href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom(parseInt(map.getZoom())-1);">[-]</a>';

    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: new google.maps.MarkerImage('http://labs.google.com/ridefinder/images/mm_20_blue.png'),         
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
    marker.MyZoom = zoom;
    // save the info we need to use later for the side_bar
    gmarkers.push(marker);
    // add a line to the side_bar html
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}
function initialize() {
  // create the map
  var myOptions = {
    zoom: 8,
    center: new google.maps.LatLng(34.717876,137.851424),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);
  google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });
      // Read the data from example.xml
      downloadUrl("http://xxxxxxxx/xxxxxxxxx/xxxx/V3_yamako_2012.xml", function(doc) {
        var xmlDoc = xmlParse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new google.maps.LatLng(lat,lng);
          var html = markers[i].getAttribute("html");
          var label = markers[i].getAttribute("label");
          var zoom = markers[i].getAttribute("zoom");
          if (!zoom) zoom = 15;
          // create the marker
          var marker = createMarker(point,label,html,zoom);
        }
        // put the assembled side_bar_html contents into the side_bar div
        document.getElementById("side_bar").innerHTML = side_bar_html;
      });
    }

var infowindow = new google.maps.InfoWindow(
  { 
//    size: new google.maps.Size(150,100),
    maxWidth: 450
  });

    // This Javascript is based on code provided by the
    // Community Church Javascript Team
    // http://www.bisphamchurch.org.uk/   
    // http://econym.org.uk/gmap/
    // from the v2 tutorial page at:
    // http://econym.org.uk/gmap/basic3.htm 
//]]>

</script> 
  </head> 

<body style="margin:0px; padding:0px;" onload="initialize()"> 
    <!-- you can use tables or divs for the overall layout --> 
     <table border="1"> 
<tr>
<td bgcolor="#FFFFCC" align="center" colspan="2"><font color="#000000"><strong><big>Yamako 国内旅行地図:2012年
</big></strong><br /></font></td></tr>      
<tr> 
        <td> 
           <div id="map_canvas" style="width: 780px; height: 820px"></div> 
        </td> 
        <td width = 220 valign="top"  bgcolor="#ffffe0" style="text-decoration: underline; color: #000000; font-size: small;" >
           <div id="side_bar"></div> 
        </td> 
      </tr> 
    </table> 


    <noscript><p><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.</p>
    </noscript> 

  </body> 
</html> 


2012年8月18日

隠居の旅行地図:真夏の山陰地方

 先のエントリー【隠居、真夏の山陰旅行を楽しむ】で、訪れた地点の地図を、Google Maps API V3 で作成してみた。
 訪問順に番号付きのマークを入れたいのだが、なかなかうまく行かない。ネットでいろいろと探ってみたが、ピッタリのサンプルが見あたらない。そのようなサーチの間に、標準のマーカー・アイコンを種々のアイコンに変える方法が分かったので、赤い押しピンを模したアイコンを採用してみた。このような種々のマーカー・アイコンは、Google から提供されていて、ダウンロードしなくても直接リンクすることで使えることも分かった。

 この地図は、加賀地方へ旅行した時とほぼ同じ形式であるが、各地点の経度・緯度、写真へのリンクなどは、外部ファイルとしての XML ファイルを呼び込む形式を取っている。

2012年7月29日

隠居のパソコン備忘録: Google Maps API V3 で Polyline を描く


 自作地図を作成するのに便利していた Google Maps API のバージョンが、 V2 から V3 に大幅に変更され、来年5月には V2 で作成した地図が動かなくなりそうだということは、隠居のパソコン備忘録:Google Maps API V3 で旅行地図を作成するで、記録した。

 Studio YAMAKO のオーナーが、この2~3年に海外旅行した時の地図には、旅程を表す Polyline を表示している。これも、V3 になると書き換えなければならない。V2 では、XML ファイルに訪れた地点の経度・緯度を書き込んでおくと Polyline を描いてくれる sample code があったが、V3 では、そのような sample code は、ヒットしなかった。
 【Google Maps JavaScript API V3の使い方】というサイトに、【ポリラインの表示】というぺーじがあり、polyline を描くための訪問地点の経度・緯度を Javascript に直接記入する方法が紹介されていた。このサンプル・コードを参考に、先日記録した【Google Maps API JS V3 でXML ファイルを読み込む】の Javascript コードに追加してみると上手く動くことが分かった。老人の備忘録として、「トルコ周遊8日間の旅」の地図のコードを記録としておきたい。下のコードの青字部分が Polyline 表示のために追加した部分である。
 訪問地点の経度・緯度は、V2 のときに使っていた XML ファイルの中からコピーしてきた。記述する部分は少ないので、XML ファイルにする必要性はあまりない。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps Javascript API v3 Example: Loading the data from an XML</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://n-shuhei.net/JSlibrary/downloadxml.js"></script>

<style type="text/css">
html, body { height: 100%; } 
</style>

<script type="text/javascript"> 
//<![CDATA[
// this variable will collect the html which will eventually be placed in the side_bar 
      var side_bar_html = ""; 

      // arrays to hold copies of the markers and html used by the side_bar 
     // because the function closure trick doesnt work there 

      var gmarkers = []; 

     // global "map" variable
      var map = null;

// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });

    // save the info we need to use later for the side_bar
    gmarkers.push(marker);

    // add a line to the side_bar html
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}

// This function picks up the click and opens the corresponding info window
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}

function initialize() {
  // create the map
  var myOptions = {
    zoom: 6,
    center: new google.maps.LatLng(39.436193,29.86908),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

      // Read the data from hachi.xml
      downloadUrl("V3_maps_Turkey.xml", function(doc) {
        var xmlDoc = xmlParse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {

          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new google.maps.LatLng(lat,lng);
          var html = markers[i].getAttribute("html");
          var label = markers[i].getAttribute("label");

          // create the marker
          var marker = createMarker(point,label,html);
        }

      // put the assembled side_bar_html contents into the side_bar div
        document.getElementById("side_bar").innerHTML = side_bar_html;

// Polyline 表示の追加 ここから     
    var drivePlan = [
      new google.maps.LatLng(40.010787, 26.279297),
      new google.maps.LatLng(39.317035, 26.703644),
      new google.maps.LatLng(37.947176, 27.342567),
      new google.maps.LatLng(37.914409, 29.120979),
      new google.maps.LatLng(37.882441, 32.485199),
      new google.maps.LatLng(38.376115, 34.002686),
      new google.maps.LatLng(38.533127, 34.433899),
      new google.maps.LatLng(38.627063, 34.720917),
      new google.maps.LatLng(38.772019, 35.490303),
      new google.maps.LatLng(41.013066, 28.975067),
      new google.maps.LatLng(40.010787, 26.279297)
    ];
    var drivePath = new google.maps.Polyline({
      path: drivePlan,
      strokeColor: "#FF0000",
      strokeOpacity: 1.0,
      strokeWeight: 2
    });
      drivePath.setMap(map);
// ここまで 

      });
    }

var infowindow = new google.maps.InfoWindow(
  { 
//    size:  new google.maps.Size(200,50)
  });

//]]>

</script> 
  </head> 

<body style="margin:0px; padding:0px;" onload="initialize()"> 

<table border="1"> <tr>
<td bgcolor="#FFFFCC" align="center" colspan="2"><font color="#000000"><strong><big>「洞窟ホテルに泊まる!トルコハイライト周遊8日間」の旅</big></strong></font></td></tr>      
<tr><td> 
    <div id="map_canvas" style="width: 800px; height: 600px"></div> 
    </td> 
    <td width = 200 valign="top" bgcolor="#ffffcc" >
左の地図は、Google Mapsの機能を持っています。拡大・縮小・移動ができます。下の地名をクリックすると該当位置に吹き出しが出ます。吹き出しの中のリンクをクリックすると詳細地図あるいは関連投稿に飛びます。<br /><br />
    <div id="side_bar"style="text-decoration: underline; color: #000000; font-size: small;"></div> 
    </td></tr></table> 

    <noscript><p><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.</p>
    </noscript> 

  </body> 
</html> 


2012年7月21日

隠居のパソコン備忘録: Google Maps API JS V3 でXML ファイルを読み込む

 
 自作地図を作成するのに便利していた Google Maps API のバージョンが、 V2 から V3 に大幅に変更され、来年5月には V2 で作成した地図が動かなくなりそうだということは、隠居のパソコン備忘録:Google Maps API V3 で旅行地図を作成するで、記録した。

  V2 で作成した多くの地図では、外部ファイルである XML ファイルを読み込んでマーカを立てる地点やマーカをクリックすると出てくる吹きだしの中に、リンク先などの情報を表示していた。年間の旅行先などマーカが順次増える場合には、XML ファイルに経度・緯度や必要なリンクを書き足すだけでいいので便利をしていた。
 今まで V2 で作成してきた地図を V3 にバージョンアップして XML ファイルを読み込むためのサンプル・コードを探し回したが、適切なコードが見つからなかった。一から、作成する能力はからきしない。途方に暮れて、上のブログに記録した前回の方法で、XML ファイルを使わず直接 JavaScript に書き込むことも挑戦しかけたが途方も無い作業のようなのでやめて、今までの XML ファイルが使えそうなサンプル・コードで、再度粘ってみることにした。

 拝借したサンプル・コードは、上のブログに記録した前回の方法ときにも拝借した、【Using the Google Maps API v3】 というページにある【lLoading the data from an XML file translated to v3】のソース・コードである。
 V3 のGoogle Maps API にXML ファイルを読み込む方法は、多くの場合、前回に lightbox 2.51 の導入で紹介した JavaScript のライブラリー jQuery が使われている。拝借したサンプル・コードでは、jQuery ではなく、downloadxml.js というライブラリーが使われている。どうも、jQuery の方が本流らしいが、私にとっては、V3 で今までの XML ファイルが使えるサンプル・コードの方がありがたい。
 一週間以上かなりの時間を使って粘った甲斐があって、下のようなコードで XML が読み込めるようになった。
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps Javascript API v3 Example: Loading the data from an XML</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://n-shuhei.net/XXXXX/XXX/XXXXX/downloadxml.js"></script>

<style type="text/css">
html, body { height: 100%; } 
</style>

<script type="text/javascript"> 
//<![CDATA[
// this variable will collect the html which will eventually be placed in the side_bar 
      var side_bar_html = ""; 

      // arrays to hold copies of the markers and html used by the side_bar 
     // because the function closure trick doesnt work there 

      var gmarkers = []; 

     // global "map" variable
      var map = null;

// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });

    // save the info we need to use later for the side_bar
    gmarkers.push(marker);

    // add a line to the side_bar html
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}

// This function picks up the click and opens the corresponding info window
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}

function initialize() {
  // create the map
  var myOptions = {
    zoom: 12,
    center: new google.maps.LatLng(35.377556,134.534862),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

      // Read the data from hachi.xml
      downloadUrl("hachi.xml", function(doc) {
        var xmlDoc = xmlParse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {

          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new google.maps.LatLng(lat,lng);
          var html = markers[i].getAttribute("html");
          var label = markers[i].getAttribute("label");

          // create the marker
          var marker = createMarker(point,label,html);
        }

        // put the assembled side_bar_html contents into the side_bar div
        document.getElementById("side_bar").innerHTML = side_bar_html;
      });
    }

var infowindow = new google.maps.InfoWindow(
  { 
//    size:  new google.maps.Size(200,50)
  });

    // This Javascript is based on code provided by the
    // Community Church Javascript Team
    // http://www.bisphamchurch.org.uk/   
    // http://econym.org.uk/gmap/
    // from the v2 tutorial page at:
    // http://econym.org.uk/gmap/basic3.htm 

//]]>

</script> 
  </head> 

<body style="margin:0px; padding:0px;" onload="initialize()"> 

    <!-- you can use tables or divs for the overall layout --> 
    <table border="1"> 
<tr>
<td bgcolor="#FFFFCC" align="center" colspan="2"><font color="#000000"><strong><big>ハチ高原近辺私的観光地図</big></strong><br /></font></td></tr>      
<tr> 
        <td> 
           <div id="map_canvas" style="width: 800px; height: 600px"></div> 
        </td> 
        <td width = 200 valign="top"  bgcolor="#ffffe0" style="text-decoration: underline; color: #000000; font-size: small;" >
<!--<td valign="top" style="width:150px; text-decoration: underline; color: #4444ff;">-->
           <div id="side_bar"></div> 
        </td> 
      </tr> 
    </table> 

    <noscript><p><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.</p>
    </noscript> 

  </body> 
</html> 
サンプル地図

 試行錯誤は、拡張子の前につける . (ピリオド)が抜けていたり、ファイルのアップロード先を間違ったりなど実に単純なミスの連続であった。
 とくに、Geekなぺーじの【Google MAPS JavaScript APIでのデバッグ】にも書かれているように、日本語コードで最後までつまづいた。V2 のときには、Shift-JIS でも OK だったXML ファイルが、UTF-8 でないとエラーを起こすというより、全く読んでくれない。
 この試行錯誤のお陰で、Google Maps API について、少し理解が深まったが、JavaScript に十分な知識がない老人にはやっぱり難解な世界である。中断していた JavaScript の学習も再開せねばと思うが、なにしろやりたいことが多すぎる。
 来年5月までに、順次 V2 の地図を V3 にしていくつもりである。

2012年7月12日

隠居のパソコン備忘録:Google Maps API V3 で旅行地図を作成する


 Google が提供する自分好みの地図を作成できるサービス Maps JavaScript API の バージョンUP(V2 ⇒ V3)が2009年5月に発表されている。最近になって、V2 は廃止され、V3 がリコメンドされていることを知った。プロ向けと思われる【Google Deveopers】というサイトにある【Google Maps JavaScript API V3】 のページには、次のような記載がある。
注: このページに記載されている Google Maps JavaScript API バージョン 3 は、正式な JavaScript API となりました。JavaScript API バージョン 2 は、Google の廃止ポリシーにより正式に廃止されました。アップデート、拡張された新しいバージョンに、コードを移行することをおすすめします。

さらに、Deprecated(非推奨という意味か?) と記されている V2 のページには、次の記載がある。
Note: The Google Maps JavaScript API Version 2 has been officially deprecated as of May 19, 2010. The V2 API will continue to work until May 19, 2013. We encourage you to migrate your code to version 3 of the Maps JavaScript API.

なんと来年5月には、動かなくなりそうだ。私のサイトには、V2 作成した地図を数多く掲載している。慌てて、V3 の学習を始めた。V2 に比べると大幅に変更になっている。サンプルコードをパクリして、作成してきた地図を、基本的な知識が乏しい老人が、今までのコードをバージョンアップするのは至難の技に思われる。それで、今までのコードのバージョンアップは諦めて、ネットで紹介してくれているV3 版のサンプルコードを頼りに、新しく書いて見ることにした。

 ようやくたどり着いたのが、7月10日に収載した【加賀地方旅行地図】である。この地図を例として、作成方法を備忘録として記録しておきたい。

 やりたいことは、
  1. 旅行した地域をカバーする地図を表示する。
  2. 観光した地点にマーカーを立てる。
  3. マーカーをクリックすると吹きだし(infowindow) がでる。
  4. infowindow には、撮った写真の表示や観光地点のURL へリンクを表示できるようにする。
  5. 地図の枠外に訪問地点名を表示し、クリックすると地図上の該当マーカに、infowindow が表示するようにする。
  6. できあがった地図は、私のブログ(Movable Type 4)で、エントリーとして機能するようにする。

 このような地図は、Google Maps API V2 では、できていたのであるが、V3 では初めての試みである。
 ささやかな JavaScript の知識か持たない私の技術では、これを一から作成することは困難である。Sample コードをネットで探し回したところ、【Using the Google Maps API v3】 というページに、要望にあったコード(Mike Williams' tutorial The Basics - Part 2: Adding a clickable sidebar translated to v3)を見つけることができた。Mike Williams' tutorial は、V2 の地図を作成するときにほとんど丸写しに近く参照させていただいたサイトである。残念ながら、このサイトでの V3 によるサンプルコードはない。このV2 でのコードをどなたかが、V3 に translate されたコードである。

 このサンプルコードをもとに、作成した旅行地図 のコードは、以下のとおりである。
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps Javascript API v3 Example: Adding a clickable sidebar</title><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<style type="text/css">
  html, body { height: 100%; } 
</style>

<script type="text/javascript"> 

//<![CDATA[

    var side_bar_html = ""; 
    var gmarkers = []; 
    var map = null;

function initialize() {
    var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(36.338359,136.446075),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  google.maps.event.addListener(map, 'click', function() {
   infowindow.close();
   });

  var point = new google.maps.LatLng(36.056871,136.355095);
  var marker = createMarker(point,"永平寺","<a href='./travel-eiheiji.html' target='_blank'>永平寺 写真サムネイル画像</a>")

  var point = new google.maps.LatLng(36.237628,136.125712);
  var marker = createMarker(point,"東尋坊","<a href='./travel-tojinbo.html' target='_blank'>東尋坊  写真サムネイル画像</a>")

  var point = new google.maps.LatLng(36.228506,136.175559);
  var marker = createMarker(point," そば処あおき","<a href='http://fukui-shop.net/soba/208449/' target='_blank'>URL: そば処あおき</a>")

  var point = new google.maps.LatLng(36.243996,136.374664);
  var marker = createMarker(point," 山中温泉","<a href='./travel-yamanaka.html' target='_blank'>山中温泉 写真サムネイル画像</a><br /><a href='http://yoshinoyairokuen.jp/viewpoint/map_aki_fuyu.pdf' target='_blank'>PDF: 山中温泉案内図</a><br /><a href='http://www.daiwaresort.co.jp/kajikasou/' target='_blank'>URL: 河鹿荘ロイヤルホテル</a>")

  var point = new google.maps.LatLng(36.322871,136.294327);
  var marker = createMarker(point," 鴨池観察館","<a href='./travel-kamoike.html' target='_blank'>鴨池観察館 写真サムネイル画像</a><br /><a href='http://park15.wakwak.com/~kamoike/' target='_blank'>URL: 鴨池観察館</a>")

  var point = new google.maps.LatLng(36.56098,136.658249);
  var marker = createMarker(point," 金沢21世紀美術館","<a href='./travel-21seiki.html' target='_blank'>金沢21世紀美術館 写真サムネイル画像</a><br /><a href='http://ja.wikipedia.org/wiki/%E9%87%91%E6%B2%A221%E4%B8%96%E7%B4%80%E7%BE%8E%E8%A1%93%E9%A4%A8' target='_blank'>URL: 金沢21世紀美術館</a>")

  document.getElementById("side_bar").innerHTML = side_bar_html;
}
var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });

function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}

function createMarker(latlng, name, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });

    gmarkers.push(marker);

   side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a>  ';
}
 
//]]>

</script> 

</head> 

<body style="margin:0px; padding:0px;" onload="initialize()"> 
     <table border="1"> 
      <tr> 
        <td> 
           <div id="map_canvas" style="width: 720px; height: 650px"></div> 
        </td>
      </tr><tr>   
        <td valign="top" style="width:720px; font-size:small; color: #4444ff;"><strong>観光場所:クリックすると該当場所に吹きだしがでます。</strong><div id="side_bar"> </div> 
        </td> 
      </tr> 
    </table> 

    <noscript><p><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.</p>
    </noscript> 

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> 
 </body> 
</html> 


 このコードについて、若干補足して記録しておきたい。
  • マーカーを立てる経度・緯度の数値は、「Google マップ 地図検索」で検索した地点に出てくるマーカを右クリックすると出てくるポップアップにある「この場所について」をクリックすると 検索文字を入れるボックスに表示される。
  • infowindow の中に表示するURLや写真ページヘのリンクは、HTMLコードを書く要領で書けば良い。
  • side-bar は サンプルコードでは 地図の右枠外であるが、HTMLコードでテーブルを作成する要領で(</tr><tr> ) 行を変えれば、地図の下枠外に表示できる。


 なお、写真の表示に、ブログで使ってきた lightbox (当ブログで使っている写真表示手法)のコードを書いても、Google Maps API というJavaScript の中で、lightbox というJavaScript を使うことになり、うまく表示されない。もう少し勉強すればできるのかもしれないが、次善の策として、ワンクッションおいてサムネイル画像を表示することにした。なお、lightbox については、今回の学習中に、jQuery.js という JavaScript のライブラリーを使ったバージョンが出ていることが分かった。(従来は、prototype.js を使っていた)
jQuery 版lightbox については、稿を改めて記録したい。

 作成した地図を、MT4 のブログにエントリーするには、<iframe>をつかって次のようにブログの中に取り込めば良い。
<iframe src="http://n-shuhei.net/atelier/maps/travel-kaga.html" width="740" height="700" scrolling="NO" frameborder="0"></iframe>


 なお、ブログの右フレームに載せている地図は、Google Maps API V2 で作成しているが、ここでは、xml ファイルを使っている地図が多い。V3 でのXML との連携についても学習しなければならない。おかげで、当分痴呆にはならないだろうが。

2012年4月22日

隠居の花見:奈良大宇陀の桜を巡る


 4月16・17日、50年も前の学生時代に教育キャンプのカウンセラーをしていた同期仲間7人で、今年は大宇陀の又兵衛桜を見に行くことになった。
 昨年は、東北大震災のこともあって、神戸須磨浦公園でのランチ&花見で済ましていた。一昨年は、吉野の桜を見に行ったのだが

 今年は、桜の開花が遅い。仲間で奈良に住む二人がいろいろと手配をしてくれたが、下見に行くと予定をしていた4月9/10日では、桜見のメインとなる大宇陀にある又兵衛桜は全く開花はなさそうだという。夜桜や早朝の桜を見るには、近くに宿泊が良いということで、手配してくれていた予約も急遽、宿に無理を言って一週間延ばしてくれた。二人は車も出してくれて運転を引き受けてくれた。良き友を持って幸せである。

有田焼と和紙ナプキン;クリックすると大きな写真になります 埼玉からくる仲間と落合やすいように、近鉄の大和八木(新幹線京都駅から乗り換えて来られる)で12時に奈良の友人に拾ってもらった。昼食は、飛鳥寺近くの茶粥懐石料理の「神籬(ひもろぎ)」という店を予約してくれていた。昔から奈良にはあまり美味しいものはないという印象を持っていたが、ここの料理はなかなかのものであった。料理の下に敷かれた和紙ナプキンには、各人ごとに異なった万葉集の歌が書かれていた。

花吹雪;クリックすると大きな写真になります= 近くの飛鳥寺に参ってから、石舞台古墳に行く。昔、来た時には、石舞台がポツンと置かれていただけの公園だったが、今は随分整備されて有料にもなっている。ソメイヨシノは、落花盛んというところで、花吹雪の向こうに石舞台が霞んでいた。近くの農家の庭で泳ぐ鯉のぼりの向こうには、段々畑が広がっていた。のどかである。

 怪しかった雲行きとおり、次の目的地 談山神社に着く頃には弱い雨となった。談山神社でも、ソメイヨシノが満開であった。 
又兵衛桜の由来;クリックすると大きな写真になります 今回の旅行の目玉である本郷の瀧桜(又兵衛桜)は、傘をさしての見物となった。TV で取り上げられたりしているので、そんな中でも大勢のカメラマンが三脚を立てていた。ちょうど満開ということもあり、見逃してはならないのだろう。奈良の仲間によれば、その日は平日で天候もあいにくということで、これでも人出はずいぶん少ないらしい。
 又兵衛桜という名前の由来を説明する看板も立てられていた。この桜一本で、駐車場・桜に近づくための協力金、土産物などでこのあたりはこの時期だけ潤っているのかもしれなない。期待していた夜桜は、天候不順のために中止になったようだ。明日の天候回復を祈って、近くの宿 今阪屋で足を休めた。夕食で食した薬草料理も美味しく酒がすすんだ。

又兵衛桜:友人の写真;クリックすると大きな写真になります  翌朝、快晴である。 朝食前6時に宿を抜け出し、朝の太陽にひときわ鮮やかに鮮やかになった滝桜を満喫した。芸術的写真を狙ってアチラコチラに出かけている仲間の一人は、背景に朝もやがかかる写真を撮りたいと言っていたが、そのとおりの状況となり満足していたようだった。送ってくれた写真を拝借した。彼が写真の趣味を始めたのは私よりすこし前だが、随分上手である。野鳥ばかり追っかけて撮る写真とは狙いも、道具立ても異なるようだ。

 宿に帰って朝食をすませ、室生寺に向かった。奈良の仲間は、国道165号線から少しそれた小さな公園で車を駐めた。鯉のぼりが多数泳ぎ、ソメイヨシノが満開である。ご近所のご老人が、グランドゴルフを楽しんでいた。近くには、近鉄大阪線が走っている。撮り鉄なら、近鉄電車の絶好の撮影ポイントかもしれない。
ボケの花;クリックすると大きな写真になります紫木蓮;クリックすると大きな写真になります 室生寺に向かう途中に、大野寺という寺がある。ピンクと白の枝垂れ桜が満開である。このお寺、駐車場はタダで、ボランティアらしき人が陽気に誘導してくれた。小さな庭には、様々な花が咲いている。レンギョウ・トサミズキ・ボケ・紫木蓮といった花が、枝垂れ桜の下で鮮やかである。なんとなく気分がいい。


 室生寺についた。ここも、ソメイヨシノが満開である。仲間はみんな70前後になるのに、ヨーロッパ・アルプスをトレッキングしたり、冬の上高地にいくなど元気である。それで、700段ある奥の院への階段を登るという。普段、鳥を追っかけてののんびりした散策しかしていない身には、いささかハードであったが、なんとか登り切ることができた。山門の川向にある橋本屋で山菜料理の昼食をとるときには、シャツは汗でびっしょりであった。
 埼玉から来た仲間が予約している新幹線までに、もう少し時間があるというので、奈良の仲間は赤目四十八滝まで車を走らせてくれた。ここには、桜はない。室生寺もそうだが、紅葉の季節にもう一度訪れてみたい場所である。

 右フレームに掲載した地図に、立ち寄った場所をさくらの花びらでマークしてみた。マークをクリックすると、ふき出しが表示され、その地名とそこで撮った写真へのリンクが表示される。また、地図下の地名をクリックすると、その場所にふき出しが表示される。

2011年9月15日

Google Maps API で信州旅行地図(訪問地点写真つき)を作る

 このところは泊まりがけの旅行にいくたびに、Google Maps API で地図を作って残している。今回の旅行地図は、右メニューに【晩夏の信州私的観光地図】として記録した。

 このような地図を作るために、過去にさまざまなトライアルをしてきた。その時々で、幾つかの学習をしてきたことを以下のエントリーで記載している。
 また、Google Maps も、Picasa web Album との連携がとれるなど様々な改良が加えられてきている。これらの機能を活かすために、私はデジカメに撮影した地点の経度・緯度・高度情報が取り込めるように、GPS(Nikon GP-1) をつけている。さらに、最近使い始めたスマホ Xperia acro のカメラ機能にもGPS が付属している。例えば、このカメラで撮ったホテルの露天風呂の位置は、北緯36度41分24秒、東経137度51分30秒で、標高は737mである。
 これらの位置情報が得られないコンデジ(GPS 機能がついていないカメラ)などでは、Picasa のウェブアルバム機能を使えば、場所情報を簡単に付加することができ、撮影データが記録される写真の Exif に附加される。このあたりの方法については、下の2011年1月16日の【Google Maps: Picasa を使って野鳥出現地点をプロットする】に詳しく記録している。

 このような記録を残すことによって、旅の思い出を鮮明によみがえらせることができるのではないかと思う。

隠居の探鳥ウォーク:泉北ニュータウン栂地区で観察した水鳥をプロットしてみた
隠居のGoogle Maps: (続)Google Maps API を使って野鳥出現地点をカスタム・マーカーでプロットする
隠居のGoogle Maps: Picasa を使って野鳥出現地点をプロットする
隠居の探鳥ウォーク:堺市で撮影した秋の野鳥たち
隠居のパソコン備忘録:Google Maps と Picasa を使って位置情報を持つ写真を掲載する
隠居の写真整理:Picasa でGPS ユニットを使って撮影場所を記録する
隠居のGoogle利用:検索したGoogle マップをメール・ブログに貼り付ける
Google Maps API で旅行地図を作る:線画を描くなど
隠居のGoogle Maps:IE8 での不具合を回避する
Google Maps API で旅行地図を作る:番号付きマーカーを使う
隠居のパソコン備忘録:Google Maps API を使った地図ページでの文字化け対策
伊勢参り
泉北ニュータウン私的観光地図:Google Maps API Trial_5
改訂:早春の鹿児島:Google Maps API に litebox を使う
道東ドライブ:Google Maps API Traial_3
泉北近辺私的観光地図:Google Maps API Trial_2
泉北の紅葉:Google Maps API v2 Trial
Google Maps API の利用規約要約
キャプチャーで使う地図の著作権
泉北の紅葉:2006

2011年8月15日

隠居のスマートフォン備忘録:(5)Xperia acro で地図検索・Navi・乗換案内など


 私が使っているスマートフォン Xperia acro SC-02C の OS は、Android 2.3.3 (ホームページ⇒メニューボタン⇒設定⇒端末情報で表示される)である。Android は、Google を中心に構成された「OHA」(Open Hanadset Alliance) と呼ばれる業界団体によって、開発や普及が進められている。OHA には、Google のほかに、NTTドコモやKDDI 、ソフトバンクモバイルといった世界中の通信業者、ソニー・エリクソンやサムスン、シャープ、東芝、LGエレクトロニクス、HTC などの携帯電話メーカー、クアルコムやインテルなどの半導体メーカーが参加している。Android を採用したスマートフォンは、現在、世界でもっとも広く利用されている標準プラットホームである。

 従って、パソコン本体でGoogle が提供しているサービスはほとんどスマートフォンで利用できる状況である。その上、 Xperia acro などには、ポータブルならではの GPS 機能などがついているから、パソコン本体ではできないナビゲーション機能などが実行できる。
 パソコン本体での Google マップは、もちろん Xperia acro にも地図検索が【マップ】アプリとして標準にインストールされている。
  
マップ アプリ;クリックすると大きな写真になります検索ボックスに入力;クリックすると大きな写真になります場所の紹介画面;クリックすると大きな写真になります経路選択画面;クリックすると大きな写真になります
マップ アプリをタップすると直近見ていたマップが表示される
「地図を検索」ボックスをタップすると入力画面となる。
「地図を検索」ボックスに、検索したい場所(例えば、神戸市立森林植物園)を入力すると地図が表示される吹きだしをタップすると、検索した場所(例えば、神戸市立森林植物園)の詳細紹介画面が現れる。前の画面で、経路ボタンをタップすると、交通手段(車・公共交通機関・徒歩)の選択画面となる。
車での経路画面;クリックすると大きな写真になりますナビゲーション画面;クリックすると大きな写真になります公共交通機関を選択した時の画面;クリックすると大きな写真になります徒歩の場合の経路;クリックすると大きな写真になります
車を選択すると運転ルート画面が表示される。
ただし、普通のカーナビでは選択しないようなルートだ。ルートを選択するオプションはないようだ。
この画面で右上のナビボタンをタップするとナビゲーションが始まる。
前の画面で右上のナビボタンをタップするとナビゲーションが始まる。
 音声はかなり大きくなる。徒歩の場合も同様な画面となる。
経路選択で公共交通機関を選択した時の画面。
Google の乗換案内のように、いくつかの選択肢が出て、その一つを選択すれば、乗換案内が出る。
徒歩の場合の経路。
歩いていけば、12時間48分かかることが表示されている。


 カーナビとして使うのは、まだ少し問題があるようだが、乗り換え案内や駅から徒歩でどこかに行くような場合には、便利そうである。機会があれば使ってみたいものだ。

 Xperia acro には、【ドコモ地図ナビ】というアプリも搭載されている。現在は、トライアルサービスということで、2011年10月までは無料であるが、それ以降は、月315円が必要なようだ。
 まだ十分に使えていないのだが、有料ということだけあって、なかなかよくできたアプリのようである。有料であるので、docomo ID認証という登録が必要である。上記の Google マップで取り上げた自宅から神戸市立森林植物園へのナビを例に比較してみたい。
メニュー画面;クリックすると大きな写真になります目的地を設定する画面;クリックすると大きな写真になりますカーナビのルート表示画面;クリックすると大きな写真になりますカーナビのルート地図
【ドコモ地図ナビ】を立ち上げて、メニューボタンを押すと上記の画面となる。左の画面でナビアイコンを選択し、続いて出てくる画面で目的地を設定する。今までの履歴や登録地点からも選択できる。
また、現在地は GPS で特定してくれる。また、登録画面から選択もできる。
車で行くのか、徒歩・電車で行くのかは、この画面で選択する。
左の画面でカーナビを選択し、ルート検索 をタップすると、有料道路利用か一般道かの選択画面が出てくる。
有料道路利用の方を選択すると上のようなカーナビのルート詳細画面が出てくる。
左の画面で地図ボタンをタップすると、ルートの地図が表示される。
Google マップ・ナビと異なるルートである。こちらのほうが一般的な感じがする。
シミュレート画面;クリックすると大きな写真になります徒歩・電車でのルート詳細表示画面;クリックすると大きな写真になります徒歩・電車でのルート地図画面;クリックすると大きな写真になりますシミュレーション画面;クリックすると大きな写真になります
上のルート詳細画面で、ナビ開始ボタンをタップし、すぐにナビ停止ボタン(でない場合は、表示onボタンをタップする)をタップすると、シミュレーション画面がでてくるので、タップすると目的地までのルートをシミュレートしてくれる。目的地まで行く手段を「徒歩・電車」を選択すると、徒歩部分も含んだ乗換案内が表示される。左の画面で、「ルート確認」ボタンをタップすると電車で行く経路が表示される。徒歩・電車の場合もルートのシミュレーションができる。シミュレーションは音声案内もついている。この機能を使って前もって情報を得ておけば、実際で迷うこともなくなるだろう。


 機会があったので、よく行くショッピング・モールへのナビを、Xperia acro と車(トヨタ)についているいわゆるカーナビと両方をセットして比較してみた。この実験では、明らかに車に装備されているカーナビの方が、きめ細かな案内がされるし、リルートの速度も早かった。ひょっとして、【ドコモ地図ナビ】のデータは古いのではないかと思われた。
 ただ、【ドコモ地図ナビ】には、私の古いカーナビにはついていない VICS とかオービスの機能がついているので、両方を使い分けるのがいいのかもしれない。
 徒歩・電車でのナビは、今までパソコンで検索した乗換案内をプリントして持ち歩いていたことを考えるとずいぶん楽である。 。

関連エントリー

 

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 を呼びこんでくるコードを挿入する。


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

2011年1月29日

隠居のGoogle Maps: (続)Google Maps API を使って野鳥出現地点をカスタム・マーカーでプロットする

 先にエントリーした【隠居のGoogle Maps: Picasa を使って野鳥出現地点をプロットする】の方法では、プロットする地点を追加しようとすると、そこで記録した 4. 以降のかなり厄介な作業を、一からやり直さなければならないことが分かった。これでは不便である。

 それで、もとに戻って、自由度の高い Google Maps API を応用することを再度試みることにした。右フレームにおいている【京都・滋賀・奈良近辺私的観光地図】のような方式に変えれば、XML ファイルに位置情報と写真へのリンクを追加するだけで、プロット地点を増やしていけることが分かっている。ただ、先のエントリーのように、プロット地点に立てるマーカーを鳥のアイコンにする方法が、乏しい知識ではなかなかわからなかった。マーカーを任意のものに変える方法は色々と紹介されているが、外部のXML ファイルを呼びこんでくるようなコードは紹介されていなかった。

 いろいろとトライしているうちに、どうやら使えそうにコードが、Google から紹介されているのを見つけた。このコードを応用して追加・訂正することで カスタム・マーカー ができたので、忘れないうちに記録しておくことにした。

 仕樣は【野鳥の写真サムネイル】の種別名欄に、【撮影地点地図】 というボタンを置き、これをクリックすると新しい画面が開き、小鳥のマーカーが地図上にプロットされる。このマーカーか、右フレームの地名をクリックすると、その地点で撮影した野鳥の写真が吹きだしに表示される仕組みである。
そして、ここが肝心なのだが、新しい写真とその撮影地点は、XML ファイルで容易に追加することができるようにしたことである。カワラヒワの撮影地点地図を例にとって、以下、順を追って記録する。

  1. まず、XML ファイルを呼びこんで地図にマーカーを立てるもととなる html コード(Google Maps API の JavaScript が含まれている。)を用意する。このオリジナルは、Google Maps API Tutorial からいただいたもので、【道東ドライブ:Google Maps API Traial_3】のエントリーで紹介している。
    このHTML コードの中で、使用している JavaScript は、以下のようなものである。
    
    <script type="text/javascript">
        //<![CDATA[
    
        if (GBrowserIsCompatible()) {
          // this variable will collect the html which will eventualkly be placed in the side_bar
          var side_bar_html = "";
        
          // arrays to hold copies of the markers and html used by the side_bar
          // because the function closure trick doesnt work there
          var gmarkers = [];
          var htmls = [];
          var i = 0;
    
          // A function to create the marker and set up the event window
          function createMarker(point,name,html) {
            var marker = new GMarker(point);
            GEvent.addListener(marker, "click", function() {
              marker.openInfoWindowHtml(html);
            });
            // save the info we need to use later for the side_bar
            gmarkers[i] = marker;
            htmls[i] = html;
            // add a line to the side_bar html
            side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
            i++;
            return marker;
          }
    
          // This function picks up the click and opens the corresponding info window
          function myclick(i) {
            gmarkers[i].openInfoWindowHtml(htmls[i]);
          }
    
    
          // create the map
          var map = new GMap2(document.getElementById("map"));
          map.addControl(new GLargeMapControl());
          map.addControl(new GMapTypeControl());
          map.setCenter(new GLatLng( 43.745305,144.431763), 9);
    
    
          // Read the data from example.xml
          var request = GXmlHttp.create();
          request.open("GET", "http://n-shuhei.net/xxxx/xxx/trial.xml", true);
          request.onreadystatechange = function() {
            if (request.readyState == 4) {
              var xmlDoc = request.responseXML;
              // obtain the array of markers and loop through it
              var markers = xmlDoc.documentElement.getElementsByTagName("marker");
              
              for (var i = 0; i < markers.length; i++) {
                // obtain the attribues of each marker
                var lat = parseFloat(markers[i].getAttribute("lat"));
                var lng = parseFloat(markers[i].getAttribute("lng"));
                var point = new GLatLng(lat,lng);
                var html = markers[i].getAttribute("html");
                var label = markers[i].getAttribute("label");
                // create the marker
                var marker = createMarker(point,label,html);
                map.addOverlay(marker);
              }
              // put the assembled side_bar_html contents into the side_bar div
              document.getElementById("side_bar").innerHTML = side_bar_html;
            }
          }
          request.send(null);
        }
    
        else {
          alert("Sorry, the Google Maps API is not compatible with this browser");
        }
    
        //]]>
        </script>
    

    上のコードの赤字部分を、下のコードと置き換えれば、標準マーカーを小鳥のアイコン(この場合、カワラヒワのアイコン)で表示できることが分かった。この時、用いるイメージは、必ずしも .png ファイルだけではなく .gif ファイル、.jpg ファイルでもOKである。
    
    // Create birds marker icon
           var birdIcon = new GIcon(G_DEFAULT_ICON);
           birdIcon.image = "http://n-shuhei.net/Libraly/Icon/birds/kawarahiwa.gif";
           birdIcon.iconSize = new GSize(20, 34);
                    
    // Set up our GMarkerOptions object
           markerOptions = { icon:birdIcon };
    
    // A function to create the marker and set up the event window
          function createMarker(point,name,html) {
          var marker = new GMarker(point,birdIcon);
    

  2. このコードを入れた JavaScript は以下のようになる。
    
    <script type="text/javascript">
        //<![CDATA[
    
        if (GBrowserIsCompatible()) {
    // this variable will collect the html which will eventualkly be placed in the side_bar
        var side_bar_html = "";
        
    // arrays to hold copies of the markers and html used by the side_bar
    // because the function closure trick doesnt work there
        var gmarkers = [];
        var htmls = [];
        var i = 0;
    
    // Create birds marker icon
        var birdIcon = new GIcon(G_DEFAULT_ICON);
         birdIcon.image = "http://n-shuhei.net/xxxxxxx/Icon/birds/kawarahiwa.gif";
           birdIcon.iconSize = new GSize(20, 34);
                    
    // Set up our GMarkerOptions object
           markerOptions = { icon:birdIcon };
    
    // A function to create the marker and set up the event window
        function createMarker(point,name,html) {
        var marker = new GMarker(point,birdIcon);
         GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
            });
    
    // save the info we need to use later for the side_bar
        gmarkers[i] = marker;
        htmls[i] = html;
    
    // add a line to the side_bar html
        side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
            i++;
        return marker;
          }
    
    // This function picks up the click and opens the corresponding info window
        function myclick(i) {
            gmarkers[i].openInfoWindowHtml(htmls[i]);
          }
    
    // create the map
          var map = new GMap2(document.getElementById("map"));
          map.addControl(new GLargeMapControl());
          map.addControl(new GMapTypeControl());
          map.setCenter(new GLatLng(34.48675,135.490608),14);
    
    // Read the data from example.xml
          var request = GXmlHttp.create();
          request.open("GET", "http://n-shuhei.net/atelier/xxxxx/xxxxxxxx/API_kawarahiwa.xml", true);
          request.onreadystatechange = function() {
          if (request.readyState == 4) {
          var xmlDoc = request.responseXML;
    // obtain the array of markers and loop through it
          var markers = xmlDoc.documentElement.getElementsByTagName("marker");
              
          for (var i = 0; i < markers.length; i++) {
    // obtain the attribues of each marker
                var lat = parseFloat(markers[i].getAttribute("lat"));
                var lng = parseFloat(markers[i].getAttribute("lng"));
                var point = new GLatLng(lat,lng);
                var html = markers[i].getAttribute("html");
                var label = markers[i].getAttribute("label");
    // create the marker
                var marker = createMarker(point,label,html);
                map.addOverlay(marker);
              }
    
    // put the assembled side_bar_html contents into the side_bar div
              document.getElementById("side_bar").innerHTML = side_bar_html;
            }
          }
          request.send(null);
        }
    
        else {
          alert("Sorry, the Google Maps API is not compatible with this browser");
        }
    
        //]]>
        </script>
    

  3. 上の JavaScript で青色文字で示したのは、以下の3箇所である。
    • マーカーに使うアイコン
    • 地図の中心となる経度・緯度と地図の縮尺の大きさ
    • 呼びこんでくる XML ファイル
    この3箇所は作成する地図ごとに書き換えねばならない。
  4. 呼びこんでくる XML ファイルには、
    • マーカーを立てる位置(経度・緯度)
    • リンクする写真のサーバー内のありか
    • ラベル(地図の右フレームに表示する地名)
    をリストする必要がある。このファイルの編集には、私は XML Notepad というソフトを使っている。duplicate 機能があるので楽ちんである。
  5. マーカーを立てる経度・緯度の値は10進法でなければならない。これは、【隠居のGoogle Maps: Picasa を使って野鳥出現地点をプロットする】で記載した方法(2. および 3.)のように Picasa のウェブアルバムで行うと、アルバムにある写真をクリックすると、右フレームに10進法の経度・緯度が表示される。
     Picasa の写真プロパティで表示される EXIF では、表示は 60進法になっている。 Picasa のウェブアルバムの助けを借りるのは、そのためである。
  6. リンクする写真のありか(例えば、 http://n-shuhei.net/xxxx/xxxx/xxxxx.jpg )は、【野鳥の写真サムネイル】で、種別表示をして写真サムネイルの下に表示されているリンク先のエントリーのソースからコピーしてくる。これが、少々煩わしいが、仕方ない。なにかいい方法がないか考えてみたい。
     このようにして作成した小鳥マーカーが表示された地図のサンプルは、以下である。
     Example:
  7. 【野鳥の写真サムネイル】の種別名欄に、【撮影地点地図】 というボタンを置き、これをクリックするとこの地図が、新しい Window で開くようにするために、下のような別の JavaScript を使っている。
    // POPUP Window
    
    function open_win_kawarahiwa(){
    window.open("http://n-shuhei.net/atelier/xxxxx/xxxxxxxxx/API_kawarahiwa_m.htm","","
    menubar=no,toolbar=no,location=yes,status=yes,scrollbars=yes,resizable=yes,
    width=950,height=600,left=50,top=50"); }

    この JavaScripr ファイルを、【野鳥の写真サムネイル】の、種別表示をしているページのHTML の <head> 部分に次のように読み込み、
    <script type="text/javascript" src="http://n-shuhei.net/atelier/xxxxx/xxxxxxxxx/pup_kawarahiwa.js"></script>
    、【撮影地点地図】 というボタンをクリックすると地図が新しい window に開くように、<body> 部の適切な位置に、次のコードを置いた。
    <input type="button" value="撮影地点地図" onClick="open_win_kawarahiwa()">

  8. 作成した地図は、まだカワラヒワだけであるが、順次時間を見て増やしていきたいと思う。泉北ニュータウンのごく限られた地域ではあるが、記録としては面白いのではないかと思っている。
     カワラヒワのプロット地図

2011年1月16日

隠居のGoogle Maps: Picasa を使って野鳥出現地点をプロットする


 最近、野鳥撮影はもっぱら NikonD90 と Σ120-400mm との組み合わせである。これに、GPS ユニットの Nikon GP-1 を付けている。これだと、カメラのアクセサリー・シューにつけて、アクセサリー・ターミナルとコード接続しておけば、撮った写真のEXIF(イグジフ:exchangeable image file format for digital still cameras)情報の一部として撮影時刻などと同じように経度・緯度・高度が記録される。つい最近までは、SONY の GPS を一緒に携帯し、GPS Image Tracker というソフトを使って、撮影位置情報を得てきたが、写真の整理に時間がかかり手間であった。
この情報を使って、【野鳥写真のサムネイル】からリンクする野鳥撮影地点プロット地図を作成したいとと思ってきた。なんでも記録することが、このごろの習い性となっている。

 方法については、右サイドフレームに載せている旅行地図作成に使っている Google Maps API の応用を何度かトライしてみたが、乏しい知識では満足いく結果は得られなかった。
 そこで、 昨年10月に掲載した、【隠居のパソコン備忘録:Google Maps と Picasa を使って位置情報を持つ写真を掲載する】の方法をもとに、位置情報を持たない写真に位置情報を付加するなどの新しいやり方も付け加えて、プロット地図を作ってみた。先のエントリーと重複する部分もあるが、改めて備忘録として残しておきたい。
 私の場合、今まで撮影した写真は Picasa に収納している。オリジナルの写真はほとんどNikon D90 の Fine L(4288x2848pixel) あるいはD70 Fine L(3008x2000pixel) で撮っているが、ブログに載せる写真は、800x530pixel に縮小して別フォルダに収納している。これらの写真を種別に整理したのが、【野鳥写真のサムネイル】である。
種別野鳥の撮影地点プロット地図を作成する方法を、以下、順をおって記録する。例として、野鳥サムネイルに掲載しているツグミの写真撮影地点地図の作成を取り上げる。

  1. プロット地図を作成するためには、これらの写真を集めておく方が後々便利なので、適切な場所に新しいフォルダーを作成(一般的な方法で,今回は、【tsugumi】というフォルダーを作成)し、収納する写真をこのフォルダーにエクスポートした。
  2. このようにして集めた写真をPicasa のライブラリー・サムネイル写真でみると、EXIF に経度・緯度が取り込まれている場合には、下のスクリーンショットのようにサムネイル写真にマーカーが表示される。ここで集めた写真は、GPS ユニットを使っていなかったときの写真も含まれるので、マーカーが表示されていない写真もある。

    birdsplot_01.JPG
  3. マーカーが表示されていない写真の撮影地点マークを貼り付けるには、Picasa の下段ツール・アイコンで【「場所」パネル表示/非表示】ボタンをクリックするとおなじみの Google Map の地図が出てくるので、Google Map の機能を使って拡大・縮小や移動を行い、写真を撮った地点が特定できる区域地図を表示させる。
     撮影地点を特定したい写真を選択し、地図の拡大(+)・縮小 (ー)マーク横の緑マーカーをクリックすると緑色の小さなマーカーが出てくるので、これをドラッグして目的とする地点でクリックすると、「写真をここに配置しますか?」とのポップアップ画面がでてくるので、OK とするとマークを立てることができる。

    birdsplot_04.JPG
  4. すべての写真にマークが立ったら、Picasa の【ツール】 ⇒【アップロード】⇒【Picasa ウエブアルバムにアップロード】と選択すると、アルバムのタイトルなどを指定する下のスクリーンショットのようなアップロード画面が現われる。例えば、この画面で、タイトルを "ツグミ" としてアップロードすると新しいウェブアルバムが作成される。これは、Picasa の画面右上にある【ウェブアルバム】タグをクリックして確認できる。(もし、アカウントのない場合は、アカウントを登録する必要がある)

    birdsplot_05.JPG
    birdsplot_06.JPG
  5. 【ウェブアルバム】の画面で、新しく作成したアルバムをクリックすると、アルバムにアップロードした写真のサムネイルが表示される。この画面の右フレームの下の方にある、【Google Earth で表示】をクリックすると、作成された KML ファイルを保存するかどうかの下のようなポップアップが開くので、適当な名前をつけて適切なフォルダーに保存する。
    Picasa_webalbum_5.JPG
  6. ここで、Picasa と Picasa ウェブアルバムを閉じて、新たに【 Google マップ】を開く。左上の【マイマップ】をクリックし、【新しい地図を作成】画面を開く。新しく作る地図のタイトルを入力し、【インポート】をクリックするとインポートするファイルを指定する画面がでるので、先程保存したKML ファイルを指定してアップロードすると下のような画面になる。
    この時、Internet Explorer では、
    "Bad request"
    "Your client has issued a malformed or illegal request"
    というエラーが出て、うまくいかないことがある。
    Google のブラウザー Google Chrome では問題なくアップロードするので、こちらを選んだほうが良い。やはり、Google ソフトは Google 同士の方がうまく動くようだ。
    birdsplot_07.JPG
  7. この画面では小さな写真が、その写真を撮った地点にマークになっているが、これでは分かりにくい。
    この小さな写真をいろいろなアイコンに置き換えることができる。
    基本アイコンにもいろいろと用意されているが、マイアイコンを設定することもできる。ネットでサーチするとフリーのアイコンがいろいろと提供されており、これらを追加して(私の場合、レンタルサーバーにアイコンの gif ファイルを転送しておいた)使用することができる。今回の地図では、ツグミのアイコンが見当たらなかったので、体型のにているムクドリのアイコンを使ってみた。
    方法は、編集モードで、ふき出しにでている小さな写真をクリックすることで、置き換えることができる。(Google Maps ヘルプを参照)

    GoogleMap_4.JPGbirdsplot_08.JPG
  8. また、ふき出しにでてくる HTML のコードをいじることで、表示を変えることができる。
    アイコンをクリックして出てくる表示のサムネイル写真をクリックするとより大きな写真がウェブアルバムに表示される。
    作業途中でも保存しておけば、再度マイマップから該当する地図を開けば、編集を再開することができる。birdsplot_09.JPG
  9. 今回の目的は、【野鳥写真のサムネイル】からリンクする野鳥撮影地点プロット地図を作成しリンクすることであるので、ページに貼り付ける HTML コードが必要である。
     このコードは、先程の Google Map の右上にある リンク ボタンをクリックすると貼り付けるコードが表示される。この時、埋め込み地図のカスタマイズとプレビューの表示が出るので、これをクリックすると下のようなカスタム画面が出るので、地図のサイズなどをカスタマイズすると、この画面の下の方に、HTMLコードが表示される。

    birdsplot_11.JPG
  10. このHTMLコードを多少編集して、このエントリーに貼り付けて表示させたのが、下のプロット地図である。
    このプロット地図は、Google Map そのものであるので、航空写真に変えたりすることができる。また、マーカー(小鳥のアイコン)をクリックすると、その地点で撮影した写真が表示される。下の地図で試して欲しい。

 この方法を使って、記録すべき情報を充実したいと思っている。



Nikon GPSユニット GP-1
Nikon GPSユニット GP-1
posted with amazlet at 11.01.08
ニコン (2008-11-28)
売り上げランキング: 4847