はじめに

これまでにベクトルタイルの生産、スタイル、ホスト等のことをこれまでに紹介していきましたが、今回はベクトルタイルの消費に関して書こうと思います。

具体的には、どうやってベクトルタイル地図のウェブ地図、あるいはウェブアプリを作るのか、使うライブラリとプラグインなどについて書きたいと思います。

地図ライブラリについて

まず、どんな地図ライブラリを使うか考える際の参考として、ここでは3つのライブラリを紹介します。

Mapbox GL JS

Mapboxさんのライブラリです。ベクトルタイルの描画に最もよく使われているライブラリではないかとおもいます。クライアントサイドJavaScriptライブラリで、快適なウェブ地図を作成することができます。

現在のVersionは v.2.8.2です。2020年12月、ver1.x から ver.2.xに移行するときに、ライセンスの変更があったので利用するときにはライセンスをよく確認して使いましょう。（トークンはmapboxのホームページで登録するとgetできます。）

少し前のものですが、Mapbox GL JS ver1.xを使って作った簡単な地図はこんな感じです。
https://ubukawa.github.io/vt-test/maps/test-simple-mapbox.html

MapLibre GL JS

Mapbox GL JS (ver.1.x) から派生した、オープンソースのJavaスクリプトライブラリです。Mapbox GL JSのver.1にあった機能を有しています。ベクトルタイルのスタイルなどはMapbox GL JSと同じものを使えることがほとんどです。最近は独自の機能なども増えてきたようです。

少し前のものですが、MapLibreを使って作った簡単な地図はこんな感じです。（Mapbox GL JSとほとんど同じ。）
https://ubukawa.github.io/vt-test/maps/test-simple-maplibre.html#2/0/0

ArcGIS API for JavaScript

これも地図描画のためのJavaScript APIです。ESRIさんの製品を使うために使われます。私の職場ではArcGIS Onlineを使っていることもあり、このライブラリをつかってベクトルタイルの実験をしたことがあります。
この中でもMapbox/Maplibre仕様に準拠したJSONスタイル情報を読むことでベクトルタイルを表示できるようになります。

Esriサーバー以外から提供されているベクトルタイルを追加するためには、以下の技術情報が参考になります。

利用にあたっては、ArcGIS Develperへのサインアップが必要です。
https://developers.arcgis.com/javascript/latest/licensing/

また、ESRIさんのTORの中、64条で以下の記述があるので（2022年6月1日現在）、ArcGIS API for JavaScriptをESRI製品を使わない場合の地図ライブラリとして使うことはないと思います。

Value-Added Applications for web deployment must be used in conjunction with other Esri Products. Third-party technologies may also be used in conjunction with Value-Added Applications as long as the Value-Added Applications are always used in conjunction with other Esri Product(s).

少し前のものですが、ArcGIS REST API for JavaScript（4.16）を使って作った簡単な地図はこんな感じです。
https://ubukawa.github.io/vt-test/maps/test-simple-arc.html

他のライブラリについて

私は主に上記のライブラリでベクトルタイルを扱っているので、Leafletや他のライブラリでのベクトルタイルの扱いはこの記事では書きません。しかし他にもベクトルタイルを扱えるライブラリがあることをここにメモしておきます。

プラグインを使ったウェブ地図構築について（Mapbox GL JS　と　MapLibre GL JS）

ウェブ地図を拡張するためのプラグイン（Mapbox GL JS　と　MapLibre GL JS）

私自身はベクトルタイルの地図を作るときに、Mapbox GL JS や MapLibre GL JSでウェブ地図を使うことが多いです。これらのライブラリで地図を作った後、既存のプラグインを追加することでウェブ地図機能を充実させることができ、使い道が広がるアプリになる可能性があります。（下の図はいくつかプラグインをつけた例です。）

Mapbox GL JS と MapLibre GL JSの両ライブラリのページから、それぞれのプラグインが紹介されています。

プラグイン一覧
- Mapbox GL JS のプラグイン https://docs.mapbox.com/mapbox-gl-js/plugins/
- MapLibre GL JS のプラグイン https://maplibre.org/maplibre-gl-js-docs/plugins/

以下に、よく使いそうなプラグインをいくつかピックアップして紹介します。

機能	名前	MapBox	MapLibre	備考
スタイルの切り替え	StyleSwitcherControl	el/style-switcher, watergis/style-switcher	N/A (ver1.14以前は可)	MapLibreのサポートについてはissue#14にて話されている。
ポップアップで属性表示	PopupControl	watergis/mapbox-gl-popup	N/A	WaterGISさんオリジナル。プラグインを使わないときはpopup-on-clickを使って実装しないといけない。
3Dと2Dの切り替えボタン	PitchToggleControl	tobinbradley/mapbox-gl-pitch-toggle-control, watergis/mapbox-gl-pitch-toggle-control	N/A	右ドラッグでもできるがボタンでも角度を切り替えるもの。WaterGISさんはTypeScript。
範囲の切り替え（ジャンプ）	AreaSwitcherControl	watergis/mapbox-gl-area-switcher	N/A	WaterGISさんオリジナル
凡例のコントロール	LegendControl	watergis/mapbox-gl-legend	watergis/maplibre-gl-legend	WaterGISさんがmapparatus/legend-symbolから開発した。地図の都合でレイヤ数が多い場合は工夫が必要だと思う。
地図出力	ExportControl	watergis/mapbox-gl-export, geolonia/mbgl-export-control	watergis/maplibre-gl-export	Mapbox 用には、WaterGISさんがmpetroff/print-mapsから開発したものと、Geoloniaさんが開発したものがある。
標高値の表示など	ElevationControl	watergis/mapbox-gl-elevation	N/A	WaterGISさんオリジナル。開発中
GeoCoder	Geocoder	mapbox-gl-geocoder	maplibre-gl-geocoder	MapboxにとってはPluginではありません。

このほか、2つの地図を比べるcompareなども便利なプラグインです。

プラグインの実装方法

基本的な実装

実装の仕方について簡単にまとめます。
例として、2つのMapLibreで作った地図（衛星画像）の比較をするプラグイン(maplibre-compare)を使ったページの例をみてみます。

プラグインの読み込み

ウェブ地図を作るときhtmlファイルでmapboxやmaplibreのライブラリを以下のように読んでいると思います。

このファイルの中に、プラグインのライブラリを追加します。JavaScriptファイルとCSSを読むことが多いです（下の例ではmaplibre-gl-compareを読んでいます）。

プラグインの利用

そして、そのプラグインを使っていけばOKです。

プラグイン実装の際の工夫

このようにしていきますが、たくさんのプラグインを使う場合には、読み込むJSファイル（モジュール）が多くなりすぎることがあります。
その場合には、webpackなどのモジュールバンドラを使ってモジュールをまとめる（バンドル化）するという工夫が有効だと思います。

@JinIgarashi さんが作成されたwatergis/mapboxgljs-boilerplateにはそうした工夫が入っていますし、mapboxgljs-boilerplate では config.jsで指定したコンフィグ情報も一緒にバンドルを作れるようになっています（そうすると地図のhtmlファイルからはbundle.jsだけを参照すればよい）。勉強になりますね。

おまけ：　地理院地図Vectorを使ったウェブ地図構築について

ベクトルタイルのウェブ地図アプリを作るにあたって、オープンソースである地理院地図Vector（仮称）を使ってみたいと考えたことがあります。

実際に、ラスタタイルベースの地理院地図を参考にして全国Q地図さんのようなアプリも作られていますし、ベクトルタイルでもできるのではないかと考えた次第です。

全国Q地図は、githubで国土地理院が公開している地理院地図のソースコードをもとに公開しています。　（https://info.qchizu.xyz/qchizu/improve/ より）

地理院地図Vector（仮称）のレポジトリは https://github.com/gsi-cyberjapan/gsimaps-vector-experiment にあります。ウェブサーバーでホストすればウェブ地図を見ることができますので、半年くらい前に、自分のベクトルタイルを使ってこんな感じのテストをしてみました。

地理院地図Vector（仮称）の中身をカスタマイズしていくためには、例えば以下のようなことが必要になると思います。

htdocsのindex.html を編集する
htdocs/sprite に必要な地図記号を入れる
htdocs/image を適宜差し替える
htdocs/dataの中のスタイルファイル（json）を編集する。自分のスタイルにする。
- ただし、ここで使っているスタイルJSONは地理院地図独自の拡張がされており、mapboxやmaplibreのスタイル仕様に即しているわけではない。　構造が違うので、jsonファイルをよく見て対応を考える必要がある。（地理院地図 Vector（仮称）地図デザインファイル仕様 https://maps.gsi.go.jp/help/pdf/vector/stylespec.pdf ）
- 簡単にいうと、groupは無視して、一つのgroupにしてしまい、listの中に、type=itemの要素を作って、その中のlistにtype=layerの要素を作って、その中はmapboxやmaplibreのlayer要素と同じように書けばいい。
htdocs/data/config.js の中でおすすめ地図のサムネイル、タイトル、url（スタイルjsonの場所）を指定する。
htdocs/js/gsimaps-bvtile.js　のメニューを英語にする
htdocs/js/src/data/vectortiledata.js　を編集する　（ここにpbfタイルの指定場所があります）
htdocs/js/src/data/vectortilestyle.js　を編集する
などなど

ということで思った以上に大変で、なかなかうまくカスタマイズができなかったのでそれ以上追求していません。
特に、スタイル仕様の違いのところは他のベクトルタイル地図との間での大きな壁なので、私の力量では厳しいものがありました。

まとめ

この記事では、ベクトルタイルの消費の分野のうち、ウェブ地図アプリをどうやって作るかというところについて私の経験をまとめました。

謝辞

Mapbox GL JS (ver1.x) やMapLibre GLJSのプラグインに関しては、@JinIgarashi さんの作ったレポジトリを勉強させていただいています。ここに感謝いたします。

References

ライブラリ
- Mapbox GL JS　https://docs.mapbox.com/mapbox-gl-js/guides/
- MapLibre GL JS　https://maplibre.org/projects/maplibre-gl-js/
- ArcGIS API for JavaScript https://developers.arcgis.com/javascript/latest/
プラグイン関係
- el/style-switcher　https://github.com/el/style-switcher
- watergis/style-switcher　https://github.com/watergis/mapbox-gl-area-switcher
- watergis/mapbox-gl-popup https://github.com/watergis/mapbox-gl-popup
- tobinbradley/mapbox-gl-pitch-toggle-control https://github.com/tobinbradley/mapbox-gl-pitch-toggle-control
- watergis/mapbox-gl-pitch-toggle-control https://github.com/watergis/mapbox-gl-pitch-toggle-control
- watergis/mapbox-gl-area-switcher https://github.com/watergis/mapbox-gl-area-switcher
- watergis/mapbox-gl-legend https://github.com/watergis/mapbox-gl-legend
- watergis/maplibre-gl-legend https://github.com/watergis/maplibre-gl-legend
- watergis/mapbox-gl-export https://github.com/watergis/mapbox-gl-export
- geolonia/mbgl-export-control https://github.com/geolonia/mbgl-export-control
- watergis/maplibre-gl-export https://github.com/watergis/maplibre-gl-export
- watergis/mapbox-gl-elevation https://github.com/watergis/mapbox-gl-elevation
- mapbox-gl-geocorder https://github.com/mapbox/mapbox-gl-geocoder
Repository
- 地理院地図Vector（仮称）提供実験　https://github.com/gsi-cyberjapan/gsimaps-vector-experiment
- mapboxgljs-boilerplate　https://github.com/watergis/mapboxgljs-boilerplate
- maplibre-compareの例（私が作った衛星画像比較）　https://github.com/ubukawa/sentinel2-Beijin20220102/
- 地理院地図Vector（仮称）を試したレポジトリ（不完全）　https://github.com/ubukawa/test-map
Other
- Webpack https://webpack.js.org/
- Q地図 https://info.qchizu.xyz/qchizu/
- 地理院地図 Vector（仮称）地図デザインファイル仕様 https://maps.gsi.go.jp/help/pdf/vector/stylespec.pdf