Mapbox Static Images API の主要な機能を使って地図画像を生成する

## 概要
- Mapbox Static Images API は地図の画像を生成できる Web API
- 地図の見た目を変えたり、回転したり、角度を変えたり、アイコンを乗せるなど主要な機能を使用していろいろな地図画像を生成してみる

## 料金

1ヶ月に50000リクエストまでは無料 (2019年10月16日現在)。

[Pricing \| Mapbox](https://www.mapbox.com/pricing/#maps)

<img width="1104" alt="mapbox-pricing.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/124d6d42-8ae3-cdf7-a489-4105b54de212.png">

## Mapbox アカウントを作成

Mapbox のアカウントが無い場合は、 [Sign up \| Mapbox](https://account.mapbox.com/auth/signup/) にて作成する必要がある。

## アクセストークンを取得

Mapbox Static Images API を使うには Mapbox の access token が必要。
Mapbox アカウントを作成すると自動でひとつ作られる (Default public token) のでそれを使えばいい。
Mapbox アクセストークンのページ [Account \| Mapbox](https://account.mapbox.com/access-tokens/) にて access token の値を確認することができる。

## Static Images API playground

地図の見た目などを確認できる Web ページが用意されている。パラメータを調整していろいろな地図を生成できる。

[Static Images API playground \| Playground \| Mapbox](https://docs.mapbox.com/playground/static/)

<img width="1049" alt="mapbox-playground.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/ee38b49d-02f6-17c2-d5b6-38c25bf7e5b6.jpeg">

## URL 仕様

[Maps service \| API \| Mapbox](https://docs.mapbox.com/api/maps/#static-images)

<img width="996" alt="mapbox-url-spec.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/2bddaba6-95a9-9f4f-074d-122d77f14044.png">

フォーマット: /styles/v1/{username}/{style_id}/static/{overlay}/{lon},{lat},{zoom},{bearing},{pitch}|{auto}/{width}x{height}{@2x}

- username: スタイル(地図の見た目)のオーナー名。通常は mapbox を指定する
- style_id: スタイルのID。Playground では light-v9, dark-v10, streets-v11, outdoors-v11, satellite-v9, satellite-streets-v11 の6種類が確認できた (2019年10月16日現在)
- overlay: 地図上に乗せるアイコン画像や線を指定できる
- lon: 経度
- lat: 緯度
- zoom: ズームレベル
- bearing: 地図を回転させる角度
- pitch: 地図を3D的に傾ける角度
- auto: 指定すると overlay で指定したアイコン画像などに合わせて地図の表示範囲等を自動で決めてくれる
- width: 地図画像の横幅ピクセル数
- height: 地図画像の縦幅ピクセル数
- @2x: 指定すると Retina などの高画素密度ディスプレイ用に2倍のサイズで描画する

## 主要な機能を使って地図画像を生成する

### 基本的でシンプルな地図

![mapbox-nagoya.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/82bb2492-53bf-98b1-ed3b-bcd3b1b18d9b.png)

URL は https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/136.8974,35.1774,13.28,0,0/600x600@2x?access_token=YOUR_MAPBOX_ACCESS_TOKEN

- style_id: streets-v11
- lon: 経度136.8974
- lat: 緯度35.1774
- zoom: ズームレベル13.28
- width: 600ピクセル
- height: 600ピクセル
- access_token: YOUR_MAPBOX_ACCESS_TOKEN には用意したアクセストークンをセットする

### 地図の回転と3D的な傾き

![mapbox-rotate-tilt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/97d24c40-e356-ee50-3ab9-7eb0f5e53861.png)

https://api.mapbox.com/styles/v1/mapbox/outdoors-v11/static/136.9073,35.172,10.54,90,60/600x600@2x?access_token=YOUR_MAPBOX_ACCESS_TOKEN

- bearing: 地図を90度回転
- pitch: 地図を3D的に60度傾ける

### Marker (アイコン画像) を乗せる

数字やアルファベットの付いたアイコンを乗せることができる。

![mapbox-marker.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/ca3e786a-2adc-ce50-c5e1-4b36ab353131.png)

https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/pin-s-99+ff0000(136.8877,35.17937),pin-l-z+0000ff(136.8926,35.1781)/136.8917,35.1806,15.2,0,0/600x600@2x?access_token=YOUR_MAPBOX_ACCESS_TOKEN

- Sサイズのピン「99」赤色: pin-s-99+ff0000(136.8877,35.17937)
- Lサイズのピン「Z」青色: pin-l-z+0000ff(136.8926,35.1781)

### Custom marker (独自のアイコン画像) を乗せる

独自のアイコン画像のURLを指定して地図に乗せることができる。背景透過PNG画像ファイルもOK。

![mapbox-custom-icon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/52f1b399-5d31-5cc2-3e0a-586fe3a97431.png)

「迷」というアイコン画像 https://niwasawa.github.io/r/mei-bgt-48x48.png を乗せている。

https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/url-https%3A%2F%2Fniwasawa.github.io%2Fr%2Fmei-bgt-48x48.png(136.9082,35.1715)/136.9073,35.172,17.04,0,0/600x600@2x?access_token=YOUR_MAPBOX_ACCESS_TOKEN

### GeoJSON を乗せる

![mapbox-geojson.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/149dc181-7b8e-7d24-93b9-86b21e7212f7.png)

GeoJSON {"type":"Point","coordinates":[136.8998,35.1849]} で指定した位置にアイコンを乗せている。

https://api.mapbox.com/styles/v1/mapbox/outdoors-v11/static/geojson(%7B%22type%22%3A%22Point%22%2C%22coordinates%22%3A%5B136.8998%2C35.1849%5D%7D)/136.8998,35.1849,16,0,0/600x600@2x?access_token=YOUR_MAPBOX_ACCESS_TOKEN

### Path でルートを表示する

![mapbox-path.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/c2570321-46b1-cd99-3696-9a2bfa40d6e2.png)

https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/pin-s-s+00f(136.816906,35.1575090),pin-s-g+f00(136.875956,35.1243806),path-5+f44-0.5(muquEu`abYheEdAvGgrJ)/136.9196,35.1457,10.54,0,0/600x600@2x?access_token=YOUR_MAPBOX_ACCESS_TOKEN

Path で描く経路のパラメータには、複数の点データ (経度緯度) を [Encoded Polyline Algorithm Format  \|  Google Maps Platform](https://developers.google.com/maps/documentation/utilities/polylinealgorithm) のアルゴリズムでエンコードした文字列が必要。
今回の場合は「path-5+f44-0.5(muquEu`abYheEdAvGgrJ)」の「muquEu`abYheEdAvGgrJ」の部分がエンコードした文字列に当たる。

## 参考資料
- [Static Images API \| Glossary \| Help \| Mapbox](https://docs.mapbox.com/help/glossary/static-images-api/)
- [Maps service \| API \| Mapbox](https://docs.mapbox.com/api/maps/#static-images)