uMapとOverpass API(overpass turbo)を使ってOpenStreetMatsuyaマップを作る
_ uMapとOverpass APIを使うと、なにができますか?
OpenStreetMap(OSM)内のデータを読み込んでAEDマップや消火栓マップ、レコード屋マップ、トイレマップ、そのほか○○マップが簡単に作れます。 OSMと連動するので、OSMデータを更新すると自動的に最新情報の地図になります。
まずはサンプルを見てもらうとわかりやすいと思います。
OpenStreetMatsuya
ということで
OpenStreetMapの地図に表示される物は、入力されたデータの中でも一部だけです。 地図上に表示されない物を見るには、データを直接見たり、プログラムを書いて検索APIからOSMデータにアクセスする必要があります。
これを簡単にアクセスして視覚化できないかと思っていたら、uMapの外部データ連携機能からOSMを検索するoverpass APIが利用できることを知り、使ってみました。
- ネタ元: Creating an always up to date map | Mappa Mercia: http://www.mappa-mercia.org/2014/09/creating-an-always-up-to-date-map.html
全国の松屋を表示する「OpenStreetMatsuya」を作る
OpenStreetMap界隈で有名な非公式プロジェクトとして、@okano_tさんが全国の牛丼チェーン店「松屋」を詳細なデータとともにOSM上にマッピングしていく「OpenStreetMatsuya」プロジェクトがあります。
- OpenStreetMatsuya: http://openstreetmatsuya.org/
- User:Okano t/OpenStreetMatsuya - OpenStreetMap Wiki: http://wiki.openstreetmap.org/wiki/User:Okano_t/OpenStreetMatsuya
- OpenStreetMatsuya 関連: http://jnug.net/osm/
OpenStreetMatsuyaの松屋情報は詳細な情報が入力されているにもかかわらず、OSMの地図上では名前しか表示されません。これは非常にもったいないので、このデータを利用して「OpenStreetMatsuya」マップを作ります。
overpass turboを使って松屋の検索クエリを作成
まず、Overpass APIから松屋を検索するための検索クエリを作成します。overpass turboを使うとOSMのタグを検索するだけでOverpass API検索クエリが作成できるので、これを利用します。
- overpass turbo: http://overpass-turbo.eu/
検索をするタグですが、OpenStreetMatsuyaで使われる松屋店舗のタグは「松屋標準タグセット」にまとめられています。その中から
- ファストフード(amenity=fast_food)店で
- 牛丼(cuisine=beef_bowl)を提供していて
- 名前が「松屋」(name=松屋)
なら、ほぼ牛丼チェーン店の松屋であろう、という仮定のもとに「amenity=fast_food and cuisine=beef_bowl and name=松屋 」を検索して、検索クエリを作成します。
overpass turboにアクセスして、右上メニューの「ウィザード」をクリック。
松屋を検索するための検索タグを「and」でつないで入力し(下参照)「クエリを作成して実行」ボタンを押します。
amenity=fast_food and cuisine=beef_bowl and name=松屋
ブラウザ画面右側のエディタに検索クエリが生成されました。 OpenStreetMapデータはnode(点)、way(つながった点)、relation(要素間の関連性などを表す)で構成されますが、松屋はnodeかwayでしか表現されないので不要なrelation行を削除します。
検索クエリができました。uMapの表示エリアに合わせた動的な検索をするには、URLにパーマネントIDとして渡す必要があるので、これを元に加工します。
ブラウザ画面右上にあるメニュー。「エクスポート」をクリック。 「クエリ」をクリックして、OverpassQLの「コンパクト」をクリック。
ブラウザのタブが開くので、「[out:json]」から続く文字列をコピーしてエディタに貼り付けます。
座標を「{south},{west},{north},{east}」に置き換える。
検索範囲の座標をuMapの変数「{south},{west},{north},{east}」に置き換えます。
[out:json][timeout:25];(node["amenity"="fast_food"]["cuisine"="beef_bowl"]["name"="松屋"](34.78053570934868,134.6377944946289,34.881565636911084,134.73426818847656);way["amenity"="fast_food"]["cuisine"="beef_bowl"]["name"="松屋"](34.78053570934868,134.6377944946289,34.881565636911084,134.73426818847656););out body;>;out skel qt;
34.7から始まる部分がnodeとway二つありますが、この部分を以下のように変更します。
[out:json][timeout:25];(node["amenity"="fast_food"]["cuisine"="beef_bowl"]["name"="松屋"]({south},{west},{north},{east});way["amenity"="fast_food"]["cuisine"="beef_bowl"]["name"="松屋"]({south},{west},{north},{east}););out body;>;out skel qt;
OverpassQL文字列の先頭に https://overpass-api.de/api/interpreter?data= を追加する。
資料ではhttpとなっていますが、httpsでのアクセスに変わったようです。
https://overpass-api.de/api/interpreter?data=[out:json][timeout:25];(node["amenity"="fast_food"]["cuisine"="beef_bowl"]["name"="松屋"]({south},{west},{north},{east});way["amenity"="fast_food"]["cuisine"="beef_bowl"]["name"="松屋"]({south},{west},{north},{east}););out body;>;out skel qt;
これで、uMapレイヤーに指定できる検索クエリができました。
uMapの地図にoverpass APIのレイヤーを作る
uMapに移動して地図を作成します。
まずは地図のタイルレイヤーと位置を設定します。
uMapにログインして「マップを作成」ボタンをクリック。 地図を適当な場所まで移動し「タイルレイヤーの変更」アイコン(画面右側、下から3番目)をクリックして適当な地図レイヤーに変更します。 「ズームレベルを保存」アイコン(画面右側、下から2番目)をクリックして位置を保存します。
続いてuMap地図に重ねるレイヤープロパティを表示します。
画面左上「+/-」ボタンの下にデータレイヤー・ボタン(上の図(3))をクリック。
データレイヤー一覧の「レイヤー1」の行にある「鉛筆」アイコンをクリックすると、右側サイドバーにデータレイヤーのプロパティが表示されます。
データレイヤには「名称」や「概要」を設定しておきます。 表示件数が多くなる事が予想されるときは、レイヤータイプを「クラスタ化」にしておくと密集部分がまとめて表示されるので変更しておくとよいでしょう。
uMapレイヤーに検索クエリを含むOverpassパーマネントリンクを設定するため、「サイト外のデータ」をクリックします。
外部データの設定ですが、「URL」には、上で作成した「 https://overpass-api.de/api/interpreter?data= 」から始まるoverpassパーマネントリンクのURLを設定します。 「フォーマット」は「osm」を設定します。 uMapの移動と連動して検索するために「ダイナミック」にチェックを入れます。
これで登録できました。右上の「編集を終了」をクリックして編集を終了すると、地図上にある松屋の上にピンが立ちます。uMapの地図を移動すると、表示範囲に合わせてその範囲にある松屋が表示されるはずです。
さらによく見せる
uMapレイヤープロパティの「拡張プロパティ」からは、アイコンやエリアの色や形の設定。「Popup options」からは検索された情報のポップアップ方法の変更ができます。
中でも「Popup options」の「ポップアップコンテンツのテンプレート」は、{タグ}
の形でOSMタグの情報を呼び出すことができます。それを利用してOpenStreetMatsuyaマップのポップアップ内で使っている車いす情報は、@okano_tさんが調べた情報をそのまま利用しています。
あと、未検証ですが写真をどこかにアップロードしておいて、OSMに地物のソースとして source:ref=https://example.com/hoge.jpg
と書いておくと、{source:ref}
で写真も埋め込めるかも。誰か調べてくれるとうれしいです。(画像は「image=*」タグを使うと良さそうです。追記参照)
- JA:Key:source - OpenStreetMap Wiki: http://wiki.openstreetmap.org/wiki/JA:Key:source
- 第378回 旅の思い出をOpenStreetMapで視覚化する:Ubuntu Weekly Recipe|gihyo.jp … 技術評論社: http://gihyo.jp/admin/serial/01/ubuntu-recipe/0378?page=4
画像埋め込みについて追記
@nogajun 素晴らし! 画像ファイルへのタグは、いろいろ議論あるけど image=* タグがよいかな、と思っています https://t.co/YmDuMg4OJi あと、ピンのアイコン変えるのができた気がするので、もしかして松屋ぽいアイコンにできるかも。商標問題あるけど。
— nyampire - Satoshi (@nyampire) June 23, 2015
@nyampireさんから「image=*」タグのほうがいいんじゃね?との事。 ソースを示す以外の画像を埋め込むなら、こっちのほうがよさげ。
- Key:image - OpenStreetMap Wiki: https://wiki.openstreetmap.org/wiki/Key:image
まとめ
マッピングパーティをしても地図にはレンダリングされず一般の方にはピンとこない事も、uMapとOverpass APIを使うと手軽に視覚化できるので、みなさんドンドン使っていきましょう。 そして、みんなでOpenStreetMapの情報を充実させましょう。
_ Windows版のKobito(Markdownエディタ)を動かしてみた(失敗)
- Windows版のKobitoがMacでも全然動いてすごい - Qiita: http://qiita.com/daron/items/04e3d7936215568a704e
Electronで動くんだったら、Linuxでも使えるんじゃない?と思って試したら、見事な文字化け。
とりあえずDebianで動かす手順を書いておきます。
$ sudo apt install node node-legacy npm
$ sudo npm install -g electron-prebuilt
$ unzip kobito-v1.2.0.zip
$ electron kobito/resources/app/
フォント設定を変更できれば使えそうだから、Linux版も出してくれてもいいのにね。