はじめに

MapboxはOSMを使っていると思われる人が多いと思いますが、日本の地図ではゼンリンデータを取り込んでいて海外ではOSMを使っている様です。今日はMapboxでナビ用のマップを作りながらMapbox Studioの操作方法を紹介したいと思います。この記事を読み終わる頃にはMapbox Studioの操作を把握でき、貴方もカッコイイマップをデザインできる様になればなと思います。

結論から言うと

結論からいいますと、完成したスタイルがこちらです。自ら地図をこんだけ編集でき、ゼンリンの様な高いクオリティーのデータを触れるのは素晴らしいと思います。私はデザイナーではないですが、いればかなり良い地図ができるのがMapboxの強みだと思います。

地図を作る上で必要なもの

アカウントを作る

Mapboxでアカウントを作る。

地図を作る

地図はMapboxではStyleと言われてます。
Mapbox Studioで新たなスタイルを作れますが、より良いのがこのサイトの下方にありましたので、それをコピーします。

スタイルを編集

地上路線を薄く表示

ナビ用の地図なので地上路線を薄く表示したいです。タブのComponentでは地上路線の設定を変更できなかったので、まずはマップ上の路線をクリックしてLayers -> rail-low-dashをクリックする。

rail-low-dashは何を示しているのか知りたいのでSelect Dataをクリックする。このtransit_lineのFilterで適用されている範囲は緑色で適用されていない所が赤色です。

少しズームアウトしてこれが地上線路か確認する。

少し違うので、他のレイヤーも検証してみる。rail-lowをクリックしてみたら、これっぽかったので一応これでOK。

ちなみにこのSelect Dataではデータをフィルターしているのでとりあえずここで路線を選択する感じで、その後にStyleで見せ方を帰る感じです。この場合だとv8-streetsパッケージの全てのtransit_laneからgeometry-type=LineStringのフィルターが適用されています。後、ズームレベル５〜１５の間の時だけデータを見せる感じです。

これで地上路線のデータを把握したので、Styleをクリックする。色を変えてみたが変に赤色になったのでおかしいと気づく。

Cmd + Zで戻し、subway（地下鉄）以外のレイヤー６つを選択し、Opacity(透明度)を選択する。ちなみにスタジオで誤操作した場合はCmd + Zで一つ前のアクションに戻る。RedoはCmd + Shift + Zで後ろに戻したものを前に戻せる。

TransitのSubway以外の６つのレイヤーを選択し、Opacityをクリックする。Rate of Change=linearはズームレベルにより透明度が線形的に変わる意味です。この画像だとズームレベル14.99までは１(見える）でそれ以降は０（透明）です。他にstepの様にズームレベルのレンジをif文的に指定したり、exponentialなどで透明度の変化を線型ではなく急激に曲げることもできる。

なので、ズームレベルを１５位上にするとどのレイヤーが地上路線を表示しているか検証してみる。

なんと、これがroad-rail-tracksレイヤーで、Transitに入っていない。半透明っぽい路線なのでナビ面では違和感が無く、表示されていても問題は無いと決断。とりあえず、ズームレベル1-14.99の太線を薄くみせたい。

先ほどの６レイヤーのOpacityを0.5に変更。

Before	After

これで地上路線を半透明にできました。

地下鉄を消す

地下鉄は自動車内からは見えないので消したいです。

まずはスタイルで地下鉄を特定して、クリックする。ポップアップにsubwayが出てくるのでクリック。

subwayレイヤーをクリックしHide 1 Layerをクリックする。

地下鉄は消えたが、ラベルが残っている。

これも同様にクリックしてレイヤーを選択し、Hide Layerを選択する。

地下鉄は消えましたが駅が強調されているので、消したいです。

駅名を小さくする

駅名はナビではあまり重要では無いので少しフォントを小さくしたいです。

駅名をクリックして、transit-labelだと思うのでクリック。ラベル系は大体-labelなので、これの可能性が高い。

mode=railの場合だと16pxでその他は14px。mode=railはどういう意味か知りたい場合はSelect dataをクリックする。

ここのmodeの属性を元にフォントのサイズを16pxか14pxに設定している。
ちなみに東京は緑（表示対象）なのに大手町は赤（非表示対象）。なぜかと思い、大手町と東京の属性を比較する。

東京	大手町

地下鉄のラベルは以前消したので表示されないのかな。データ単位で表示するかしないかのロジックはここに書いてあるが、

Ejectしないとわからないので、今は検証せずに、フォントを一旦小さくする。

駅名が小さくなりましたが少しアイコンがテキストに対して大きいので小さくしたいです。

アイコンサイズを1から0.75に設定する。この際デフォルトのレイヤーなのでOverrideをクリックする必要があります。

これでアイコンも小さくなりました。

路線と駅は消えましたが少し寂しいので自動車ナビで必要な要素を追加したいと思います。

交差点名を見せる

ナビ用なので交差点名は必須ですので追加したいと思います。
スタイルを使っていると気づくと思いますが、ズームする上で交差点名が表示されたり非表示になったりするのが解ります。
下のgifの虎ノ門二丁目に注目してください。

ナビとしてはユーザーが地図を触って操作するのは危ないので交差点名を既に表示するべきだと考えてます。
この現象を厳密に調査したい場合はこちらのCollision Boxを有効にすると何故だか解ります。

この様にcollision boxが重なるからです。その場合何が優先されるかはレイヤー順によって変わってきます。スタジオでレイヤーが上にある方が優先度が高まります。

交差点名は一番重要なので、レイヤーを一番上に置きます。

+ -> Active sourcesの中の Mapbox Streets V8 -> roadを選択する。roadに関してはこちらのドキュメントをご参照ください。

この状態だとLine型のroadしか見えないのでTypeでSymbolを設定する。

これで交差点名が表示されます。今は交差点名と車道両方をハイライトしているので一旦交差点だけをフィルターします。

Filter->Data field->is->intersectionを選ぶとイイ感じで緑（交差点）と赤（その他）の色分けがしっかりできてます。

データは良いのでレイヤーの名前をintersectionに変更し、Styleをクリックしデザインタブに移ります。

何も表示されないので、TextタブのText fieldにhogeと入力すると先ほどのデータ全てがhogeとして表示されます。これだと運転手も迷っちゃいますね。

なので一旦hogeを消して、See all formula options->coalesceを選択する。coalesceはSQLを使っている人はご存知ですが、引数の設定順に値を参照し、NULLでは無い場合返します。

次にInsert a data fieldをクリックしname_jaを選択。

その後にコンマを入力し、同様にnameを選択。これでcoalesce(name_ja, name)になり、意味的には「name_jaを表示するが存在しない場合はnameを表示する」です。このマップはグローバルなので日本国外ではname_jaが無い場合があるので、バックアップとしてnameを表示します。

coalesce意外にもconcatなどを使って複数の表現を連携することも可能です。例えば全ての交差点に「交差点」などをつけるのも可能です。交差点の表現は文字ではなくアイコンを使うのもアリなので、それを使い改善していきます。

Textのフォントを13pxに色を#6894caに変え、Iconのタブでjp-intersectionを設定します。

アイコンがテキストをラップする様に設定する。

最後にIcon text paddingを設定するとイイ感じで交差点名が表示されます。

検証すると既存の交差点名が出てきたので、これも消します。

クリックしてroad-intersection-low-zoomだと思うので、このレイヤーを選択しHide 1 layerをクリックすると消えます。

結果としてこの様になります。

しかしズームアウトした時に沢山の交差点が見えるのはちょっとごちゃごちゃしてます。広域表示にした時は重要な交差点だけが見え、ズームインするにつれマイナーなの交差点も見せたいです。

今のintersectionレイヤーを重複(Duplicate)する。

intersection minorに名前を変え、Data fieldのis notでtrunk,primary,seondary,tertiaryを追加する。これらは交差点をランク付けする属性でこれもSelect Dataで検証が可能です。

intersection minorの方はズームレベル14.5~見える様にしましょう。

ちなみに設定をコピペするときは下の</>をクリックし、JSONをコピーすれば他のレイヤーでも貼り付けれます。これはStyle specといい、こちらに詳細が書かれています。

一方でintersectionにもこの様な設定を加える。

最後にintersectionの方が表示の優先順位が高いので上に動かす。

これで交差点が出てきてナビっぽくなってきました。

道路名を表示する

交差点名も良いですが、ナビなので道路名も優先的に表示するべきです。

まずは道路名をクリックする。

このレイヤーを一番上に動かせないので重複する。

重複しかたレイヤーを一番上に動かし、

既存の動かせないレイヤーを隠す。

道路名のフォントが小さいのでフォントサイズを変更します。

文字サイズを２０に大きくすると道路名が消えてしまう。

原因としてはintersectionの方が優先され、六本木二丁目の交差点が高い状態だからです。

road-label copyを一番上に持ってくることで解決できました。ですが、これは交差点名を隠すのでどちらを優先するかはユーザー次第です。アプリなどで動的にこのレイヤーの順序を変更することができますので、基本的なデザインだけを作ってあとで開発時に検証するのもありです。

道路番号を消す

この様に道路の番号を使って道を表さないのでシールドを消したいです。

最後に

最後にマップをPublish（公開）して終わりです。公開しても他の人が勝手にアクセスはできない様になっています。マップをアプリケーションからアクセスするにはアクセストークンが必要です。こちらはShareのタブの下の方にStyle URLとAccess tokenがありますのでそれを使って導入できます。

プレビューとして共有したい場合はMake PublicにしてAllow copyingを有効にすると誰でもこのリンクを持っていればスタイルをコピーできます。

今の例のスタイルはこちらです。

これでなんとかMapbox Studioになれてきました。他のテンプレートも選べたりするので自分で触ってみるのが一番勉強になると思います。

参考になればLGTMお願い致します！