概要

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

料金

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

Pricing | Mapbox

Mapbox アカウントを作成

Mapbox のアカウントが無い場合は、 Sign up | Mapbox にて作成する必要がある。

アクセストークンを取得

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

Static Images API playground

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

Static Images API playground | Playground | Mapbox

URL 仕様

Maps service | API | Mapbox

フォーマット: /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倍のサイズで描画する

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

基本的でシンプルな地図

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的な傾き

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

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

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

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。

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

GeoJSON を乗せる

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

Path でルートを表示する

Path で描く経路のパラメータには、複数の点データ (経度緯度) を Encoded Polyline Algorithm Format | Google Maps Platform のアルゴリズムでエンコードした文字列が必要。
今回の場合は「path-5+f44-0.5(muquEuabYheEdAvGgrJ)」の「muquEuabYheEdAvGgrJ」の部分がエンコードした文字列に当たる。

参考資料