Mapbox-gl-js "nested" Interior-Polygons not displaying

Question

I have a geoJson-structure that looks like this:

Where the array at the 0 position is the exterior Polygon and the array at position 1 ist the interior Polygon. To style the polygons I add these layers:

{'id': dist.identifier,
      'type': 'fill',
      'source': dist.identifier,
      'layout': {},
      'paint': {
        'fill-opacity': 0.3,
        'fill-color': "#ffff00",
      }
}
//and
{
      'id': `${dist.identifier}-line-layer`,
      'type': 'line',
      'source': dist.identifier,
      'layout': {},
      'paint': {
        'line-width': 3,
        'line-color': '#ffff00'
      }
    }

The output looks like this:

And when I zoom in:

I would expect to see something like this: https://de.wikipedia.org/wiki/GeoJSON#/media/Datei:SFA_Polygon_with_hole.svg

But the interior Polygon is not showing up. Am I doing something wrong, as this should be the valid geoJson Structure (https://de.wikipedia.org/wiki/GeoJSON). I looked at the layer definitions but didn't find anything regarding interior Polygons.

I'd appriciate all input and thank you in advance!

Edit:

Thanks to @Steve Bennet who pointed me to the this lint tool: https://geojsonlint.com/

I found out that I

A: An interior Polygon should follow the right hand rule: https://mapster.me/right-hand-rule-geojson-fixer/

B: It has to have at least 4 Points where start and end are the same

and C: The interior Polygons were not correctly nested in the coordinates array

Could you share the geojson file?? By itself it should be visible in any GitHub repo like this one in my repo — jscastro
@jscastro and interesting, I didn't know about that feature of Github. I am generating it on the fly but I will try this and get back with the result. Then I will lint the structure Thank you for your responses! — S. Kuiter

S. Kuiter S. Kuiter · Accepted Answer · 2021-05-04T14:36:03

Thanks to @Steve Bennet (see comments) who pointed me to the this lint tool: https://geojsonlint.com/