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): enter image description here

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.

1 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.