Polygon layer covers the road lines, and zIndex makes it worse

• Add order is area, then road, then POI, yet the area covers the roads while POI sits above the area
• After `{ zIndex: 999 }` on the line layer the lines disappear and only flicker while panning
• `map.getPane('overlayPane').style.zIndex` is `400`, the default

1. Inspect each layer's `.leaflet-pane` and its computed `z-index` in the Elements panel
2. Check whether layers were given different `renderer` or `pane` options
3. Check `addLayer` order, since within one pane the later layer is on top
4. Set `interactive: false` on the area layer to rule out pointer-event interference
5. List every pane with its z-index value

Create dedicated panes with explicit z-index (`areas` 410, `roads` 420, `pois` 430) and pass `pane` to each layer; in OpenLayers `setZIndex(20)` on roads and `10` on areas does take effect as expected.

console.log(map.getPane('overlayPane').style.zIndex);   // 400
document.querySelectorAll('.leaflet-pane').forEach(p =>
  console.log(p.className, getComputedStyle(p).zIndex));

map.createPane('areas');
map.getPane('areas').style.zIndex = 410;

map.createPane('roads');
map.getPane('roads').style.zIndex = 420;

map.createPane('pois');
map.getPane('pois').style.zIndex = 430;

L.geoJSON(areaData, {
  pane: 'areas',
  style: { fillOpacity: 0.35, color: '#1a6fd4', weight: 1 }
}).addTo(map);

L.geoJSON(roadData, {
  pane: 'roads',
  style: { color: '#e8590c', weight: 3 }
}).addTo(map);

L.geoJSON(poiData, { pane: 'pois' }).addTo(map);

• Setting `zIndex` per layer inside the default `overlayPane`, where it is ignored for ordering
• Giving one layer a distinct `zIndex`, which forces a separate renderer whose pane default of 400 drops it below the areas