GeoJsonLayer: How to ensure outline of a certain polygon is rendered above all others?

[seb-enovate]

I want to use GeoJsonLayer to create an interactive map where a user can click on countries to select them, and when selected the outline of the country polygon will change colour. The problem I have is that sometimes the outlines of other countries overlap and obscure the outline of the selected country.

Here is a Codepen demonstrating the issue. In this example Norway is the selected country (I've hardcoded that for this prototype), and as you can see the white outlines of neighbouring countries are obscuring the black outline of Norway:

So is there anyway to ensure that the outline of the selected polygon is drawn above the other outlines in a scenario like this?

[ibgreen]

If it is just one polygon you can always use brute force and draw a second GeoJSON layer with just that polygon. There are several techniques to make sure it ends up on top.

• Setting polygonOffset prop,
• elevating z axis (by modifying data or via modelMatrix)
• disabling depthWrite

[seb-enovate]

Thanks @ibgreen, here's an adapted version of my original Codepen that creates a separate GeoJsonLayer with the features filtered down to just the one I want, and then disables depthWrite - seems to work well!