ベクターマップとMapboxエコシステム
第12回地理院地図パートナーネットワーク会議
2020-12-01

About Me● Tomohiro Ichimura○ シニアソリューションアーキテクト○ Mapbox Japan○ @tomoichimura○ tomohiro.ichimura@mapbox.com© Mapbox, Mapbox Japan

Agenda- Mapboxとベクターマップ- Mapboxのエコシステム- Mapboxと描くこれからの地図© Mapbox, Mapbox JapanI. Mapboxとベクターマップ

MapboxとWebマップ● 2009年アフガニスタンでの選挙活動で、指示/投票情報が不明確だったことへの課題意識● 地理空間上にデータを可視化する重要性の発見● 「データ×地図」を活用した、デジタル地図事業への注目

https://blog.mapbox.com/launching-mapbox-elections-2c625ed0b421© Mapbox, Mapbox Japan5

Mapboxとベクターマップ●April 2014: ベクタータイル仕様(ver 1.0)をリリース
https://github.com/mapbox/vector-tile-spec/tree/master/1.0.0●

Aug 2014: Mapbox GL JSをアナウンス、スタイル仕様もリリース
https://blog.mapbox.com/announcing-mapbox-gl-for-the-web-16a41e07df43●

Mar 2015: Esri社がMapboxベクタータイル仕様を採用
Mapbox Vector Tile Speciﬁcation adopted by Esri
https://blog.mapbox.com/mapbox-vector-tile-speciﬁcation-adopted-by-esri-14138105872f●

Jan 2016: ベクタータイル仕様 ver. 2.1(現行バージョン) リリース
Mapbox Documentation - Speciﬁcation | Vector tiles
https://github.com/madefor/vector-tile-spec/blob/master/2.1/README.md (日本語版)© Mapbox, Mapbox Japanマップ(Webマップ)に必要な要素-データ--

レンダラー--

データを視覚化するもの

スタイル--

マップで表現したいものラスターデータ
ジオメトリ

視覚化するために必要なルール

クライアント-

マップを統合するクライアントソフトウェア© Mapbox, Mapbox Japan

Web Map Service (WMS)●

利点
カスタムエリアをリクエスト可能
特定のフィーチャーをリクエスト可能

○
○

●

課題
○
○
○
○
○

複雑な仕様
リクエスト処理が遅い
リクエストはキャッシュされない
スケールしない
コスト高© Mapbox, Mapbox Japan

イメージタイル - “Slippy Maps”のはじまり●

プロセスを簡素化○○●

よりスケールしやすい○●●

リクエストはグリッドに特化
データは予めグリッドで区分
低コスト

マップのパンニングが可能により早いコンテンツデリバリ○

サーバ側での処理を低減© Mapbox, Mapbox Japanベクタータイル●●●

タイルでグリッド化してデータを保存する方法
ジオメトリデータのみ
バイナリファイルフォーマット
○○●ソースデータではない○○●

可読性は持ち合わせてない
機械処理用に最適化
不可逆なフォーマット (“Lossy” format)
データの精度は高くない

高い圧縮率
○

他のフォーマットに比べても軽量© Mapbox, Mapbox JapanMapbox GL + ベクタータイルマップ
マップのアプリケーション化を推進●

ダイナミックなスタイリング○●

なめらかな操作性○○●

クライアント側でロードすばやい再レンダリング、なめらかなズー
ムや傾斜、回転が可能

サイズとスピード○●

GL JS や Maps SDKs for Android/iOSを使って、マップの外観を動的に変更が可能

軽量さとスピードに加えて、Mapboxのカルトグラファーによるリファレンスタイルの提供

ダイナミックなクエリ○

ベクタタイルセットに含まれるデータ属性にアクセスが可能.

リファレンス: https://docs.mapbox.com/vector-tiles/reference/
仕様: https://docs.mapbox.com/vector-tiles/specification/
Mapbox Vector Tile対応ツール: https://github.com/mapbox/awesome-vector-tiles/© Mapbox, Mapbox Japanベクタマップとラスタマップ

https://blog.mapbox.com/mapbox-%EF%B8%8F-leaflet-d60b1be96615© Mapbox, Mapbox Japanベクタタイル と ラスタタイル - サイズの比較----

イメージタイルに比べて、ベクタータイ
ルは20-50%のサイズ減(1 ベクタタイルはおよそ4ラスタタイルに相当)
より帯域に制限のある環境に最適- 遅延のあるネットワーク環境- 途上国
より高速なページロード- エンドユーザには最重要- リクエストされたもの以外も処理
データのオーバヘッドを75%程度減少

https://blog.mapbox.com/mapbox-%EF%B8%8F-leaflet-d60b1be96615© Mapbox, Mapbox Japan

II. Mapbox GL エコシステム

ベクターマップをコアとしたMapboxエコシステム
デザイン

描画(レンダラー)
アプリケーション

Mapbox Studio, Mapbox Styles

api>_api

buildapi

SDK

MTS, tippecanoe, rasterio

データ© Mapbox, Mapbox Japan

GL JS, GL Native, mapbox.js, leaﬂet.js

Mapboxの提供するクライアント向けソフトウェア
Mapbox GL - JS

Mapbox GL - Native

LeafletJavaScript library

Library for native apps

JavaScript library

イメージタイル

Yes

Yes

Yes

ベクタータイル

Yes

Yes

No

インタラクティブ性

Yes

Yes

Limited

モバイル最適化

No

Yes

No

ブラウザ最適化

Yes

NoYes

概要注) これらは、Mapboxが提供するソフトウェア群の一部です© Mapbox, Mapbox JapanMapbox GLとは?
●

GL = Graphics Library○●

グラフィックカードはレンダリング用に設計されたハードウェア○○●

CPUベースのレンダリングより高速
CPUよりも豊富な種類の数値演算を高速に処理なぜ重要か○○○●

グラフィックカード (GPU)上で動作するソフトウェアの通称

クライアントでのレンダリングが可能
インタラクティブな描画で効果を発揮
より視覚的な訴求が可能に

Mapbox GL = GPUを利用したマップのレンダリング© Mapbox, Mapbox JapanMapbox Mapを支える要素
スタイル:

マップ表示に必要な描画表現を定義(編集可能)

タイルセット:レイヤーのベースとなるデータの集合(編集不可)

データセット:

データソースとして利用可能なデータ(編集可能)

スタイル(Style)

タイルセット(Tileset)

データセット(Dataset)

スタイル
●

Style JSONにおけるレイヤの定義例

スタイル仕様( Mapbox Style Speciﬁcation )

{

○

●

マップを描画するにあたり、スタイルドキュメントにて定義■

スタイルドキュメントはStyle JSONとして作成■

データソースは、ソース(Source)として指定■

データソースへのスタイルの適用を、レイヤ(Layer)にて定義"id": "national_park","type": "fill","source": "composite","source-layer": "landuse_overlay","minzoom": 5,"filter": ["==",["get","class"

スタイルの利用],"national_park"●○

Mapbox SDKやサードパーティ製ツールから利用可能○

マップがロードされた後に、スタイルの変更も可能]}

データドリブンスタイル○

ソース(Source)の属性情報に応じて、データドリブンにレイヤ(Layer)のスタイルを変更可能○

Expressionを用いてより柔軟なデータドリブンスタイルの定義が可能
https://docs.mapbox.com/mapbox-gl-js/style-spec/© Mapbox, Mapbox Japan

クライアントレンダリングとデータGL(GL JS)

api.mapbox.com
スタイルとデータの読み込み

マップ
レイヤー
ソース
外部データをアップロード☁
外部データの読み込み

レイヤー
ソース

レイヤー
ソース

データソース☁

カスタムデータの読み込み

III. Mapbox と描くこれからの地図

リアルタイム性を高めるデータ処理●

パイプラインを作成し、データを処理○○○

データソース : データをどこから取得するか
ストリーム処理 : リアルタイムあるいは連続的なデータの処理
自動化: 一連の処理をどう関連づけて自動化させるか

データ提供者

データフィード
Tileset API

ローデータ(raster)geoJSON

ソースデータSource Data

Tileset APIStudio

GL JS

Tippecanoe

Upload API

ベクタ化

タイル化

展開

スタイル

ビジュアル化

Vectorize

Tile

Host

Style

Visualize© Mapbox, Mapbox JapanMapbox Tiling Service (MTS)
●
●
●
●
●

ベクタータイルセットを作るためのツール
Mapbox内部のデータ処理サービスを商用化
高速なデータ処理と大容量のデータホストを実現
お客様におけるデータ処理のパイプライン化、自動化を推進
主なユースケース○ 気象データの重ね合わせ○ 選挙区の動向調査○ ハイキングのルート追加○ アクティビティデータの追加○ ホテルや不動産の属性表示○ 複数レイヤからなるタイルの作成

タイルセット

タイルセット
ソースMapbox側で管理ユーザで管理© Mapbox, Mapbox Japanrecipe

スタイル

描画処理を3Dに拡張© Mapbox, Mapbox JapanMapbox GL JS 次期リリース●

従来のGL JSに比べて大幅な性能向上○●

sky レイヤにより、時間や季節、あるいは天候イベントなどにも対応が可能

3D機能の拡張○●ロード時間、初期化時間

Coming Soon !

丘陵、山岳、水平線、空の描画

カメラ機能の拡張○

平面移動から、立体的な移動を実現
カメラAPI

現行のGL JS との互換性やスタイルを維持しながら、新しい地図体験を提供© Mapbox, Mapbox Japan

デザイン●●Mapbox スタイル仕様に基づいたデザインが可能
デザインはMapbox Studioがおすすめ

左: Mapbox StudioのBasic スタイル
右: Mapbox StudioのBasic スタイルをカスタマイズしたスタイル© Mapbox, Mapbox Japan

Mapbox Studio Style EditorMapbox Vector Tiles :デザインを拡張するデータ
路線図(Transits)

Mapbox Transit v2 | Vector tiles

インドアマップ (IndoorMap)

ムーブメント(Movements)

Mapbox Indoor v1 | Vector tiles

Movement Data

© Mapbox, Mapbox Japan浸水リスクのビジュアル化

Flood Factor© Mapbox, Mapbox Japan日本における導入事例※ロゴの掲載の御了承を頂いた企業様のみ掲載しております。

© Mapbox, Mapbox Japan

みなさんに必要なものは何でしょうか-

目的は何か （地図の表示 ➡ サービスの向上)--

トラベルサイト : 予約率(コンバージョン )の改善
不動産サイト: 成約率の改善
ソーシャルメディア : アプリ体験の向上、広告収益の最適化
データ分析: 意思決定を容易にするデータ処理と視覚化

目的を実現するポイント: Mapboxのもたらすメリット-

表示速度/インタラクティブ性の向上
データ転送量削減など、軽量化を実現
様々なクライアントへの対応
柔軟なデータの重ね合わせ
カスタムデータのホスト
デザインツールとユニークなデータ© Mapbox, Mapbox Japan

ベクタータイルと Mapboxを使って、皆さんの負担を減らして、マップを活用するアプリケーションの価値を最大化しましょう！

ご清聴ありがとうございました
tomohiro.ichimura@mapbox.com@tomoichimura