GeoJSON loaded but not displaying in MapBox GL JS

Question

I have a GeoJSON file from the wed I'd like to load on my map through MapBoxGL JS. At first I had trouble loading it but following the instructions on this link, I was able to load it.

I know the file is loaded because I look at the debugger and I see the GeoJSON data as a JS object loaded in the source object, but nothing gets displayed on my map itself. I get no error messages at all.

Here is the code: Anyone has any idea what the issue could be? Thanks!!

// Source properties
const s: any = {
    id: 's',
    type: 'geojson',
    data: await fetch('data/url', {
        headers: {
           'Accept': 'application/geo+json'
        }
        }).then(response => response.json()),
    };

// Layer
const fills_layer: FillLayer = {
    'id': 'fills_layer',
    'type': 'fill',
    'source': 's',
    'layout': {},
    'paint': {
        'fill-outline-color': '#484896',
        'fill-color': '#fff',
        'fill-opacity': 0.4
        },
 };

Answer 1

I can suggest that you modify the code as follows:

'layout': {'visibility': 'visible'},

Or with this loading form:

   map.addSource('s', {
      'type': 'geojson',
      'data': './s.geojson'
   });

   map.addLayer({
      'id': 's',
      'type': 'fill',
      'source': 's',
      'layout': {'visibility': 'visible'},
   });

I hope it helps you!