Mapbox入門

## はじめに
MaaSサービスを考える上で、地図は切っても切り離せない機能要件です。
そこで、現在急成長しているMapboxについて、今更ながらまとめました。

後半にGoogle Maps Platformとの比較考察をしていますので、ぜひ参考になさってください。

## Mapboxとは
地図開発プラットフォーム
さまざまなユースケースに最適な地図を簡単に構築することができる

## 特徴
- カスタマイズ性
    - 店舗データや気象、交通情報、航空写真などのデータを地図上にレイヤーとして重ね合わられる
- Mapboxも提供
    - Mapbox独自の地図API/SDKにより、検索やナビゲーション機能も一つのサービス上で提供できる
- Mapbox Japan
　米Mapboxとソフトバンクの合弁会社

## サービス
### 1. Maps
- ５種類のテンプレートスタイルを提供
￼![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1457643/4105fa48-51de-229c-b817-95a9899984c8.png)

- Mapbox Studio
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1457643/8f22556d-1265-74fc-2c50-ea7ae5e8a80d.png)

    - テンプレートスタイルをベースに、地図の細かいデザインカスタマイズが行える
        - 建物や道路、公園、河川などのタイルの色の変更
        - 地理ラベルのフォント変更
        - ズームレベルに合わせたタイルやアイコン、ラベルの表示
    - GISデータの可視化
        - CSVやGeoJSONなどのデータをアップロードし、地図上にプロットすることができる
    - これらをWeb上かつノーコードで行える手軽さ
- Mapbox Tiling Servise
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1457643/dc0069bf-0d06-6a49-4bb9-127f958efc3a.png)

    - 大量データをベクタータイルセットに変換し、データの変更に応じてマップにプロットする
    - Yahoo Japanの天気アプリで使われている
- SDK
    - ウェブとモバイルアプリのSDKを提供
    - Mapbox GL JS
    - Maps SDK for iOS
    - Maps SDK for Android
- Static Maps
    - 地図画像を作成することができる
    - 描画パフォーマンスの向上
    - WebGL未対応のブラウザでの動作保証
- Mapbox Streets
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1457643/7e28798e-5740-7599-2c7a-6809482e7403.png)
    - 複数のデータソースから、道路や建物、地名、地形などの地理情報を正確にまとめている
    - 日本ではゼンリン社と提携し、駅構内図も提供可能となっている
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1457643/02d1407b-7997-e769-cc8a-da4b6484ae6e.png)

https://www.mapbox.com/maps/streets

- 3D地形データ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1457643/c394787b-267d-aa70-01f9-ae151c098d98.png)
    - 地形、建物の3Dデータの提供
    - Google Mapsの方が圧倒的に画質は良い
    
### 2. Search（地理情報を検索することができるAPI）
- Geocoding API
    - フォワードジオコーディング
        - 地名などの位置テキストから緯度経度に変換する
    - リバースジオコーディング
        - 緯度経度から地名に変換する
        
https://docs.mapbox.com/playground/geocoding/   


- Japan Search API
    - 日本語の地名検索に最適化されている
    - 漢字、ひらがな、カタカナ、ローマ字に対応
    - 日本ではSearch APIという名称
    - ベータ版のため日本国内データのみ取得可能、POI情報は取得できない
    - APIエンドポイント
        - suggest
            - 入力テキスト１文字ごとに候補が提案される
        - retrieve
            - suggestで選択した結果の地理情報を取得できる
### 3. Navigation（ルート案内に関するAPI群）
- Directions API
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1457643/bf76902b-cf01-b8ed-80dd-6df732dfd7d3.png)

    - ルート案内（車、徒歩、自転車）
    - 渋滞、事故を避けたルートを取得できる
    - 日本でも高精度で使える

https://maps.multisoup.co.jp/blog/2818/

- Isochrone API
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1457643/029d1a56-8773-6f2b-08d9-0604092d8a1d.png)

    - 出発地点から指定時間内で到達可能な領域を取得できる
    - 使用例：都市計画、マルチモーダルルート案内

https://docs.mapbox.com/playground/isochrone/

- Map Matching API
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1457643/1a085d65-740a-02d0-515d-9cdc82e9cb4c.png)

    - GPS情報の誤差を道路にあわせて補正してくれる

https://docs.mapbox.com/help/demos/get-started-map-matching-api/final.html

- Matrix API
    - 複数ポイント間の移動において、最短ルートの時間または距離を取得できる
- Optimization API
    - 複数ポイント間の移動で、最適なルートを取得できる
    - 使用例：配達ルートの計画

### 4. その他
- Vision SDK
    - AI駆動型の運転支援サービス
    - Vision、AR、Alertの3つがある
- Mapbox広告
    - 地図上に広告を配信するプラットフォーム
- Mapbox Atlas
    - Mapboxのすべてのサービスをオンプレミスで利用できる機能

## APIの価格表
Mapboxは潤沢な無料枠があり、開発レベルであれば料金を気にせず作業ができる（一部例外あり）
Google Maps Platformも同等レベルの無料枠があるので、そこまで差異はない
ただ、Google Maps Platformを使用するためにはクレジットカード登録が必要になるが、
Mapboxはそれが不要なので、気軽に始められる

### Mapbox
| API        | 料金         |
|:-----------|:------------|
|Map Loads for Web   | 5万リクエストまで無料            |
|Maps SDK for Mobile | 2.5万アクティブユーザーまで無料   |
|Directions API      | 10万リクエストまで無料           |
|Search API          | 500リクエストまで無料（サジェストですぐ超えてしまうので注意）|

https://www.mapbox.jp/pricing

### Google Maps Platformの場合（毎月$200まで無料）
| API        | 料金         |
|:-----------|:------------|
|（Static Maps）Map Static API              | 5万リクエストで$100/month    |
|（Dynamic Maps）Maps SDK for Android / iOS | 2.5万リクエストで$175/month  |
|（Dynamic Maps）Maps JavaScript API        | 5万リクエストで$350/month    |
| Direction API                            | 10万リクエストで$500/month   |

https://mapsplatform.google.com/pricing/?hl=ja

## Google Maps Platformとの違い
Google MapsもMapbox同様にJavaScriptでデータマッピングが行える
ReactでWebGLを使用する際に最適なライブラリDeck.glでもGoogle Mapsを使える

- 地図タイルのレンダリング
    - Google Mapsはサーバサイドレンダリング
    - Mapboxはクライアント側でレンダリング

- 地図スタイルのカスタマイズ性
    - 双方、Web・コードにてスタイルのカスタマイズが可能
    - Google Mapsは日本語対応しているが、Mapboxは直感的にカスタマイズできる印象
        - 参考：https://www.granfairs.com/blog/staff/google-maps-api-04


## React Native × Mapbox
React Native向けのWebGLライブラリについて、
Google Maps PlatformとMapboxを比較した

Google Maps Platform向けライブラリ「**React-native-maps**」は、Githubスター数はMapbox向けの「**React-native-mapbox-gl**」より10倍多いものの、更新が2022年1月で止まっている
一方、React-native-mapbox-glは、Githubスター数は少ないものの更新頻度が早く、提供機能も充実している
※2022/3/4時点

|| React-native-maps | React-native-mapbox-gl |
|:-----------|:-----------|:------------|
|地図| Google Maps Platform  | Mapbox  |
|機能|9つのコンポーネント|コンポーネント、ソース、レイヤー、オフラインなど|
|Githubスター数|13k|1.2k|
|Githubリポジトリ|https://github.com/react-native-maps/react-native-maps|https://github.com/rnmapbox/maps|

## 最後に
記事を作成していてMapboxがこんなに多くのAPIを提供していることに驚きましたし、
Mapboxを生かして面白いMaaSサービスが生み出せるんじゃないかと思いました。
読んでいただいた方のお力になれば幸いです。

## 宣伝
パーソルプロセス＆テクノロジー株式会社（以下パーソルP&T）、システムソリューション（SSOL）事業部所属の堀江です。

私はモビリティソリューションデザインチームに所属しており、**モビリティ（ここでは移動手段全般）に関するサービスを考えたり、アプリを構築したりしております。**

いわゆる**「MaaS」**に取り組んでおります。

私たちが「MaaS」に取り組む中で、**現在活用している、もしくは活用する予定の技術やサービスやとりあえず発信したいこと**などなど、幅広くチームメンバーと共に執筆していきたいと思います。
メンバーごとに違った内容を発信していきますので、お楽しみに！

また、「MaaS」について詳しく知りたい方は、チームメンバーの吉田が記事を掲載しておりますので、
ぜひそちらをご覧ください。

[「MaaSとは」でたどり着いて欲しい記事　（1/3 前編）](https://note.com/ppt_msdg_maas/n/naae427dbc37c)
[「MaaSとは」でたどり着いて欲しい記事　（2/3 中編）](https://note.com/ppt_msdg_maas/n/na45c90b2f02f)
[「MaaSとは」でたどり着いて欲しい記事　（3/3 後編）](https://note.com/ppt_msdg_maas/n/n8fd724f7db6c)


**最後まで読んでいただき、ありがとうございました！**