3行要約

openstreetmapからデータをダウンロードし、APIと変換ツールを用いてsvgにする
そのsvgをillustratorに取り込めば、バスマップ制作の大幅な手順省略が可能
でも日本のバス停情報ってopenstreetmapは充実してない

はじめに

illustratorでバスマップを制作するの、とても面倒ではないですか？

バスマップ制作は好きですが、デザインだけではバスマップは成り立たないのが難しい所。データ入力や複雑な加工手順は、多少慣れた私としても、どうしても抵抗があります。

人間はやはり楽をしたいというもの。「データ入力や、バス以外の簡単な情報記載は省力化したい！」と模索していた所、既に2年も前に、答えがmediumに投稿されていました。

https://medium.com/@sinclarius/lets-make-some-vector-maps-792481d5f328

ざっくりいうと、openstreetmapからデータを取り込んで、べクターマップを作ろう！という投稿です。今取り上げたこの記事とその関連情報も含めて、ここではopenstreetmapを用いたバスマップ制作の省力化、そしてその課題についてメモします。

openstreetmapについて

ここでは簡単に。openstreetmapとは、誰でも編集でき、かつ利用しやすい地図サービスになります。編集時の著作物持ち込みと、利用時のライセンス表記には厳格ですが、誰でも簡単に、幅広く利用できるデータを入手できます。

openstreetmap.org

例えば、こんなデータがopenstreetmapにはあります。

ほとんどの道路
- むしろ、openstreetmapにない道路を探す方が大変
恐らく全ての鉄道路線、駅
- 欠けている駅を見たことがない
多くの公共施設や商業店舗
- ただしエリアによっては情報が著しく古い

(比較的緩いとはいえ)ライセンスに縛られることにはなりますが、これらのデータをバスマップ制作に取り入れることで、バスマップ制作のデータ入力手順が簡単になります。

実際にデータを取り入れてみよう

データの流れとしては

overpassAPIでopenstreetmapからgeojsonを入手
geojsonを変換ツールでsvgに
svgをillustratorに取り込む

となります。

overpassAPIでgeojsonをダウンロードする

クエリについて

では、openstreetmapからデータを入手します。ただし、一定エリア内の全てのデータをダウンロードしては、openstreetmapのサーバーに負荷がかかりますし、こちらとしても不要なデータが多すぎて困ります。そこで、overpassAPIなるものを用いて、欲しいデータのみに絞り込んでダウンロードします。

overpassAPIについては、先述のmedium記事や、wikiのoverpassAPIについてが非常に参考になると思います。

overpass-turboでプレビュー

ここでは、overpass-turboというサービスを利用します。web上でAPIのプレビューを行い、出力もしてくれるサービスです。

https://overpass-turbo.eu/

webサイトを開くと、左にクエリ書き込み、右にプレビューページがあります。さっそく、左に以下のようなクエリを書き込んでみます。

// まず鳥取県東部の自治体を指定し、aという集合へ
area[name~"鳥取市|八頭町|若桜町|智頭町|岩美町"]->.a;
//---------------------------------------------
// エリアa内のリレーションのうち、日本交通が運行事業者として指定されているものを全て選択
// リレーション(エリアフィルター)[タグフィルター]
// 他にも、route="bus"などの指定方法あり
rel(area.a)[operator="日本交通"];
//---------------------------------------------
// 指定したリレーションが含むnodeやwayを返す
>;
//---------------------------------------------
// 以上を結果として返す。out bodyの省略形
// <-ちなみにこれはコメント行のマーク
out;

実行ボタンを押す、またはctrl+enterで実行してくれます。実行後は、プレビュー画面の「データへズーム」ボタンを押すと、該当範囲まで瞬時に移動してくれます。

すると、鳥取周辺の日本交通のバス路線＋バス停のうち、openstreetmapに登録されているものが描画されます。バス停やバス系統をクリックすると、その情報も確認できます。

正直overpassAPIのQLは勉強中で、私の知識は浅いですが、例えば他にはこんな例があります。

area[name~"鳥取市|八頭町|若桜町|智頭町|岩美町"]->.a;
node(area.a)[highway="bus_stop"];
out;

正規表現も使用できますし、駅から半径Xm以内、などの条件も簡単です。ただし、openstreetmapの仕様の知識が必要です。バス路線の仕様については、以下などを見ると、ある程度理解できると思います。

overpass-turboでエクスポート

なお、忘れてはならないのが、ここはまだプレビューしている段階ということです。上のメニューバーから「エクスポート」を選択し、「ダウンロード/GeoJSONとしてコピー」の「ダウンロード」をクリックしましょう。

export.jsonは、ダウンロードされましたか？そのexport.jsonをもとに、次にsvgデータへ変換してみましょう。

mapshaperでSVGにする

SVGへの変換方法は色々ありますが、ここではmapshaperなるものを用います。このツールはgithubでデータが公開されていますが、今回はオンラインで用います。

https://mapshaper.org/

使い方は簡単！

上記サイトを開き、ドラッグ・アンド・ドロップなどでexport.jsonを放り込む
「import」ボタンでimportする
上のバー中央にある「(ファイル名)▼」ボタンから、可視化するレイヤーを選択し確認
- 因みに前章のexport.jsonであれば、バス停とバス経路の2レイヤー
(2019/08/17追加)上のバー右にあるconsoleを開き、以下を入力

    // ウェブマップタイル向けの図法を指定する
    // これを指定しないと縦横比がおかしくなる
    -proj +init=EPSG:3857

上のバー右上にある「export」ボタンを選択
出力形式をsvgにし、export
- 出力対象のレイヤーにチェックが入っているか確認を

因みに私の場合、なぜかバス経路レイヤーが可視化されていなかったので、最初は少し動揺しました。

svgをIllustratorで読み込む

ここまでくれば、もう終わったようなもの。Adobe illustratorでsvgを開けば、先程のデータを取り入れることが出来ます。が、いくつか注意点があります。

バス停などは点のデータなので、表示スタイルを変えないと見えない
- データが見えなくても、焦らずにアウトライン表示や線端の設定を見直すこと
縮尺や位置を合わせる必要がある
- 自分で調整してillustratorのバスマップデータに取り入れる必要がある
- 例えばリンク配置機能を利用して調整するなど
- ベクターデータなので、正確に合わせた後に線や点として取り込むことは可能
もちろん、最終的なライセンス表記は忘れずに

openstreetmapのデータを取り込む際の課題

お手軽で、簡単に見えるこの方法。しかし、実はこの方法、非常に大きい課題が1つあります。そう、

openstreetmapでのバスの情報が不足している

のです。これは非常に深刻な問題で、データを取り込みたくても、「あるはずのバス停が記載されていない！」「バス系統が記載されていないぞ？」という状況。マッパー(openstreetmapへの情報記載者)の絶対数が足りず、「バスについて記す人」の有無によって、地域によってデータの充実度合いに、明らかな格差があります。

ぜひopenstreetmap.orgの交通レイヤーを見てください、バスが記載されている(赤色の線)がある都市、日本にいくつあります？

つまり、データが充実していなければ、この方法を採用する効果が薄い。これが大きな課題です。どうしよう。

終わりに

うまいこと省力化できそうなことは分かりましたが、データが揃っていない現状を見ると、この方法は難しいかもしれません。

自分も過去に、講義の一環で鳥取のバスのデータを作成しました。しかし、その作業が何に役に立つのか意味を見いだせず、面倒に感じられて、その後は一切手を付けていません。これを機会に、ちょっとマッピングしようか迷っています。

加えて、いくつかまだ調べる必要のある事項があるので列挙します。

ラベルってどうやって付与するの？
- バス停名や系統名はopenstreetmapに登録されているはず
- 一緒に取り込みたいけれども？
svgを取り込み調整する際の、賢い方法は無いの？
- ここが完全手動だと手間が増える
- 地図タイルに合わせるなどできれば、完璧

これらについて情報があれば、ぜひ教えて下さい！

追記(2019/08/16->解決済)

出力したSVGデータ、どうも縦横比がおかしいんですよね。出力時に図法がどこかで変わったのだと思うのですが、修正方法が見当も付きません。解決策情報求む……

-> consoleで、図法をきちんと指定することで解決しました。