Leaflet の地図コンテナにズームレベルの CSS クラスをつける

地図コンテナに CSS クラスをつけるハンドラの作成

今回は次のデータ追加に備えて地図コンテナに「今のズームレベルがわかる CSS のクラス」をつける機能を作ります。

ズームレベルごとに地図上のいろんなもののスタイルを変えたいという需要は結構あるんじゃないかと思うのですが、Leaflet にはそういう（例えばズームレベルに応じて地図コンテナなどにズームレベルがわかる CSS クラスをつけてくれるとか）仕組みはないみたいです。デフォルトであってもよさそうですよね。

機能を考える

ズームレベルに応じて地図コンテナ内のスタイルを触れるようにするには、地図コンテナにズームレベルがわかる CSS のクラスをつけてスタイルシートで

.zoom-level2 .hoge {
   /* ズームレベル 2 のとき hoge をクラスに持つ要素のスタイル */
}

と書ければいいだろうということで、地図コンテナにズームレベル N のとき .zoom-levelN という CSS のクラスがつくようにします。地図を動かしてズームレベルが変わったらそのクラスは書き換えます。

地図コンテナに CSS クラスをつけるハンドラ

ズームレベル変更に応じて動く仕組みということで、L.Handler の拡張で作ります。

L.CSSHandler = L.Handler.extend({
    addHooks: function() {
        this._prefix = 'zoom-level';
        this._map.once('load', this._onLoad, this);
    },

    removeHooks: function() {
        // L.Map と同じ寿命で使う
    },

    _onLoad: function(e) {
        this._container = this._map.getContainer();
        this._setClass();
        this._map.on('zoomstart', this._onZoomStart, this);
        this._map.on('zoomend', this._onZoomEnd, this);
    },

    _onZoomStart: function() {
        this._lastZoom = this._map.getZoom();
    },

    _onZoomEnd: function() {
        this._setClass();
    },

    _setClass: function() {
        if (this._lastZoom) {
            this._container.classList.remove(this._prefix + this._lastZoom);
        }
        this._container.classList.add(this._prefix + this._map.getZoom());
    }
});
L.Map.addInitHook('addHandler', 'customCss', L.CSSHandler);
L.Map.mergeOptions({
    customCss: true
});

クラス名などちょっと適当ですが、とりあえずこれで地図コンテナの div にはズームレベルを表す CSS のクラス .zoom-levelN がつくようになりました。

ズームレベル変更にスタイルが連動

さっそくテストです。ズームレベルを変えていくと何かが変わります。

Leaflet Demo – L.CSSHandler

次回以降この機能を使っていきます。

2019.08.19

LeafletでBotW地図を作ろう

Leaflet