OpenSwitchMapsのWeb版

ブラウザ拡張機能として作ったOpenSwitchMapsのウェブ版を作成しました。

ブラウザ拡張機能版だとスマホタブレットで使えなかったので、どのブラウザでも使えるようにしました。

画面はこんな感じ。

f:id:muramototomoya:20191228132041p:plain

OpenSwitchMaps Web画面

下のページにアクセスして、ブックマークレットを登録して使ってください。

https://tankaru.github.io/OpenSwitchMapsWeb/index.html

 

ちなみに、ブラウザ拡張版だとメニューからアクセスするので、あまり対応地図の数を増やしたくないと考えています。しかしWeb版だと対応地図をたくさん表示してもそんなに問題ではないような気がするので、際限なく増やしてしまっています。

どちらが使いやすいのかは追々考えていきます。

 

Geosaturday Tokyo 参加レポート

2019/12/14開催のGeosaturday Tokyoに参加しましました。Geosaturdayは元々、QGIS Hack FestというQGISを扱うもくもく会イベントでした。今年から名前を変えてOpenStreetMapも含めたオープンGISを広く扱うイベントになったようです。QGISのことはよくわかりませんがOSMのことならなんとなく分かるので、見分を広げるためにちょっと参加してみることにしました。

なお会全体の記録は共有ボードに書き込まれていますので、他グループを含めて実施された内容はそちらでご覧ください。

開場前

f:id:muramototomoya:20191226224029p:plain

立正大学品川キャンパス



会場は立正大学品川キャンパス11号館。7階のフロアを貸し切り(?)で、どの部屋も使って大丈夫という太っ腹。会場を貸し出していただいた関係者の方に感謝申し上げます。
ちなみに、最初は西側にある正門からキャンパスに入ったのですが、11号館南側が工事中のため会場に辿り着けず、工事中の仮設歩道を通行することになってしまいました。

f:id:muramototomoya:20191226224120p:plain

品川キャンパス案内図

開場後


会場の教室に30名ほどが集まりました。テーマごとに各部屋に分かれて作業開始です。OSM関連は私とikiyaさんの二人でスタートしました。Mapillaryのデータ収集、アップロードなどについて話していたところ、OSMの基礎が知りたいというAさんが加わり、講習会を始めることにしました。
アカウント作成、iDウォークスルー、最初の編集までやったあたりでお昼に。
まい泉のミニカツサンドを提供いただきました。参加費無料なのに、ありがたいことです…
Aさんは海外のインフラマッピングをやりたいとのことなので、ターゲットのエリアのマッピングをゴリゴリやってもらいました。郊外にあるインフラは、現状ではOSMGoogleマップもデータがほとんど整備されていなかったので、現地の方向けに講習会を実施できれば役に立つ地図が作れるかもしれないという話が出ました。

TIPS的なところとしては、

  • iDはタグの知識がなくてもマッピングできるが、key=valueのデータを見るようにすると理解が深まる
  • “i”マークからタグ解説ページに飛べるので、一度見ておくとよい
  • 間違ってもきっと誰かが直してくれる。どんどんやれ。

といったところを教えてひと段落かなぁと思っていたら、ikiyaさんのアドバンス講座が始まり、

  • JOSM/building_toolを使って、道路に沿って建物を整列する方法
  • 建物の階数は標準地図に表示されないが、f4mapなど多様なレンダラーで活用される

など深いところまで一気に進んでました。

で、どうせならMapillaryも経験してもらおういうことで、アプリのインストールから撮影、アップロードまでやってもらいました。

初めての人には濃すぎる講習会だったかも…

私は合間の時間に

などをやりました。

あとはこんな話題が出ました。

  • mapillary_toolsを使う利点は?→mapillaryアプリで完結しているのであれば、あまり必要ないかも。アプリはGPSをつかめないと撮影ができない。しかし、デジカメでインターバル撮影して、後付けでGPSデータを付与するのであればGPSが届かない建物内部やトンネルのMapillary撮影が可能となる。その場合、webアップローダーだと手作業が面倒。撮影枚数が多いのであればmapillary_toolsのほうが楽。
  • Thetaは内部時計がずれることが多い。facebookの情報によれば時計修正が難しい。その状態だとGPSデータの付与が面倒。
  • areaselecterについては別途指針をまとめる。

ちなみに周りのチームは、QGISとかpythonとか純技術方面の作業を進めている人が多かったように思います。解析ツール向けにOSMデータを使う方法をまとめたり、GISデータ利用者はどんなデータをよく使うのかを意識してOSMデータを入れたりするのがよいのかなぁ、と考えたりした一日でした。

 

 

地図サービスの比較 2019

2019年は日本のOpenStreetMapにとって結構意味が大きな年になったのかなぁと私は思います。その理由は、ひとつはGoogleマップオフライン利用解禁、もうひとつは地理院地図の申請不要範囲の拡大です。

OpenStreetMapは自由な地理データの提供を謳っています。ですが、一般ユーザの観点からはオフライン利用や地図画像ライセンスの点で使い勝手が良いことが評価されていると思います。2019年は、OpenStreetMapが優勢だったエリアにGoogleマップ地理院地図が進出してきた年だと思いました。

もちろんこの変化は私にとっても一般の方にとっても好ましい変化です。Googleマップ地理院地図も利用しやすくなったわけですから。

とは言え、OpenStreetMap Contributorの一人としては、ちょっと立ち止まって考えたくなったので、あらためて地図サービスを比較してみました。

 

 表 地図サービス比較

  OpenStreetMap Googleマップ 地理院地図
オフラインマップ

OsmAndなどのアプリで利用可能

×→〇 

2019年からオフライン機能が日本でも使えるようになりました

〇 

ジオグラフィカなどのアプリで利用可能

書籍に利用

CC BY-SAで利用可能

いくつかの利用制限があります

△→〇

2019年の規約改定により利用しやすくなりました

ユーザによる編集

自由に編集できます

POIデータの編集提案はできますが、反映されるとは限りません

×

ユーザが編集することはできません

データの利用

自由にデータを使えます

×

データはGoogleのものです

×

データは取得できません

POIデータ充実度

地域によってばらつきが大きい

データの充実度はNo1

×

学校など公的施設だけが表示されます

地図画像以外の機能

地図サービスは基本的には利用者側にゆだねられています

〇 

様々なサービスが統合されています

△ 

断面表示機能などがあります

+++      

 (地図データと地図サービスを比較してしまっている側面もありますが、そこはご勘弁)

 

改めて言うことでもありませんが、自由にデータを編集できること、自由にデータを利用できることがOpenStreetMapのコアバリューであることが再確認できました。特に地図データを自由に利用できる点は他の追随を許しません。

OpenStreetMapの利用をアピールしていくには、今一度原点に立ち戻って、「地図画像」ではなく「地図データ」の活用をアピールしていく必要があるのでしょうね。

Overpass turboの活用に関する記事も書きたいです。

 

 

 

空港マップを作ってみよう

国交が運営する「国土数値情報」にはたくさんのデータが公開されています。このデータを使うといろんなマイマップが簡単に作れます。例として空港マップをつくってみましょう。

最終的にはこんな地図ができます。

f:id:muramototomoya:20191129191304p:plain

データの準備

まず「空港」を開きます。ページの一番下に移動して、「全国」マークをチェックして「次へ」をクリックします。

f:id:muramototomoya:20191129191357p:plain


国土数値情報 空港データのダウンロードチェックいろんな年のデータがダウンロードできますが、今回は最新の「平成30年」のデータをチェックして「次へ」

f:id:muramototomoya:20191129191416p:plain

-----

国土数値情報 空港データの年度データ選択用途などのアンケートに回答しましょう。

f:id:muramototomoya:20191129191522p:plain


利用規約を確認しましょう。少なくとも一度はしっかり読んだほうがよいです。

f:id:muramototomoya:20191129192118p:plain


ようやくダウンロードです。

f:id:muramototomoya:20191129192223p:plain


ダウンロードしたzipファイルを解凍するとたくさんファイルができます。"C28-18_Airport.geojson"が目的のファイルです。国土数値情報 空港データ ファイル一覧これでデータゲットできました。

f:id:muramototomoya:20191129192248p:plain

データを変換

空港データでは".geojson"ファイルが手に入ったので、データ変換せずにそのまま使えます。 もし".geojson"ファイルがなかった場合の対処は別途説明します。

地図上に表示

手に入れた空港データをオンライン地図上に表示しましょう。 今回は"uMap"というサービスを使います。

https://umap.openstreetmap.fr/

ログインしてユーザ登録してマップを作成しましょう。

まずはデータのアップロードです。画面右のメニューから、f:id:muramototomoya:20191128192538p:plainを選択します。

《ファイルを選択》から"C28-18_Airport.geojson"を選んでアップロードします。

f:id:muramototomoya:20191129192405p:plain


地図上にぽつぽつと青い点が表示されました。残念な雰囲気ですが、一応空港マップができました。

f:id:muramototomoya:20191129192430p:plain
せめて空港の名前は表示されるようにしたいですね。

ではメニューのf:id:muramototomoya:20191129192500p:plainアイコンをクリックし、次の画面でf:id:muramototomoya:20191129192530p:plainアイコンをクリックします。

f:id:muramototomoya:20191129192556p:plain


データ一覧が表示されます。

“C28_005”が空港の名前のようです。

f:id:muramototomoya:20191129192619p:plain


“C28_005”の位置にマウスを持っていくとゴミ箱アイコンと鉛筆アイコンに切り替わります。鉛筆アイコンを選択して、

f:id:muramototomoya:20191129192639p:plain

“name”に変更します。

f:id:muramototomoya:20191129192708p:plain


f:id:muramototomoya:20191129192726p:plainアイコンをクリックして、《標準のポップアップオプション》をクリックし、《ポップアップコンテンツのテンプレート》と《ラベルを表示》を図のように変更します。

f:id:muramototomoya:20191129192756p:plain


地図を《保存》し、《編集を終了》すると…

f:id:muramototomoya:20191129191304p:plain

できました!

ライセンス

国土数値情報の利用約款を読むと、

「国土情報」およびそれを利用者が編集・加工して作成した成果物(データベースは除く、図や分析結果等)を他に転載、配信等する場合は、「国土交通省国土政策局「国土数値情報(○○データ)」をもとに○○が編集・加工」のように指標名を含む出典名称と編集・加工者を明記してください。

と記載されています。《概要》や《ライセンス》の項に記載しておきましょう。

  • 本文書中の地図にはOpenStreetMap((c) OpenStreetMap contributors)を使用しています。
  • 空港のデータは、国土交通省国土政策局「国土数値情報(空港データ)」を使用しています。

Mapillaryの撮影方法、コマンドラインツールmapillary_toolsを使ってアップロードする方法

始めに

Mapillary撮影を長時間にわたって大量にやる場合は、アプリやWebアップローダーを使うよりもコマンドラインツールを使うほうが楽だと思います。ここでは撮影からアップロードまで、私なりのやり方を説明します。

前提

準備するもの

  • PCにインストール
  • GPSレコーダー
    • 私が使っているのはiOSアプリOsmAnd Map
  • カメラ
    • 私が使っているのはLG360
  • 360カメラを使う場合
    • 自撮り棒
    • 帽子(写り込みを防ぐ)
  • モバイルバッテリー

撮影

スマホでOsmAndを起動し、gpsログを取りながら、LG360でインターバル撮影します。

なお、通常は360カメラで撮影する場合は、自撮り棒にカメラを取り付けて鉛直に保持して撮影します。ですが私は自撮り棒を肩に担いで斜めに持って撮影しています。

   

f:id:muramototomoya:20191128200122p:plain

斜めに持つことによるメリット・デメリットは以下の通りです。

  • メリット
    • 腕が楽。特に長時間撮影では。
    • 周りからは撮影しているように見えにくくあまり目立たない、はず。
    • カメラ位置が後ろにくるので、自分の顔が写りこみにくい。
  • デメリット
    • 体が少し大きく写る
    • カメラがLG360に限定される。他の360カメラは移動中の水平補正がいまいちなので、画像が斜めになってしまいます。

また、進行方向にはレンズを向けないようにしています。レンズが正面から障害物にぶつかりにくくなります。

画像処理・アップロード

注:以下、実行コマンドラインの箇所では、オレンジの箇所は必ず各自の環境に合わせて変更してください。の箇所はそのままでも適当に調整もOK。

  1. カメラからPCに画像をダウンロードする
  2. gpxをPCにダウンロードする
  3. (オプション)カシミールでgpxファイルを開き、データが飛んでいるところを削除する。修正したgpxデータをファイルに書き出し保存する。(のノイズフィルター機能を使うのもよさそうです)

f:id:muramototomoya:20191128200155p:plain

カシミールのgpxトラックを選択して、《編集(トラックエディタ)》を開く

f:id:muramototomoya:20191128200216p:plain

《速度》が異常値になっている場所を目視で探して、その前後も含めて削除する。

私は徒歩撮影を基本としているので、10km/h以上のデータを異常値と判断しています。

  1. (オプション)画像のファイルサイズを小さくする
    1. > magick mogrify -monitor -quality 80 "*.jpg"
  2. 画像にgpsデータを付与する
    1. > C:\work\exiftool.exe -geotag="I:\test\track.gpx" -overwrite_original I:\test
  3. (オプション)カシミールgpsデータがきちんと付与されたかチェックする。データの並びが不自然だったら、カメラ時刻がずれていると思われます。exiftoolかカシミールで修正する。
  4. 画像の前処理(撮影方向の付与、シーケンス分割、重複画像の削除)
    1. > C:\work\mapillary_tools.exe process --advanced --import_path "I:\test" --user_name tankaru --overwrite_all_EXIF_tags --local_time --interpolate_directions --offset_angle -90 --cutoff_distance 30 --cutoff_time 30 --duplicate_distance 1 --duplicate_angle 20 --move_duplicates --save_as_json
  5. Mapillaryにアップロード
    1. > C:\work\mapillary_tools.exe upload --import_path "I:\test"
  6. おわり

備考

  • mapillary_toolsではgpxの文字処理に難があるようでうまくいきませんでした。ですので私はgpsデータの付与はexiftoolに任せています。→exe版ではなくスクリプト版を使用し、言語設定を変更することでmapillary_tools上でgpsデータを付与することができるようになります。詳しくはkouki-Tさんの解説をご覧下さい。

    qiita.com

  • 画像の前処理をやり直す場合は、オプション”--rerun”をつけて実行してください。

参考資料

公式の解説

  1. General 360° camera instructions
  2. Uploading with Command Line Tools

地図サービス切り替えツールOpenSwitchMaps

OpenStreetMapGoogleマップ地理院地図も切り替えながら使いたいのでブラウザ拡張機能を作ってみた話です

注意: ここで紹介するツールを使うとGoogleマップ等から簡単にOSMの編集にジャンプすることができますが、Googleマップ等を参考にしてOSMを編集することは禁止ですのでご注意ください。

話のきっかけ

 これはOpenStreetMap Advent Calendarに投稿する記事なので、もちろんOSMに関する内容になるはずです。ですが普段使いではGoogleマップに浮気したくなることもあるわけです。地理院地図もなんだか気になったりする日も時にはあります。

 じゃあ、OSMを閲覧しながら、Googleマップに切り替えたり、地理院地図に切り替えたり自由に地図を渡り歩けたら最高ですね。その時々で最適な地図サービスを選択できるわけです。

f:id:muramototomoya:20191128194358p:plain

いろんな地図サービスを行ったり来たりしたい

ブラウザ拡張機能を作ってみた

で、作ってみました。

 

f:id:muramototomoya:20191129190724p:plain

操作画面



動画のほうがなんとなく機能が分かるかもしれません。ちょっと古いバージョンですが機能は変わりませんので参考にご覧ください。

 https://www.youtube.com/watch?v=tO87xkc7VaI

主な機能は以下の通りです。

  • 任意の地図サービスを開いて、メニューから別の地図サービスを選択すると、同じ場所・同じズームレベルで地図を切り替えてくれます。
  • OSMの品質チェックサービスにも対応しています。つまり、OSMを閲覧している最中に品質が気になる箇所が見つかったらすぐにOsmoseなどにジャンプしてチェックすることが可能です。
  • 地図サービスだけでなく、いろんな位置情報付きサービスにも対応しています。ゲーム、天気、交通、衛星センシング、地質、古地図など。OSMを閲覧しながらその場所のIngressの戦況をチェックしたり人工衛星の運航を楽しんだりすることができます。位置情報サービスのハブになれたらいいなぁと思ってます。

ChromeFirefoxに対応しています。インストールはこちらからどうぞ。

データもコードもオープンに

やっていることはというと、URLに含まれている座標値を置き換えているだけです。

たとえばGoogleマップのURLは

 https://www.google.com/maps/@[緯度],[経度],[ズーム]z

という形式です。OSMのURLは

 https://www.openstreetmap.org/#map=[ズーム]/[緯度]/[経度]

という形式です。ですので、

[, lat, lon, zoom]= url.match(/google.*maps.*@(-?\d[0-9.]*),(-?\d[0-9.]*),(\d{1,2})[.z]/));

window.location.href = https://www.openstreetmap.org/#map=' + zoom + '/' + lat + '/' + lon

みたいな感じでURLを変換するとGoogleマップからOSMに切り替えることが可能です。

OSMをやっているのですからやっぱりオープン化を進めないと、と思ったわけではありませんが、プログラムのバージョン管理をやってみたかったのでGithubで公開してみました。

すると、この地図追加して!ってリクエストが来たり、さらには、Firefoxで使えるように機能追加したよ!なんて連絡が入るようになりました。OSSの世界ってすごいですね。プルリクエスト送ってくれる人は神です。

現状の問題…?

Githubで公開してしまいましたが、そもそもプログラマではないので根本的な知識が足りていません。

  • もうプログラムの中身は自分で理解できてません!申し訳ない!バグがあってもデバッグできないかも!
  • Githubの使い方も分かってません。プルリクエストが来たら、どうやってチェックして、どうやって大元のプログラムに組み込んだらいいの?などなど手探りしながらやってます。Githubの使い方解説サイトは全部コマンドラインを使って説明しているので、デスクトップ版ユーザは困る…

今後の予定

  • スマホに対応したいなぁ…と思っているのですが予定は未定。SafariやモバイルChrome拡張機能がないみたいなので、Bookmarkletバージョンを考えたりしてます。実は開発当初はデスクトップ版もBookmarkletで開発していました。ですが、対応サービスを拡大するにつれてBookmarkletの制限がネックになり破綻。ファイルサーバに外部Javascriptファイルを置けば上手くいく可能性もあるが、個人用のファイル共有サービスに多くの人がアクセスするファイルを置くわけにもいかず。開発はストップ。スマホタブレットでも使えるWeb+Bookmarklet版を作りました。
  • 起動一回目にメニューを開くのに時間がかなりかかる。各サービスのアイコン取得に時間がかかっているような気がするが、ボトルネックはどうやって調べたらいい?
  • 地図サービスの追加要望は随時受け付けています。

ん~。OpenStreetMapとの関係が薄い話になってしまいました。このツールがOSM編集の促進に繋がったらいいなと思って作った側面はあるのでご勘弁を。

 

docs.google.com

マッピングパーティーの個人別成果をラスト10分で可視化してみる

始めに

 2018年のOpenStreetMap Advent CalenderでYfuruchinさんからマッピングパーティーの結果をQGISを使って即座に可視化するやりかたが紹介されました*1。またK.SakanoshitaさんからはOverpass-turboの日付フィルタリングを活用することで、オンラインで可視化を完結させる方法が紹介されました*2

 個人個人のマッピング成果も可視化できないかと考え、なんとかうまくいったので紹介します。最終的には次のような地図表示になります。

 

f:id:muramototomoya:20191128191154p:plain

uMap版

f:id:muramototomoya:20191128191414p:plain

ArcGIS版

この表示方法のポイントは次の通り。

  • 編集した人の名前が地図上に表示される
  • オンラインでできる(たとえばiPadだけでもできます)

(おそらくQGISを使っても同様のことができるのだと思いますが、私の環境だと妙にQGISの動作が重く、あまり試せませんでした…)

やり方: uMapで簡単に

  1. マッピングパーティーをやる
  2. このOverpass turboをひらく https://overpass-turbo.eu/s/NY9 (Query made by K.Sakanoshita, modified by muramoto)
  3. 日付をマッピングパーティー開催日に合わせて変更する。世界標準時であることに注意。
  4. 《実行》ボタンを押す
  5. 《エクスポート》→《GeoJSONとしてコピー》をクリックしてデータをコピー
  6. uMapのテンプレを開く
  7. 画面右上の鉛筆アイコンボタンを押して編集を開始する
  8. データインポートボタンインポートボタンを押す
  9. テキストボックスにコピーしたデータを貼り付け、データ形式を”geojson”に変更し、《レイヤ内容を差し替える》にチェックを入れ、インポートボタンを押す。


  10. できあがり。こんな感じの画面になります。編集者の名前が地図上に表示されます。

f:id:muramototomoya:20191128191154p:plain

やり方: ArcGIS Onlineでカラフルに

  1. ArcGIS Onlineにあらかじめユーザ登録しておく
  2. マッピングパーティーをやる
  3. このOverpass turboをひらく https://overpass-turbo.eu/s/NY9 (Query made by K.Sakanoshita, modified by muramoto)
  4. 日付をマッピングパーティー開催日に合わせて変更する。世界標準時であることに注意。
  5. 《実行》ボタンを押す
  6. 《エクスポート》→《ダウンロード/GeoJSON》をクリックしてファイルをダウンロード
  7. ArcGIS Online マップ作成ページを開き、《追加》→《ファイルからレイヤーを追加》

    f:id:muramototomoya:20191128192918p:plain


  8. Overpass turboでダウンロードしたGeoJSONファイルを選択し、インポートすると下のような画面になります。ベースマップはOSMに切り替えましょう。

    f:id:muramototomoya:20191128193002p:plain

  9. 《export》を押します。

    f:id:muramototomoya:20191128193042p:plain

  10. 《export - export 2》を押します。《●(黒丸)》が表示されます。OSMでいう「ノード」のことです。《スタイルの変更》を押します。

    f:id:muramototomoya:20191128193059p:plain

  11. 《表示する属性》を《@user》に変更します。

    f:id:muramototomoya:20191128193132p:plain

  12. カラフルになり、編集者の名前が表示されました。

    f:id:muramototomoya:20191128193216p:plain

  13. 《種類(個別値シンボル)》を押すと、編集数も表示されます。たくさん編集したマッパーに賛辞を!(OSM編集は競争ではありませんけどね)

    f:id:muramototomoya:20191128193236p:plain

  14. 以上の操作をノード、ウェイ、エリアのそれぞれについておこなうと完成です。ついでにラベル表示を設定するとこんな感じになります。ちょうどよいバランスの表示方法をいろいろ試してみてください。

    f:id:muramototomoya:20191128193316p:plain

その他

マッピングパーティーのエリアをOSM履歴ページで開いておき、ブラウザの自動更新をかけておけば参加者のマッピング状況が共有できそう。

なお本文書中の地図画像の帰属は、uMapを使用したものは”© OpenStreetMap contributors”、ArcGISを使用したものは”Map data © OpenStreetMap contributors, Map layer by Esri”です。表示が潰れて読みにくくなっているかもしれないので再記しておきます。

docs.google.com