概要

私が個人で行っている東アフリカのケニアとルワンダの水道局向けの水道ベクトルタイルのオープンソース活動の中で、ベクトルタイルのレイヤの凡例をMapbox GL JSで見たいという要望がありました。

WebGIS上に凡例を表示させる方法はいろいろとあると思いますが、面倒くさがりな私はstyle.jsonから自動生成させたいと考え、あれこれ調べていく中で、Mapbox GL JSのプラグインmapbox-gl-legendを開発しましたのでご紹介します。公式のMapbox GL JSのプラグインサイトにも掲載されています。

使い方

Github packageもしくはnpmjsに登録されていますので、簡単にお使いになれます。オープンソースライセンス（MITライセンス）にしていますので、ご自由にお使いいただけます。

まず、npmパッケージとしてインストールします。

npm i @watergis/mapbox-gl-legend --save

まずパッケージをimportします。

import MapboxLegendControl from "@watergis/mapbox-gl-legend";
import '@watergis/mapbox-gl-legend/css/styles.css';

次にmapインスタンスを生成します。

const map = new mapboxgl.Map({
        container: 'map',
        style:'https://narwassco.github.io/mapbox-stylefiles/unvt/style.json',
        center: [35.87063, -1.08551],
        zoom: 12,
        hash:true,
    });
    map.addControl(new mapboxgl.NavigationControl(), 'top-right');

ここでは私が関わっているケニアのナロック水道局の水道ベクトルタイルのstyle.jsonを使います。背景には国連ベクトルタイルツールキットで生成されたOSMベースの地図を表示しています。

Mapオブジェクトにstyle.jsonの情報を読み込んでからプラグインの設定を行います。

map.on('load', function() {
const targets = {
        'pipeline': 'Pipeline',
        'meter': 'Water Meter',
        'flow meter': 'Flow Meter', 
        'valve': 'Valve', 
        'firehydrant': 'Fire Hydrant', 
        'washout': 'Washout',
        'tank': 'Tank', 
        'wtp': 'WTP', 
        'intake': 'Intake', 
        'parcels': 'Parcels', 
        'village': 'Village', 
        'dma': 'DMA'
};
// showDefaultをfalseにするとデフォルトで非表示になります。
map.addControl(new MapboxLegendControl(targets, {showDefault: false}), 'top-right');
// showDefaultをtrueもしくは省略するとデフォルトで凡例が開いた状態になります。
map.addControl(new MapboxLegendControl(targets, {showDefault: true}), 'bottom-right');
});

MapboxLegendControlのコンストラクタの最初の引数に、対象のレイヤIDと凡例表示用のレイヤ名の組み合わせたオブジェクトを渡してあげます。

第二引数にはshowDefaultというオプションを用意しています。trueにすると最初から凡例を表示したままに、falseにすると凡例を非表示に状態にします。省略した場合のデフォルトはtrueになります。

あとはwebpackなどでビルドしてあげれば完了です。

完成

下にデモ画像を用意しました。こんな感じに凡例をお手軽に見れるようになります。

実際に地図を動かしてみてみたい方はこちらのURLからアクセスしてご覧になれます。

Githubリポジトリについて

以下が、Githubのリポジトリはこちらになります。
Exampleも用意しておりますので、より完全なソースコードをご覧になりたい場合はご利用ください。

このプラグインへのコントリビューション

プラグインの利用に際して、要望やバグ修正などありましたら、Issueやプルリクエストはいつでも歓迎いたします。またstarやForkをいただけると励みになります。

またstyle.jsonはかなり複雑なレイヤの構成も表現できるので、一部のスタイルではうまく凡例表示できないです。例えば一つのレイヤの中でフィールドの値によってアイコンを変えたりする場合に今のプラグインでは完全な凡例は表示できなかったりします。もしそのあたり、お力、ご助言を頂けたら大変助かります。

このプラグインが皆様の地図アプリのお役に立てましたらと思います。