GPSログからGoogle Maps+ルートの地図画像を生成するWebサービス

ブログでランニング/トレッキング/自転車などの記事を書くときに、走ったルートの地図を画像として貼り付けたいことがよくあります。そこで、GPSログのGPXファイルを地図画像に変換する機能を、ごくシンプルなWebサービスにしてみました。(※ブラウザ画像のクリックでサービスにジャンプします。URLは http://pota-run.appspot.com/ )

Google static maps image generatorの使い方

① GPXログファイルを「選択」ボタンで選び「UPLOAD」ボタンを押すだけ。

小さいデータなら10秒もかかりませんが、半日のトレッキングなどだと30秒以上かかることもあります。待っているとちょっと長く感じるかもしれません。その場合は別のことをしながら裏で走らせておいてください。データサイズは10MBを上限にしてあります。

② 成功すると以下のような画面になります。

③ <div class=... から </div>までの長いテキストをコピーして、ブログのHTML編集画面に貼り付ける。

これで、上のような地図がブログに表示されるはずです(確認はBloggerのみ)。この文字列はほとんどが緯度経度のデータなのでJPEGには見えませんが、Google mapsのAPIがこれを受け取ってJPEGを返してくれるので、ブログには画像が表示される、という仕組みです。

④ カスタマイズ

ここまでで地図が表示されるようになりますが、もしサイズや色などを少しだけ変えたいということもあると思います。シンプルさ最優先で作ったため、その場合はコードをちょこちょこっと手でいじってもらう必要があります。でも大したことはありませんので是非試してみてください。

■ 地図の縦横サイズを変えたい。
→上の文字列の中、緯度経度データの前あたりに「size=640x480」という部分があります。これを横x縦の形で数値を変えれば、地図のサイズを変えられます。ルートはそれに応じて自動調整されます。

■ ルートの線の色を変えたい。
→「path=color:0xff0000a0」のcolor:の後を変えれば色が変わります。ネットで「HTML カラー」で検索すれば色々な色指定の方法が見つかると思います。

■ ルートの線の太さを変えたい。
→「weight:3」の3(数字)の部分を変えれば線の太さが変わります。

不明点がありましたら、この記事へのコメントに書いていただければ、できる限り回答したいと思います。

---

---

なぜ作ったの？→地図画像を気軽に作ってブログに貼りたい！

地道にやるとブログにルート付き地図を載せるのは以下の手作業になります。

　① オリジナルのGPXは1秒ごとの計測で点が多すぎるため、GPSBabelで間引く。
　② Google Mapsにアップロードする。
　③ 地図を共有設定にし、ブログパーツのスクリプトをブログに貼り付ける。

このステップがすべて手作業で面倒なだけでなく、ブログパーツの中でGoogle Mapsが動いているためロードに時間がかかってなかなか表示されなかったり、ブラウザによってはうまく表示されなかったりと、問題も多いです。さらに最近は、ブログはスマホで見ることが多くなり、小さい画面でスクロールする機能よりも、高速に表示されることの方が重要です。(もう少し言うと、Google Mapsなどのサービスで表示された画像をキャプチャして使用するのは、一般にライセンス違反になることが多いようです)。このため自分でツールを作って使っていましたが、もっと手軽に誰でも使えたらいいなと思ったので。

どうやってサービスにしたの？→Google App Engine (GAE)の無料枠で

無料でWebサービスを公開できるところを探したら、GAEが良さそうでした。AWSは有料っぽかったのと、ブログもGoogleだから、という程度の理由ですけどね。利用可能リソースに上限はありますが、今回のようなひっそりと動いているサービスにとってはほぼ無限と同じです。

GAEってどう？→リソースの制約がきつかった

以下はほんのちょっとGAEを使ってみた感想です。(どこも同じかもしれません。)

良かった点

  ・無料枠がある。
  ・Googleという安心感。
  ・環境構築がそれほど難しくなかった。

気になった点

  ・ローカルの時とデプロイしてクラウドで動かした時で、処理速度がかなり違う。
  ・メモリーの制約が厳しい。ローカルならOKでもすぐ制限に引っ掛かる。

処理速度については、あのGoogleのサービスなのだから、世界中の計算パワーが寄ってたかってあっという間に処理してしまうような錯覚にとらわれますが、そこはビジネス、無料枠への計算パワーの割り当てなど微々たるものです。ちなみに今回のサービスで試したところ、ローカル環境(iMac late 2013, Core i5 2.7Ghz Quad core)より7〜8倍処理時間がかかりました。そんなものです。(転送や起動の時間も含まれていると思いますが、使う側から見るとそのくらいの感覚。)

あまりに違い過ぎるので、こんなんでいいか〜と思っていた反復アルゴリズムを書き直す羽目になりました。メモリーも同じ。ローカルでGPXをパースするライブラリを使って書いたコードが、GAEに持っていくとそのライブラリがメモリを食い過ぎて強制打ち切りされてしまいます。厳密なパースは不要と考えて、緯度経度だけ抜き出すシンプル版を作って対処。これはメモリにも処理速度にも非常に効きましたが、プログラム自体をこんなに改造しなければ使い物にならないとは思っていなかったので、少々びっくり、というのが実感です。