スクリプト無しでジオタグの付いた写真をGoogle Mapsに貼り付ける

Flickrジオタグ付き写真活用

今回は、Flickrに置かれているジオタグ(位置情報)付き写真を
JavaScript等の手間をかけることなく、ブログやWEBページ、Google Sitesに貼り付ける方法を紹介します。

むかし昔

2年ほど前に「kml だけでgooglemaps を表示する方法」でKMLをスクリプトレスで表示する方法を書きました。
今回は、Flickr上にあるジオタグの付いた写真をノンスクリプトで表示する方法を紹介します。
題名の通りJavaScriptやFlashは使いません、以前と同じくURLにつなげるだけ
ちょっと応用すると、このところ連続で書いているGoogle Sitesにおいても利用することができます。
サンプルはGoogle Sitesのコレ


なにをどおするのか?

Flickが元々提供しているジオタグ付き写真の情報をKMLで配信する機能をつかいます。
このKMLを配信するnetwork linkを利用してスクリプト無しでGoogle Mapsを貼り付ける方法を簡単に紹介


対象:
Flickrに置いてあるジオタグ付き(geotagged)写真をGoogle マップに貼り付けたいと思っている方

----------------------------------------------------------
ジオタグ(位置情報)付き写真をGoogle Mapsに貼り付ける
[1.KMLネットワークリンクの取得]

最初にFlickrが提供しているKMLのリンクを取得します。

1.対象のFlickrページホームへ移動します。
calculのページはココ

2.KMLネットワークリンクの取得

ページ下部にあるKMLのURLリンクをコピーします。



[2.GoogleマップのURL取得]

1.Googleマップを開きます。

2.検索BOXにFlickrから取得したKMLのリンクをペーストします。


3.「地図を検索」ボタンを押します。

4.地図と写真の確認

世界地図の中に写真が表示されている事を確認します。



5.表示したい中心点に移動する

ダブルクリックとマウス操作で、地図縮尺と表示したい位置に移動します。
この作業を行うことで、初期設定の緯度経度0,0の海面からマウスで選択した中心位置の情報がURLに追加されます。



6.中心点のURLを取得する
Googleマップ右上の「リンク」をコピーします。




[3.Googleマップの表示]

3つのタイプに分けて方法を解説します。

3-1.リンクで表現
先ほどの2.6で取得したURLそのままでGoogleマップを表示する事ができます。

Googleマップ表示サンプル:http://maps.google.co.jp/maps?f=q&hl=ja&geocode=&q=http:%2F%2Fapi.flickr.com%2Fservices%2Ffeeds%2Fgeo%2F%3Fid%3D79814082%40N00%26lang%3Den-us%26format%3Dkml_nl&ie=UTF8&ll=34.918593,137.249451&spn=0.489829,0.884399&z=10

3-2.ブログ等に貼り付け

ブログのページ上でグリグリ動かしたければ、もうちょっと加工します。
たとえば、「第５回岡崎市民サイクリング ツールド三河湖要綱」にあるようにするのでしたら

グーグルマップの「リンク」ボタンを押したときに出てくる「カスタマイズ」を利用することで任意の地図サイズの設定と貼り付け用のHTMLが取得出来ます。
マイマップと同じね。


ツールド三河湖




3-3.Google Sitesに貼り付け

Google Sitesには直接HTMLを貼り付けても表示されないため、iframeガジェットを使って貼り付けます。
iframeを使ってGoogleMapsを貼り付ける方法は「ガジェットを使って Google siteにGoogleマップを貼り付ける」にあります。2.6で取得したURLを使います。


3-4.おまけ:プレイスマーク付きGoogleマップ

ここでもう１つのプレイスマークリンクを含めたGoogle Mapsの表示方法を紹介します。
今までの方法では地図が表示されるだけでしたが、これから解説する方法を利用すると下記のように、左側にプレスマーク付きページが表示されるようになります。サンプルページ

「プレイスマーク付き」Googleマップ



使用するiframeガジェットも今まで使ってきた3番目の「iframe」を使い
srcに2.6で取得したURLを貼り付けます。

※リンク分だけ幅(width)を大きめに設定する必要アリ。


補足:Flickrのジオタグに付いて

ここで言うジオタグ付き写真とは、JPG画像のExif部に位置情報が書き込まれた画像の事を指します。

Flickrの画面で見るとMAPの文字の付いたそれね。


----------------
参考:
・デジカメ写真に位置情報・ジオタグを付ける:GPS不要(地図を見ながらジオタグ追加)
・デジカメ画像にジオタグをつける方法２　GPSデータがある場合
・ω_(゜∀゜ )Flickr画像をGoogleEarthやGoogleマップで使いまわす
・kml だけでgooglemaps を表示する方法
・祝Google マイマップ アップデート ローカルKMLファイルがインポート可能に!!

GPS i-Blue747のログをGoogle Earthでみる 航空機編

福岡空港～中部国際空港

GPSロガー:i-blue747 トリップレコーダー、5秒毎、1790ポイント。

福岡空港～中部国際空港～金山駅まで



九州土産:

口の中は辛くないけど胃に来る!!



GPXファイル(日時データは削除):
airpath.gpx


参考:
・ボツネタ・徒歩自転車版
・i-Blue747のログをGoogle Earthでみる　町中/高速道路編:車(高速)
・2008年9月14日　ツールド三河湖 Google Earth心拍:自転車
・i-Blue747のログをGoogle Earthでみる　新幹線編:新幹線
・動画:MapionのFlash Maps API　を使ったAIRアプリ:在来線データ

Flashで業務プログラムは作れない

強制退場ルール

プログラムを実行してて気付いたのですが、Flashには60秒ルールが存在する。

どうやら１処理で６０秒停滞すると、タイムアウトの例外処理が実行されて
本来のルーチンから強制移動させられてしまう。


Error: Error #1502: スクリプトがデフォルトのタイムアウト時間の 15 秒を超えて実行されました。
at GPXlogcut/Button_save_click()
at GPXlogcut/___GPXlogcut_Button6_click()


物は、１０万行のXMLをこんな感じで処理してる部分

for each(var a_xml:XML in xml.trk.trkseg.trkpt)
{
  trkseg.appendChild(a_xml);
  trk= ＜trk＞＜/trk＞
  gpx.appendChild(trk);
  trkname = <name>{counter}</name>
  trk.appendChild(trkname);
  trkseg= ＜trkseg＞＜/trkseg＞
  trk.appendChild(trkseg);
  pointer=cut_point.pop();
}

ただのforeachループでタイムアウト
動作途中に投げ出してしまうなんて....メモリがないわけでも無かろうに

　　　　　　　,、‐ "￣:::゛:丶、
　　　 ,r::::l3゛::::::::/ハヽ:ヽ::::、:ヽ
　　　 {::://::::::://　ヽ＼ト、:::::::!
　　　 ヾ l:::::::/ 丶 　 ｀ヾ ィ、:::|
　　　　　|;:r::| 　Ｏ`　　'Ｏ ゛ハ|　　　＜　TimeOutとかないから
　　　　　 ヽハ　:.:.　　　　:.: レ
　　　　　 　 ´＼ r‐--‐、,ノ
　r、　　　 　r、／ヾ￣下ヘ
　ヽヾ　三　|:l1、＿ヽ/__ .ィヽ
　　＼>ヽ/ |｀ ｝　　　 n_n|　|
　　　ヘ　lノ `'ソ 　 　 l゜ω゜|　|
　　　　/´　 /　　　　　￣|.　|
　　　　＼. ィ 　 ＿＿＿　|　 |
　　　 　 　 |　ノ　　　　　l | 　|
　　　　　　|　|　　　　　　i:|　 |


なんかFlashに幻滅
-------------------------------
参考:
FxUG:スクリプトのタイムアウトの設定
Adobe:ランタイムエラー

Internet Explorer 6.x /7.xではダメでした

たまにはIEでも見た方がエエのかな?

先日の「ガジェットを使って Google siteにGoogleマップを貼り付ける」「FlashをGoogle Sitesに表示」で紹介したFlashをGoogle Sitesに貼り付ける方法ですが、ちょっと書き直しました。

問題はIE6,IE7ではマップの表示が下の画像のように、高さの設定が生かされておらず
Flashの画面が途中で切れてしまっていたこと。


　　_,,_　またIEかっ！
（　゜д゜)　ペシッ
　　⊂彡☆))`ν゜)・；'

と放ってしまいけど、Google君のレポートによると60%が Internet Explorer / Windows　との事なので無視できない。
ちなみにOpera9.62(現時点最新)でもダメ
普段使うFirefoxでしか確認しておりませんでした。

正常に表示されると以下の様に表示されます。



解決策

使用するガジェットを変更する

先日の説明では、iframeで検索した最初の「iframe Gadget」と書きましたが、
試したところ３番目の「iframe」で問題解決します。

ちなみに２番目の「iframe」は、GoogleMapは問題は無かったのですが、Flashの表示でWidhtの設定が無視されるため使う事は出来ません。

FlashをGoogle Sitesに表示

Flash Player10用のGPSツールを貼り付けました

先日のガジェットを使って Google siteにGoogleマップを貼り付けるに続き、
iframeを使った同じ方法でFlashを貼り付けたところ問題なく動作しました。



Flashをバンバン量産しているわけではないので、ちょっとだけ改良した物を用意Flash10 ブラウザ上で動作するGPS ツールで紹介したGPXlogcutのVer2.0です。

改良点は、GPXに加えNMEAのデータを扱えるようにしたこと。
これにより、ソニーのGPSロガー「GPS-CS1K」「GPS-CS1KSP」や PSPのMAPLUS「あしあとデータ」などが対応するはず(PSPの方は試してない)
汎用的なGPXに変換するため、ALPSLAB routeに貼り付けたりGPSに転送できます。
テスト:ブラウザで動作するGPSツール GPXlogcut (NMEAtoGPX)

ところで、今回このツール用にNMEAのデータをGPXに変換するAS3のライブラリを作ったのですが
私みたいにドメインを持っていない場合、どのような階層にしたらよいのでしょう
import mikan.com.nmea2gpx とかでっちあげ?

日頃ライブラリで世話になってるSpark projectに公開予定

Flash10 ブラウザ上で動作するGPS ツール

Flashでローカルファイルアクセス

以前作ったマピオンのMapionAPIを使ったAIRアプリAirlogcutをFlash10化

きっかけはClockMaker Blogで紹介された
ブラウザにエクセルのファイルを読み込ませてファイル変換するFlash10用アプリ
「ローカルファイルが編集できるFlex製の表計算アプリを作ってみました」
このFlash10でローカルのファイルをいじる記事に触発されました。


開発環境 Flex Builder3をFlash10対応にする

単純にFlexBuilderをアップデートさせることで自動的にFlash10用のプロジェクトを作れると思っていたのですが、実際はそれ用のFlex3 SDKをダウンロードしてプロジェクトの設定を変更する必要がありました。
具体的な設定はPHP,MySQL,Flexな日々＋イラストとかのFlexでFlash10を作成する方法を参考にして行っています。



[SDK]
とりあえずstableバージョンのflex_sdk_3.1.0.2710.zipを落としてきたところ、
Flash9版しか入っておらず、結局Nightly Builds最新版であるflex_sdk_3.2.0.3643.zipを使用しました。




実行環境 ブラウザをFlash10対応にする

上記の通りFlash10アプリが作成できるはずになったFlexBuilderですがサンプルが動きません。何でかなと思ったらブラウザのFlashのバージョンが9台....
( ゜∀゜)ハハハハ八八ノヽノヽノヽノ ＼ / ＼

てな訳でFlash Player10をインストール


[開発者向け]
開発用にデバッグモードのプレイヤーが必要な場合は、アーカイブのruntimes/player/10/配下にあるインストーラを実行してデバッグ用プレイヤーを導入します。(plugin/ActiveX)


動作サンプル GPXlogcut

GPXログをMapionAPIを使った地図上に表示させ編集するツールです。
前回のAdobe AIR版AirlogcutはGPXファイルの閲覧だけでしたが、Flash10版であるGPXlogcutはその名の通りLOGを分割する機能を持ち、ローカルへファイルを保存することが出来ます。

GPSツール GMM2.exeの次のバージョンで、GPSデータをより細かく扱えるようになる事から、その補助としてログ分割ツール(Airlogcut/GPXlogcut)を計画しています。今回はそれのプロトタイプ。

例によってgooブログではFlashを自由に使えないため、別ページにリンクを張っています。

・GPXlogcut.html :廃止しました。
・GPXlogcut.html :改良版(NMEA対応)


サンプルGPXデータ:
norikura.gpx



機能
GPS用XMLデータのGPXファイルを地図上で分割するツールです。
完全には作っていなため分割と保存の機能のみです。
スライダーを使って切断する場所を指定してください。

申し訳ないですが、
結果はGPXデータに精通している人でないと何やったかわかんないと思います。
そのうち作り込んだら解るようにします。
　　　　　　　　 　／＼
　　　　　. ∵ .／　 .／|
　　 　 _, ,_゜ ∴＼／／
　　 (ノ゜Д゜)ノ　　 |／
　　/　　/
￣￣￣￣￣￣
ソース:
後でGoogle Siteにて公開

------------------------------
参考:
・Flash Maps API: マピオン
・Flash10: Flash Playerダウンロード
・ClockMaker Blog
・PHP,MySQL,Flexな日々＋イラストとか
・動画:MapionのFlash Maps API　を使ったAIRアプリ

Flash作成グループFxUGでの質問が .NET C#で作ったアプリの問題を解決する件

IEのプロキシの設定を変更

FlashのグループFlex UserGroupでの質問で
AIRでHTMLコンポーネントやHTTPServiceを使うと
初回アクセスにすごく時間がかかります。

という内容の質問が投下され、
---ここから引用
ちなみに、IEのLANの設定部分[自動構成]の「設定を自動的に検出する」のチェックをオフにすると解決しました。
---ここまで引用
と解決の報告がされた。

実はコレ、.NETでWeb上のデータを扱うための
using System.Net; の類
たとえば、ネットワーク上の画像をダウンロードしてくるような、C#のプログラム

PictureBox 作業用Box;

WebClient wc = new WebClient();
wc.DownloadFile(url, file);
wc.Dispose();

//pictureBox1にコピー
System.IO.FileStream fs;
fs = new System.IO.FileStream(file, System.IO.FileMode.Open, System.IO.FileAccess.Read);
作業用Box.Image = System.Drawing.Image.FromStream(fs);
fs.Close();

のようにネットワークにアクセスするプログラムで有効です。
上記の解決方法にあった「設定を自動的に検出する」のチェックをオフにする設定をしないと、.NETで作ったアプリでも「初回アクセスが遅い」との現象が起こる場合があります。


GMM2.exeを起動すると「ピンアイコン」がダウンロードされますが、
コレの目的はユーザーがネットワークのアクセスに時間を取られないよう、初回アクセスとして小さなアイコンをダウンロードさせてるためです。

IEの設定が AdobeのAIRアプリにも影響していたとは。

　　_,,_　またIEかっ！
（　゜д゜)　ペシッ
　　⊂彡☆))`ν゜)・；'

----------------------
参考:
Flex UserGroup(FxUg)

動画:MapionのFlash Maps API を使ったAIRアプリ

日本製『Flash Maps API』で作るGPSツール

先日公開されたマピオンの「Flash Maps API」を使ってGPSの軌跡を表示するAIRアプリを作ってみた。

用途はGPSに記録された軌跡(ログ)を表示するツール。
最終的にログの編集ツールを目指していますが、とりあえずログ表示だけで感じがつかめるので公開してみる。


MapionのFlash Maps APIを使ってみた感想

1.軽い動作
GPSトラック(軌跡)の表示にコロラドから持ってきた10000ポイント近いデータを放り込んでも動作速度や安定性に問題がありません。
同じデータをJaveScriptを使ったGoogleマップで表現しようとすると、動作が極端に遅くなったりブラウザ自体がギブアップします。
もちろん動作速度が速いAction Script3(以下AS3)で作成したコンパイル済みアプリですから、ブラウザ上で動作するJavaScript&Googleマップに負けませんが大量のデータを喰わせても安定動作するのはうれしい。
どのくらいまでのデータ量に耐えられるか試してみたい。


2.簡単なアプリ作成
Flash Maps APIはSDKでFlexコンポーネントを公開しています。
非常に簡単な言語であるAction Script3とFlexコンポーネントの組み合わせですから開発が早い。実際、Airlogcutは3日(10時間くらい)で出来ました。
また世界測地系to日本測地系 / 日本測地系to世界測地系 を行うメソッドを含むユーティリティークラスも用意されています。
これだけ簡単に使えると、国土地理院からも地形図コンポーネントなんかを出してもらえないか? と妄想するくらい。


3.動作環境を選ばない
Windows/Mac両用でブラウザ上でもデスクトップアプリとしても動作するのは管理が楽、この辺はFlash様々


今後やりたいことや問題点

1.似たようなサービスとの比較
同じような用途のGoogleの「Google Maps API for Flash」と比べてみたい。

2.問題点
一日のビューが10000回に制限されていること。

　,　　´￣￣ ｀ 　、
　／　　　　　　 　 　 ヽ
/　　　　　 /|',　　　/　ヘ
i　.:i　 ,'　./　! ',.　 メ
ハ　|　.ｉ ./　　　 ',イ ハ
|ハ　|/ ＼ 　　ナ／|ノリ
:（ ヽリ　●　 　　● ハ　　>>一桁多くしてほしいんダナ
|　ヘー、 xx　 　' 　xx }ノ
| |　 |i>ト　　 △ ＿ノ　
　| |　/｀ー｀ヽ{＜ヽ





-------------------------------------
ダウンロード(Windows/Mac共用):

Windows/Mac共通のインストーラになっております。
Airlogcut


サンプルデータ(GPX):
岐阜多治見　セラミックパークMIO付近～中央線で名古屋駅


動作方法:
GPXデータをD&Dした後に縮尺を変更すると軌跡が再描画されて見られるようになります。

補足:
サンプルに上げた1MB/9240ポイントのGPXファイルを読み込むのに３秒ほどかかります。
カシミール3Dから出力したGPXの場合は
xmlns="http://www.topografix.com/GPX/1/0"を
xmlns="http://www.topografix.com/GPX/1/1"に変更してください。
(ネームスペースの違いを自動で認識しません)

Adobe AIRでGPSツールを作ってると、Flexで使える地図APIが公開された

GPSロガーのデータ量は桁違い

ここ半年で、GPSから吸い上げるログのポイントが桁違いに大きくなってきました。
ログ数が最大1500である初期のGPSであるe-trekを長年使ってきた身としては、
Coloradoやi747の吐き出すログを見ると唸るばかり。

たとえば、GPSロガーのi747トリップレコーダから「MTK GPS Logger download Utility」を使ってダウンロードすると23594ポイントのデータがCSV形式で1.89MB、それをGMM2.exe を使ってGPXへ変換すると3.03MBになります。
家人の持っているロガーが最大150000ポイントですからフルで格納すると
CSV形式の換算15MBとして、GPX形式で25MBくらいの容量に変換される
こんな量のデータはGMM2.exeに読み込ませると分単位かかる。

ま、読込時間なんかは使ってる機械に依るんだろうけど、初代e-Trekの最大ログ1500ポイントとはえらい違いで、それを基準として設計したGMM2.exeだとちょっと無理が出てきて、今更ながらもっと高速に読み込める方法を考えてたりするこの頃


マピオン地図が使えるFlexコンポーネント

最近ハマっている、AbodeのAIRだと最初からSQLiteが組み込まれてたりするので、おもしろがって使ってみるも、そもそも非同期処理自体に慣れてなくなかなか前に進まない。ここまでいじって、なんで同期処理用スレッドライブラリが色々発表されている理由を実感できた。
ともかくSQLiteを使ったAIRアプリということで、手始めにGPSログを日付毎に分割するツール(GPSろぐかったー)を作ってみた。

やってることは単純で、SQLで同じ日付のファイルを検索してまとめて出力するだけ。
ちなみにSQLiteのデータベースをいじったりするツールには、FireFoxのアドオンである「SQLite Manager」を使ってます。

そんな中、
マピオン、日本初のFlexコンポーネントから利用できる地図APIを一般公開
～Airアプリでも使える『Flash Maps API』～が公開された。

そのFlexコンポーネントを使ったAIRアプリ箱庭マピオン

地図自体はYahoo!地図やALPSLAB routeで使われている物とほとんど同じ、Googleマップと比べて等高線情報がより細かい。
APIドキュメントの目次を見てみると、ラインを引いたりするAPIも用意されている事から、すぐにでも始められそう。
最初見たときには、API呼び出し制限が１日10000回とか書いてあった気がするけど今見るとその記述が見あたらない、消えたのかな?


そして・またそのうち

このFlexコンポーネントとログカッターを組み合わせて新しいログカッターを構想中
内容は、GPS軌跡の描かれた地図画像をいじってログの編集をするツール
これが発表される前は国土地理院の1/25000地図やGoogleマップを使う事を考えてましたが、まずはこれで作ってみて国土地理院地図にも対応させるつもり。

---------------------------------------------------
参考:家の機械 セレロン1.8GHz OS:Win2000 メモリ1.4GB

i-Blue747のログをGoogle Earthでみる 新幹線編

名古屋～岡山

GPSロガー:i-blue747 トリップレコーダー、５秒毎、１１９４ポイント。
途切れなくログ採りが出来るのが当たり前になり、もう細かい感想なんて必要ない気がする。次の飛行機編は画像だけかも?

名古屋駅太閤通り口～岡山駅伯備線乗り場まで
軌跡を見ると京都で駅ビルの影響を受けていることと、六甲のトンネルはまる無視でログ採りされていることがわかる。陰に隠れたからって太平洋や地中海にまでログが飛んだりすることはなかった。


Google Earth用KMZファイル:
新幹線ログ名古屋～岡山.kmz


参考:
・ボツネタ・徒歩自転車版
・i-Blue747のログをGoogle Earthでみる　町中/高速道路編
・2008年9月14日　ツールド三河湖 Google Earth心拍