Working with map panes

Demo

This tutorial illustrates how to make effective use of Leaflet panes.

Following the tutorial on the Leaflet JS website.

Mark-up

The mark-up for a custom pane is relatively straight-forward. Add a l-pane tag with a name attribute to instruct leaflet-html to add a new pane.

1
<!-- Example app using a Pane -->
2
<l-map zoom="3" center="[55, 0]">
3
  <l-tile-layer
4
    url-template="https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png"
5
  ></l-tile-layer>
6
  <l-pane name="coastline">
7
    <l-tile-layer
8
      url-template="https://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png"
9
    ></l-tile-layer>
10
  </l-pane>
11
  <l-geojson id="countries"></l-geojson>
12
</l-map>

Lines 6 and 10 show the modifications required to place a layer into a pane.

Control the z-index and pointer events

/* Style the element generated by Leaflet JS */
.leaflet-coastline-pane {
  z-index: 450;
  pointer-events: none;
}

Sample data

In a real application, the HTML will be server rendered with geoJSON. But for this short demo the following snippet of JS has been used.

/** Sample data */
document
  .getElementById("countries")
  .setAttribute("geojson", JSON.stringify(euCountries));

Conclusion

Leaflet HTML supports custom panes for those times when controlling the z-index of a collection of layers is important.