Adding panes to order webmap layers

There was quite a bit of researching necessary for fixing up the layer order of our webmap. In the end, I discovered that creating separate panes for each layer and assigning the new panes to the layers was the simplest way to go about it.

Below is a snippet of the code to illustrate how the ordering was achieved:

Leaflet has default panes set for displaying different elements of a map. The layers overlay pane is set to a z-index of 400. As we hard coded the catchment areas onto our web map, it was set on the 400 z-index default. Therefore all the layers needed to be below the catchment area layer were given a pane of less than 400 and all layers needed to be above the catchment area layer were given a z-index greater than 400. As our wards layer was needed to be below the catchment area layer, it was assigned to the pane with a z-index of 398, similarly, the place of interest layer was needed to be above the catchment layer for our web map and therefore given a z-index of 652.

The image below is a zoomed in snippet of the webmap with the 3 layers, "wards", "Points of Interest" and the catchment areas turned on to show how the webmap looks now with the changed ordering of layers.