Leaflet Map Panes

A new feature in the Leaflet mapping platform is custom map panes, which allow you to customize the order of map features such as: the base map, map labels, markers and pop-ups.

The Leaflet documentation has a great introduction into What Are Map Panes? and includes a demo map showing how you can use z-index to order your map panes. The demo map shows you how to ensure map labels appear on top of a GeoJSON layer, so that the labels are not hidden behind the GeoJSON data.

It occurred to me that you could also add a button to control the adding and / or removing of a custom map pane on your base map. For example, in the demo map, a button could be used to allow users to turn the map labels on or off.

You can also adjust the opacity of a custom map pane. Therefore not only can you turn a custom pane on or off you can also fade it in and out on the map. I've created my own demo map of custom map panes, which shows how you can fade custom map panes in and out on the map. In the demo map you can turn the map labels, map marker and red circle on and off using the buttons at the bottom of the map.

It's only a little map UX effect but I like it.