29 - マップペイン

学習内容: マップペインを使ってレイヤーの重なり順を制御します。

ポイント:

デフォルトのペイン構造

mapPane (親)
tilePane z:200
overlayPane z:400
shadowPane z:500
markerPane z:600
tooltipPane z:650
popupPane z:700

カスタムペイン（このサンプル）

labelsPane z:450 (ポリゴンとマーカーの間)
highlightPane z:410 (オーバーレイの上)
// カスタムペインを作成
map.createPane('labelsPane');
map.getPane('labelsPane').style.zIndex = 450;

// ペインを使用してレイヤーを追加
L.tileLayer(labelTileUrl, {
    pane: 'labelsPane'
}).addTo(map);

// ポリゴンをデフォルトのoverlayPaneに追加（z:400）
L.polygon(coords).addTo(map);

// ラベルがポリゴンの上に表示される