ゼンリンデータを使い世界で一つだけのナビ用マップを作ってみた


## はじめに

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

## 結論から言うと

結論からいいますと、完成したスタイルが[こちら](https://api.mapbox.com/styles/v1/takutosuzukimapbox/ckcd5tc9s0ldp1jnvuyti8sxv.html?fresh=true&title=copy&access_token=pk.eyJ1IjoidGFrdXRvc3V6dWtpbWFwYm94IiwiYSI6ImNrMjJlMXplcTE4a2czY3F3MWkxZHN4cWkifQ.CRcFM34KAOiPKIbscodOqA#13.05/35.66518/139.72083)です。自ら地図をこんだけ編集でき、ゼンリンの様な高いクオリティーのデータを触れるのは素晴らしいと思います。私はデザイナーではないですが、いればかなり良い地図ができるのがMapboxの強みだと思います。

![Screen Shot 2020-07-09 at 16.04.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/171a1c20-fbec-c732-9a31-1f3ed07ff594.png)



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

#### アカウントを作る

Mapboxで[アカウントを作る](https://account.mapbox.com/)。

#### 地図を作る

地図はMapboxではStyleと言われてます。
[Mapbox Studio](https://studio.mapbox.com/)で新たなスタイルを作れますが、より良いのが[このサイトの下方](https://www.mapbox.jp/yolp)にありましたので、それをコピーします。

![Screen Shot 2020-07-08 at 18.40.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/bbc30c63-525c-012c-564b-74de1c2c3dc4.png)

## スタイルを編集

#### 地上路線を薄く表示

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

![Screen Shot 2020-07-08 at 18.55.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/be7a67bb-b7ff-2373-3536-b74ee18ce10e.png)

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

![Screen Shot 2020-07-08 at 18.55.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/ef3a3e05-5ecf-9549-0d42-5a718975792e.png)

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

![Screen Shot 2020-07-08 at 18.55.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/80af8590-8c1f-056f-95e1-3a4b679af4ac.png)

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

![Screen Shot 2020-07-08 at 19.02.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/07224f24-4fd6-977c-38ff-358c2311f2f3.png)

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

![Screen Shot 2020-07-08 at 19.04.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/12d09cc7-4d0b-54d6-ff9f-a1357d55d303.png)

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

![Screen Shot 2020-07-08 at 19.33.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/0bd737be-370b-0e36-8c00-7817a73654b5.png)

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


![Screen Shot 2020-07-08 at 19.43.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/6212f66c-6a88-5312-29eb-c915f4fb3a92.png)


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

![Screen Shot 2020-07-08 at 19.51.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/592cedce-2438-a34b-1e6a-5463802325fc.png)

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

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


![Screen Shot 2020-07-08 at 19.57.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/88d348b2-5551-0c43-ee58-572f215ec422.png)

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

| Before | After |
----|---- 
| ![Screen Shot 2020-07-08 at 19.44.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/a7483ca0-5f22-9039-78cf-8c5bf4098f37.png)|![Screen Shot 2020-07-08 at 19.44.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/b480f9e6-33a4-a1a8-bcba-1d225d8ee81d.png)|

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

#### 地下鉄を消す

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

![Screen Shot 2020-07-08 at 20.00.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/c7c7ba6a-01ad-fd6f-6ba3-00d8664ab4af.png)

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


![Screen Shot 2020-07-08 at 20.02.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/1e128714-d2c0-f747-f292-69a56a32af59.png)

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

![Screen Shot 2020-07-08 at 20.04.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/5cbc4223-962a-d992-6b26-323dec3fa150.png)

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

![Screen Shot 2020-07-08 at 20.04.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/9862e97f-2330-074e-59e5-f49490138729.png)

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

![Screen Shot 2020-07-08 at 20.05.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/2d18cc25-8707-3206-f5fb-5524667bfbe7.png)

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

![Screen Shot 2020-07-08 at 20.06.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/4248592d-2466-fc7a-73aa-bf11aeead563.png)


#### 駅名を小さくする

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

![Screen Shot 2020-07-08 at 20.10.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/e75017f9-48e9-9235-710e-7f7dcd212b33.png)

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

![Screen Shot 2020-07-08 at 20.10.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/5d4e8cde-030f-263c-bda9-24b42c127d63.png)

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

![Screen Shot 2020-07-08 at 20.10.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/faa496ec-e378-78a4-4bc3-9d15047854b6.png)

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

| 東京 | 大手町 |
----|---- 
|![Screen Shot 2020-07-08 at 20.18.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/28fd0f40-838d-c320-22e2-222d03de77b4.png)|![Screen Shot 2020-07-08 at 20.18.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/50d6f5db-b435-fd3f-42a3-c81bef4854bc.png)

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

![Screen Shot 2020-07-08 at 20.20.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/176b13a7-f9d1-083f-f0fb-ab2076c96014.png)

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

![Screen Shot 2020-07-08 at 20.30.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/e08d8ca1-aed9-fbcf-4de6-cb9a377770a9.png)

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

![Screen Shot 2020-07-08 at 20.31.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/82569f38-0bd6-8de4-9b4f-6f540fb90fb2.png)

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

![Screen Shot 2020-07-08 at 20.31.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/7565e8a2-90d2-ee0c-9869-b147fcb432ba.png)

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

![Screen Shot 2020-07-08 at 20.35.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/8bce82b7-f305-67c6-cb4a-ab822f3bb494.png)

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

#### 交差点名を見せる

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

![ezgif.com-video-to-gif (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/8676b9f2-41d1-ab18-9d0d-0e6b758f6231.gif)

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

![Screen Shot 2020-07-08 at 20.47.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/601234b5-1a64-e21b-35b4-ee7f36bf0810.png)

![ezgif.com-video-to-gif (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/7bac4ac8-5707-e380-c6be-a19bad11567e.gif)

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

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

![Screen Shot 2020-07-08 at 20.57.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/1ea6b836-0198-cd13-a688-dd4126a6f72a.png)

`+` -> Active sourcesの中の `Mapbox Streets V8` -> `road`を選択する。`road`に関しては[こちらのドキュメント](https://docs.mapbox.com/vector-tiles/reference/mapbox-streets-v8/#road)をご参照ください。

![Screen Shot 2020-07-08 at 20.58.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/cc01b3f1-581d-9a0b-f830-22b70cffed7f.png)

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

![Screen Shot 2020-07-08 at 20.58.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/3b6ddc44-2f65-f22e-4351-8726d95a8b05.png)

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

![Screen Shot 2020-07-08 at 20.59.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/5f90c6ba-c4c1-fb8c-2e36-e3c70826a695.png)

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

![Screen Shot 2020-07-08 at 21.05.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/030dc8c0-9e70-bbd1-8929-56b0019edad2.png)

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

![Screen Shot 2020-07-08 at 21.06.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/e02280ec-b53d-f795-1450-6fadb22256a8.png)

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

![Screen Shot 2020-07-08 at 21.11.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/c22a788c-d43a-ce05-8347-2256a3eb6100.png)

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

![Screen Shot 2020-07-08 at 21.11.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/585c21b4-415c-029b-17e3-e28788e6c6ea.png)

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

![Screen Shot 2020-07-08 at 21.11.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/035e354e-897d-b8cf-17c8-5726fc3625c8.png)

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


<img width="688" alt="Screen Shot 2020-07-08 at 21.40.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/593fbd67-2fe0-a153-7f01-9e9111a9f49a.png">

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

<img width="896" alt="Screen Shot 2020-07-08 at 21.44.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/b71605a7-834b-aff8-3df9-720aaf12e4bf.png">


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

<img width="798" alt="Screen Shot 2020-07-08 at 21.45.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/469ae33b-69fd-c4e5-c8ee-86fef08395e8.png">

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

<img width="838" alt="Screen Shot 2020-07-08 at 21.46.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/e00f1d09-f2d7-7e5f-512b-274c726ff08a.png">

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


<img width="428" alt="Screen Shot 2020-07-08 at 22.24.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/c66ea55d-494f-f193-02a2-26d3614cdb5d.png">


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

<img width="306" alt="Screen Shot 2020-07-08 at 22.25.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/f1ad60ba-62bb-4e41-6c21-27f5154189ce.png">

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

![ezgif.com-video-to-gif (3).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/9bcdb745-205d-4631-aaf6-cd9e7ac022da.gif)

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

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

<img width="279" alt="Screen Shot 2020-07-08 at 22.46.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/4e1767af-8aef-029b-0fc0-19493d63e0e2.png">

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

<img width="1437" alt="Screen Shot 2020-07-08 at 22.47.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/33b7e5f1-6398-ab06-8e44-7f195352d304.png">

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


<img width="725" alt="Screen Shot 2020-07-08 at 22.48.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/b6e7b0f2-7c1c-cfd8-65cb-99317f28c4de.png">

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

<img width="1427" alt="Screen Shot 2020-07-08 at 22.47.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/ac0ab93f-a3b8-548e-ad57-d5e471a94113.png">

ちなみに設定をコピペするときは下の`</>`をクリックし、JSONをコピーすれば他のレイヤーでも貼り付けれます。これは`Style spec`といい、[こちら](https://docs.mapbox.com/mapbox-gl-js/style-spec/)に詳細が書かれています。

![Screen Shot 2020-07-09 at 16.34.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/ba25b513-1194-d454-09b1-3572c3d3245f.png)


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

<img width="270" alt="Screen Shot 2020-07-08 at 22.48.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/4d3b8e16-b45d-7357-0650-43d7f9080bb6.png">

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

![ezgif.com-video-to-gif (4).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/1132dee7-8368-851d-6a32-a536d4fa2126.gif)

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

#### 道路名を表示する

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

![Screen Shot 2020-07-09 at 14.25.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/5219a3bf-9e46-6d6a-153f-c015e4e5c214.png)

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

![Screen Shot 2020-07-09 at 14.25.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/21559b55-7957-f264-82d6-c8008fbe57b6.png)

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

![Screen Shot 2020-07-09 at 14.25.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/34a54ee9-fc21-b628-4e53-d46995944bb5.png)

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

![Screen Shot 2020-07-09 at 14.25.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/8780fa68-69ea-1a8e-7680-fc7729d9ec22.png)

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

![Screen Shot 2020-07-09 at 14.26.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/c8d9830a-814f-184a-f03c-4f1b9cbb9d4a.png)

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

![Screen Shot 2020-07-09 at 14.27.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/a1eb2ba7-c7c4-04ec-0a1d-e85a2ec5bbfe.png)

![Screen Shot 2020-07-09 at 14.27.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/77760fc0-fa9e-7f1e-e636-35110e60e45d.png)


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

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

![Screen Shot 2020-07-09 at 15.02.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/bf973609-825d-3b54-ac4d-10e1e0b4b8a0.png)

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


#### 道路番号を消す

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

![Screen Shot 2020-07-09 at 15.38.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/60ddca48-b6ad-45e7-3527-be381f1483d5.png)

## 最後に

![Screen Shot 2020-07-09 at 15.55.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/03857390-c932-3811-99c8-9f446b215752.png)

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

![Screen Shot 2020-07-09 at 15.56.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/6a263815-2205-694d-2e04-f01a1f40a4ca.png)


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

![Screen Shot 2020-07-09 at 15.55.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/87898bae-2c4d-8ecf-4070-da4ae7c8c064.png)

![Screen Shot 2020-07-09 at 16.04.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666609/171a1c20-fbec-c732-9a31-1f3ed07ff594.png)



今の例のスタイルは[こちら](https://api.mapbox.com/styles/v1/takutosuzukimapbox/ckcd5tc9s0ldp1jnvuyti8sxv.html?fresh=true&title=copy&access_token=pk.eyJ1IjoidGFrdXRvc3V6dWtpbWFwYm94IiwiYSI6ImNrMjJlMXplcTE4a2czY3F3MWkxZHN4cWkifQ.CRcFM34KAOiPKIbscodOqA#13.59/35.6589/139.72828)です。

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

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