Mapbox Studio のデータアップロード方法を整理してみた。


# Mapbox Studio とは

ブラウザ上でMapの編集・作成ができるツールです。

![mapboxstudio.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274029/4946ae4e-480f-934a-4d45-842beb77ddf2.gif)

おそらく、エンジニアの方々ではMapbox GL JSを使われている方が多いかと思います。
ただ今回は、あまり複雑なことはせず、データをアップロードしたらすぐ可視化できて簡単にMapを他人と共有することができるツールとしてMapbox Studioを使用することに決めました。

ちなみにMapbox にログインしたあとの画面からですと、
右上のアカウントボタンを押すと　Studio へのリンクが出てきます。

![image_0000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274029/8245cd3c-0cc2-598f-92f7-4d7fb27482a6.png)

※アカウント作成がまだの方は、まずはアカウントを作成してみましょう。

# Mapbox Studio 4つのデータのアップロード方法
すごく基本的なことですが、わたしがつまずいたところなので詳しく書いていきます！

### 1.「Database」へ geojsonなどでアップロード

Datasets を選択
![database.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274029/d2280aeb-a04e-f3e2-15e3-b9a38b0769c3.png)

Datasets をアップロード
(GeoJson, JSON, CSVがアップロード可能)
![upload_datasets.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274029/fbfc998d-9568-c280-157a-739dd82de962.png)


### 2. 「Tiles」へアップロード、アップロード過程でTile形式に変換される

Tilesetsを選択
![tileset.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274029/19aec3a7-8533-8353-7305-c8c6d048d551.png)

New Tilesets を選択
![new_tileset.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274029/5590f93a-76c3-51fe-c1f6-b14a19a61834.png)

Upload file を選択
![upload_tiles.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274029/a5a03207-852f-58f7-078a-6e5bd606f266.png)

タイル形式でないデータ(GeoJson,Shapefile,CSVなど)も、アップロード過程でタイルに変換してくれます！

### 3. あらかじめTile形式に変換したデータを「Tiles」へアップロード
 
QGISを用いてあらかじめMBTiles形式に変更しておきましょう。
そのTileデータを「Tiles」へアップロードできます。

めんどくさいですが、MBTilesであればアップロード枠が大きいため、大量のデータをアップロードしたい場合には、この方法が有効だと考えられます。

以下のようにデータ形式ごとにアップロードできる容量が異なりますのでご注意ください。

![data_limits.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274029/cac182e8-348b-15d0-2b2a-07ede7b727ed.png)

### 4.Mapbox Tiling Service (MTS)のAPIを使ってデータをアップロード

いくつかのコマンド操作でデータをアップロードします。

まずは [Tilesets CLI (command line tool)](
https://github.com/mapbox/tilesets-cli) をダウンロードしましょう。

またアップロードするデータはgeojson形式にしておく必要があるので、
用意しているデータがcsv形式の場合には [csv2geojson](https://mapbox.github.io/csv2geojson/) などでデータ形式を変換しておきましょう。

詳しい操作はMapbox公式のYouTubeチャンネルをご覧ください。

Mapbox - YoutTubeチャンネル
[How to use Mapbox Tiling Service (MTS) and Tilesets CLI to create a tileset](https://youtu.be/5SdtJA5ddq0)


## アップロード方法使い分けまとめ

1.アップロードしたあとにStudio上でデータを編集したい場合　→ 「Datasets」へデータをアップ

2.データを編集する必要がない場合 → 「Tilesets」へデータをアップ(StudioがデータをTile形式に変換)

3.大量のデータをアップロードしたい場合 → MBTilesにあらかじめ変換しておく

4.大量のデータをアップロードしたい場合 → Mapbox Tiling Service (MTS)を使ってアップロード

# Mapbox Studio のよいところ

### よいところ1：おしゃれなマップを作成すること可能

私がつくってみたものを紹介します。

#### Stop & Junction
![dark.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274029/4a83d8ec-4be8-bccf-14d7-20cf1ea8301c.png)

https://api.mapbox.com/styles/v1/keiji/ckiah69vdb1oh1ao1zozmz42y.html?fresh=true&title=view&access_token=pk.eyJ1Ijoia2VpamkiLCJhIjoiY2pvMHZ5ODg4MDRrdjNwcXFwNnA2cWpiZSJ9.lIZIHvCxbduQcrBGEhJ-IQ

#### Pop Color Map
![pop.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274029/2778cfba-8043-be30-1480-10b3dc5c794e.png)

https://api.mapbox.com/styles/v1/keiji/ckhcza63d08g219qm2b83r4in.html?fresh=true&title=view&access_token=pk.eyJ1Ijoia2VpamkiLCJhIjoiY2pvMHZ5ODg4MDRrdjNwcXFwNnA2cWpiZSJ9.lIZIHvCxbduQcrBGEhJ-IQ

### よいところ2：Mapbox Studio Preview アプリで共有がかんたん

Mapbox Studio previewアプリをスマホに入れてみましょう。
https://apps.apple.com/jp/app/mapbox-studio-preview/id1208400007

![image_0000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274029/69fa548d-e4ba-116d-2183-a53b181b2813.png)



作成したMapをかんたんに閲覧できます。
もちろんサクサク動きます。

作成したMapを他の人に共有したいときにはとても便利です！


# Mapbox Studio の注意点

Mapbox Studio の注意点としては、作成したMapを印刷できないことです。

ゼンリンの住所データを利用している関係で、
印刷しての利用は禁止されています。

ゼンリンさんに問い合わせて、使用料金を払えば可能だとは思いますが、
おそらくかなりいいお値段なのではと思われます。


# まとめ

いかがでしたでしょうか。
大量のデータを可視化したい案件があり、MapBox Studioならいけるのでは？！と思い使い始めてみました。

Mapbox Studio を触り始めたところ、「データのアップはどの方法が正しいのか」「どうやったらうまくPublishできるのか」などしばらくの間どう使えばいいのか混乱しておりました。

そんなときに、幸運にもMapboxJapanの方に、お話をお聞きする機会をいただき、いろいろ聞いてみました。
同じように悩んでいる方がいるかと思い、今回使い方をまとめてみました。

もし参考になりましたら、LGTM お願いいたします。