uMapとOverpass API(overpass turbo)を使ってOpenStreetMatsuyaマップを作る

nogajun
nogajun

_ uMapとOverpass APIを使うと、なにができますか?

OpenStreetMap(OSM)内のデータを読み込んでAEDマップや消火栓マップ、レコード屋マップ、トイレマップ、そのほか○○マップが簡単に作れます。 OSMと連動するので、OSMデータを更新すると自動的に最新情報の地図になります。

まずはサンプルを見てもらうとわかりやすいと思います。

OpenStreetMatsuya

フルスクリーン表示

ということで

OpenStreetMapの地図に表示される物は、入力されたデータの中でも一部だけです。 地図上に表示されない物を見るには、データを直接見たり、プログラムを書いて検索APIからOSMデータにアクセスする必要があります。

これを簡単にアクセスして視覚化できないかと思っていたら、uMapの外部データ連携機能からOSMを検索するoverpass APIが利用できることを知り、使ってみました。

全国の松屋を表示する「OpenStreetMatsuya」を作る

OpenStreetMap界隈で有名な非公式プロジェクトとして、@okano_tさんが全国の牛丼チェーン店「松屋」を詳細なデータとともにOSM上にマッピングしていく「OpenStreetMatsuya」プロジェクトがあります。

OpenStreetMatsuyaの松屋情報は詳細な情報が入力されているにもかかわらず、OSMの地図上では名前しか表示されません。これは非常にもったいないので、このデータを利用して「OpenStreetMatsuya」マップを作ります。

overpass turboを使って松屋の検索クエリを作成

まず、Overpass APIから松屋を検索するための検索クエリを作成します。overpass turboを使うとOSMのタグを検索するだけでOverpass API検索クエリが作成できるので、これを利用します。

検索をするタグですが、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=松屋

不要なrelation行を削除

ブラウザ画面右側のエディタに検索クエリが生成されました。 OpenStreetMapデータはnode(点)、way(つながった点)、relation(要素間の関連性などを表す)で構成されますが、松屋はnodeかwayでしか表現されないので不要なrelation行を削除します。

検索クエリができました。uMapの表示エリアに合わせた動的な検索をするには、URLにパーマネントIDとして渡す必要があるので、これを元に加工します。

OverpassQLにエクスポート

ブラウザ画面右上にあるメニュー。「エクスポート」をクリック。 「クエリ」をクリックして、OverpassQLの「コンパクト」をクリック。

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=*」タグを使うと良さそうです。追記参照)

画像埋め込みについて追記

@nyampireさんから「image=*」タグのほうがいいんじゃね?との事。 ソースを示す以外の画像を埋め込むなら、こっちのほうがよさげ。

まとめ

マッピングパーティをしても地図にはレンダリングされず一般の方にはピンとこない事も、uMapとOverpass APIを使うと手軽に視覚化できるので、みなさんドンドン使っていきましょう。 そして、みんなでOpenStreetMapの情報を充実させましょう。

_ Windows版のKobito(Markdownエディタ)を動かしてみた(失敗)

Electronで動くんだったら、Linuxでも使えるんじゃない?と思って試したら、見事な文字化け。

Kobito

とりあえず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版も出してくれてもいいのにね。