How to sequence overlapping GeoJSON using bringtoFront and/or zindex?

Question

I currently have multiple GeoJSON polygons that overlap. I want to be able to layer them so I can click a GeoJSons a popup menu for that specific polygon to popup. Additionally, I want to have a side menu that toggles between the GeoJSONs. I am a beginner and any guidance is helpful.

I have used both bringtoFront and zindex methods, although I’m not sure its correct. Toggling between different menu options disrupts the sequencing of the GeoJSON layering. How can I fix this?

Code for menu with bringtoFront: https://github.com/DanFinelli/overlapGeoJ/blob/master/test1_DesBarres_usingFrontmethod.html

Menu with zindex: Same location: /overlapGeoJ/blob/master/test1_DesBarres

Both look like this (notice side menu):

Alternatively, I tried using bringtoFront and eliminating the menu. This seems to work initially, although when I refresh the page, the layer sequence is occasionally out of order. Why is this happening / Is there a way to fix this? Ideally, I would be able to have the menu bar, but this method seems to work best right now.

No menu with bringtoFront: overlapGeoJ/blob/master/test1_DesBarres_allOne_noMenu_TESTTEST.html

This looks similar (minus style changes), but without the side menu.

Answer 1

I figured out a solution. I ended up using panes and zindex to layer the geojsons.

Create a map layer. Then create panes on that layer. Set each pane to zindex according to the preferred layer (The lower the number, the further that pane is from the viewer) .

I am a beginner so the code may be messy.

I made a template which can be found on github: https://github.com/DanFinelli/OverlappingGeoJSON_Panes_Template/blob/master/OverlapPolygonTemplate.html