【Leaflet.markercluster】クラスタリングされたマーカーのz-indexを設定しようとして苦戦した

Leaflet&markerclusterでクラスタリングされたマーカーのz-indexを設定しようとして苦戦した話。

概要

今回の記事では、Leaflet&markerclusterでマーカーのz-indexを設定しようとして苦戦した話を掲載する。

仕様書

環境

• Leaflet 1.7.1
• Leaflet.markercluster 1.4.1

手順書

図形の上にマーカーを表示したくてゴニョゴニョしてたんだけどもなかなかうまくいかなかった。

Paneを作って、そのPaneにz-indexを設定しようとしたところ、マーカー自体は設定したz-indexになったんだけども、クラスタリングされた状態（マーカがまとまって数値が表示されてる状態）のマーカーは設定したz-indexが反映されない！

var pane_marker = map.createPane('pane_marker');
pane_marker.style.zIndex = 1000;

var mk = L.marker([lat, lng], {
    icon: icon,
    pane: 'pane_marker'
});

ChromeのDevToolsで確認するとクラスタリングされた状態のマーカーは指定したPaneにマーカーが描写されず、デフォルトのleaflet-marker-paneに描写されてた。

markerClusterGroupのclusterPaneでPaneを設定できるらしいんだけども、うまく描写されない！

var markers = L.markerClusterGroup({
    clusterPane: 'pane_marker',
    showCoverageOnHover: false,
    maxClusterRadius: 16,
    spiderfyOnMaxZoom: true
});

やむなくCSSでleaflet-marker-paneのz-indexを設定すると意図した感じに描写されるようになった。

.leaflet-marker-pane {
    z-index: 1000 !important;
}

まとめ（感想文）

なんだかもやもやする！