【テクニカルウェビナー#4】Mapbox Maps API

本スライドは、Mapbox Japanによるウェビナー「【テクニカルウェビナー#4】Mapbox Maps API」のスライドです。

目的：Mapbox Maps製品のエコシステムを技術的観点から理解する
ゴール：
・Source, Layer, Styleについて理解する
・Mapbox GL JSの簡単な使い方を理解する
・各種APIの役割を理解する
・Web上のリファレンスを見て調査できるようになる

Mapbox Japan公式サイト： https://www.mapbox.jp/
この資料に関するお問い合わせ： https://www.mapbox.jp/contact
このウェビナーはこちらからご覧いただけます：https://www.mapbox.jp/webinars/technical-mapbox-webinar-04

Transcript

1. Mapbox Maps Map API
2. 目的・ゴール 目的 • Mapbox Maps製品のエコシステムを技術的観点から理解する ゴール • Source, Layer, Styleについて理解する • Mapbox GL JSの簡単な使い方を理解する • 各種APIの役割を理解する • ウェブ上のリファレンスを見て調査できるようになる 対象 • Mapbox Maps製品の技術にご興味のある方
3. Vector Tiles API • Maps SDK内部で使用 • ベクタータイル専用 • 1タイルダウンロード • ダウンロードされるファイルは protobuf を gzip 圧縮したファイル • Spec: .protoファイルを使用し、 ダウンロードしたタイルを解析 可能→ import vector_tile_pb2 from google.protobuf import message from google.protobuf import reflection class Tile(message.Message): __metaclass__ = reflection.GeneratedProtocolMessageType class Value(message.Message): __metaclass__ = reflection.GeneratedProtocolMessageType DESCRIPTOR = vector_tile_pb2._TILE_VALUE class Feature(message.Message): __metaclass__ = reflection.GeneratedProtocolMessageType DESCRIPTOR = vector_tile_pb2._TILE_FEATURE class Layer(message.Message): __metaclass__ = reflection.GeneratedProtocolMessageType DESCRIPTOR = vector_tile_pb2._TILE_LAYER DESCRIPTOR = vector_tile_pb2._TILE tile = vector_tile_pb2.Tile() with open('mytile.mvt', 'rb') as f: tile.ParseFromString(f.read()) # features { # id: 2 # tags: 1 # tags: 2 # tags: 2 # tags: 3 # type: POINT # geometry: 9 # geometry: 8032 # geometry: 5504 # }
4. Raster Tiles API • Maps SDK内部で使用 • ラスタータイル専用 • 1タイルダウンロード • ダウンロードされるファイルはJPEG
5. Static Tiles API • スタイルをラスター化（サーバで画像化） • 1タイルダウンロード • スタイルを扱えないライブラリで使用 curl "https://api.mapbox.com/styles/v1/yochi/cl411s438000j15mqjinkxmkn/draft/tiles/13/7276/3225?access_token=pk.eyJ 1IjoieW9jaGkiLCJhIjoiY2wxZXpzZnJuMHdxNDNkcDN6b29meGV0MCJ9.cPOgAf6fYwhneHqgdoy-DA" -o tile.jpg
6. Static Images API • スタイルから任意サイズの画像を作成 • Point, LineString, Polygon等重ねて描画可能 • Playground Static tile: タイルをダウンロード Static images: カメラを含む地図画像をダウンロード
7. スタイル関係 • Styles API • Fonts API Maps SDKがスタイルおよびフォントをダウンロード、描画。Studioでのアップロードにも 使用
8. データ関係 • Datasets API: StudioのDatasetsで使用されるAPI群 • Uploads API: .mbtiles, GeoTIFF等アップロードするAPI。StudioのTilesetsのアッ プロードにも使用 • Mapbox Tiling Service: ベクタータイルセットを作成するAPI。データの差分更新等 にも対応
9. Tilequery API • 指定した地点周辺のfeatureを応答 • Maps SDKのqueryRenderedFeaturesは描画されているfeatureのみ。画面外の featureは対象外。また、他のアイコン等で隠れたfeatureも対象外。 • Playground
10. ツールを用いたタイルセット作成
11. ラスタータイルセットの作成 • GeoTIFFをアップロード（サポートファイル形式） • QGISで作成 a. Georeferencer b. Open Raster, c. 中心クリック(136.4, 24.9) d. 左上クリック(133.7, 27.6) e. Start Georeferencing
12. Tips: QGIS上でMapboxの地図を表示 1. StudioでShare → Other → WMTS選択 → URLをコピー 2. QGISのBrowserのWMS/WMTSを右クリック → New Connectionをクリック 3. 任意のNameを入力、StudioでコピーしたURLをペースト 4. 追加された項目をダブルクリック
13. Tips: StudioのError 例：Uploadsで発生するエラー一覧 内部ツールが出すエラーを表示している場合は調査が困難なケースも → Supportに問い合わせたほうがはやい
14. tippecanoe GeoJSON, CSV等からVector tilset (.mbtiles)を作成するツール 1. brew install tippecanoe 2. GeoJSONファイルを準備 3. tippecanoe -o data.mbtiles data.geojson 4. Studio -> Tilesets -> New tilesetからアップロード • MBTilesはSQLite3のファイル • Tilesの中にProtobufをgz圧縮したデータが格納
15. タイルセットのアップロード方法 Uploads API: 以前からある方法。ベクタータイルセット、ラスタータイルセット双方に対 応。Studioも内部でこのAPIを使用 MTS (Mapbox Tiling Service): 新しい方法。正確にはLine-delimitated JSON形式で データをアップロードし、Mapboxのサーバがベクタータイルセットを生成
16. Uploads API (1) AWSのS3ストレージを作成し、そこにファイルをアップロード 1. Credentialの作成、レスポンスから環境変数、S3 URL作成 { "bucket": "tilestream-tilesets-production", "key": "2e/_pending/w55fq7qrxo12nfu2pagkdm3lc/yochi", "accessKeyId": "ASIATNLVGLR2ANYWSCUC", "secretAccessKey": "DwyokYOhP1YwUYvhsulMkrB+S04bSB8MDrfb7FeR", "sessionToken": "FwoGZXIvYXdzEMT//////////wEaDLwTARJNJbBN8l89vCKOAmwNWLmbae5QLmnh3EVp1OQAWZ6MZJPrPw5Uc2FBIdSvboCmIZl4itXRhVmlvwm4nAQ2RVJn+qKYxrd SKzxwjUvAXaNEsVtUqizKR2zVT20UMn3kW1JEfwoMThX701CPRVoD3oNEJ5E45UFEn4tPHC8LhUUuo7MI9HnZVI2kdTo8UyddsWLD5IvgyxRJvy7G3LNGJDmOWzylh/5 gNwfRH00F2x9Hh8imLXUmC8gKZnvblOp901KudYJT+e89IFlo7AUZA9oFL53jIB2HPdz03ssiPRxTKala4E3A+DUNPfxawTPVLGrtWRs6D8wGBI2G4X/Y3QudsVS8zxe NZFFynYXjK2zlt11zzoq/BD1zySjWwbuUBjIpTo8fDTe/It0ZgMVRc5ZUXfyvEc9PTIEbmbUQPgPMC4NPZ93Cx83ma0c=", "url": "https://tilestream-tilesets-production.s3.amazonaws.com/2e/_pending/w55fq7qrxo12nfu2pagkdm3lc/yochi" } $ export AWS_ACCESS_KEY_ID={accessKeyId} $ export AWS_SECRET_ACCESS_KEY={secretAccessKey} $ export AWS_SESSION_TOKEN={sessionToken} aws s3 cp file s3://${BUCKET}/${KEY} --region us-east-1 http://${BUCKET}.s3.amazonaws.com/${KEY}
17. Uploads API (2) 2. S3 にアップロード aws s3 cp $1 s3://${BUCKET}/${KEY} --region us-east-1 $ UPLOAD_JSON="{\"url\": \"http://${BUCKET}.s3.amazonaws.com/${KEY}\",\"tileset\":\"${USER_NAME}.$2\",\"name\":\"$3\"}" $ curl -X POST -H "Content-Type: application/json" -H "Cache-Control: no-cache" -d "${UPLOAD_JSON}" "https://api.mapbox.com/uploads/v1/${USER_NAME}?access_token=${ACCESS_TOKEN}" 3. Mapbox にアップロード
18. MTS (1) 1. Tileset sourceの作成（データのアップロード） $ curl -X POST -F file=@tokyost.geojson.ld --header "Content-Type: multipart/form-data" "https://api.mapbox.com/tilesets/v1/sources/yochi/seminar?access_token=YOUR_SECRET_KEY" $ curl "https://api.mapbox.com/tilesets/v1/sources/yochi?access_token=YOUR_SECRET_KEY" | jq [ { "id": "mapbox://tileset-source/yochi/seminar", "size": 331, "files": 1 }, 2. レシピの作成 { "recipe": { "version": 1, "layers": { "layer0": { "source": "mapbox://tileset-source/yochi/seminar", "minzoom": 0, "maxzoom": 15 } }
19. MTS (2) 3. タイルセットの作成 $ curl -X POST -d @recipe.json --header "Content-Type:application/json" "https://api.mapbox.com/tilesets/v1/yochi.seminar?access_token=YOUR_SECRET_KEY" 4. Publish $ curl -X POST "https://api.mapbox.com/tilesets/v1/yochi.seminar/publish?access_token=YOUR_SECRET_KEY"
20. MTS (3) tileset cli: MTS API用のCLIツール (Python) • GeoJSONそのままでOK • レシピは一部のみ記載 $ tilesets upload-source yochi source_id geojson_file $ tilesets list-sources yochi $ tilesets create yochi.tileset_id --recipe recipe.json --name "tile name" $ tilesets publish yochi.tileset_id $ tilesets job yochi.tileset_id cl3mzy9jq000g09i5g9twftiu { "version": 1, "layers": { "layer0": { "source": "mapbox://tileset-source/yochi/source_id", "minzoom": 0, "maxzoom": 22 } } }
21. 自前サーバ v.s. Uploads v.s. MTS • 基本的にはMTSを推奨 • 自前サーバがマッチするケース: ◦ Featureの更新をリアルタイムに行いたい （例：ユーザがチェックインした店の情報を即座に他のユーザの端末上に表示したい） 端末上に表示されている領域に含まれる featureをサーバ側で探索(r-tree)、GeoJSONで返す • Uploadsがマッチするケース： ◦ ラスタータイル ◦ MBTiles, KML, Shapefileなどの既存のファイルをそのまま利用したい
22. APIのまとめ • 各種タイルAPIの違い • タイルの作り方 • タイルのアップロードの仕方