Update a choropleth layer by zoom level when using a GeoJSON in Mapbox

Question

I am trying to replicate this example https://docs.mapbox.com/mapbox-gl-js/example/updating-choropleth/, but instead of using the Mapbox tiles, I am using a GeoJSON. Independently the layers show, but the switching at a zoom level does not work for some reason. It only shows either the regions or the districts.

    mapboxgl.accessToken = 'SOME TOKEN';
    const map = new mapboxgl.Map({
        container: 'map', // container ID
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        style: 'mapbox://styles/mapbox/satellite-v9', // style URL
        projection: 'globe', // Display the map as a globe, since satellite-v9 defaults to Mercator
        zoom: 2, // starting zoom
        minZoom: 2,
        center: [108, 4] // // starting center in [lng, lat]
    });

    map.on('style.load', () => {
        map.setFog({}); // Set the default atmosphere style
    });
    
    const zoomThreshold = 7;


    map.on('load', () => {
        map.addSource('Ghana', {
            type: 'geojson',
            // Use a URL for the value for the `data` property.
            //data: 'https://docs.mapbox.com/mapbox-gl-js/assets/rwanda-provinces.geojson'
            //data: "https://raw.githubusercontent.com/Laurent-Smeets-GSS-Account/geojsons/main/geojsons_files/Districts_261_simplified.json"
            data: "https://raw.githubusercontent.com/Laurent-Smeets-GSS-Account/geojsons/main/geojsons_files/simplified_regions_and_districts261.geojson"
           // data: "https://raw.githubusercontent.com/Laurent-Smeets-GSS-Account/geojsons/main/geojsons_files/simplified_regions_and_districts272.geojson"
        });
//https://github.com/Laurent-Smeets-GSS-Account/geojsons/blob/main/geojsons_files/simplified_regions_and_districts.geojson

map.addLayer({

            'id': 'Ghana',
            'type': 'fill',
            'source': 'Ghana',
            'maxzoom': zoomThreshold,
            'paint': {
                'fill-color':'blue',
                'fill-opacity':0.6,
                'fill-outline-color':'#fff'
            },
            filter: ['==', 'level', 'Region']        


        });
        
        map.addLayer({

            'id': 'Ghana',
            'type': 'fill',
            'source': 'Ghana',
            'minzoom': zoomThreshold,
            'paint': {
                'fill-color':'red',
                'fill-opacity':0.6,
                'fill-outline-color':'#fff'
            },
            filter: ['==', 'level', 'District']        


        });
        
                


    });

So, basically the same as in this example: docs.mapbox.com/mapbox-gl-js/example/updating-choropleth. When the map is zoomed out it should show the shapefiles of the Regions in Ghana (similar to states in the US) and when the user zooms in, it should show the districts (similar to counties in the US). So at a given zoom level (for example 4), it should switch to the layer, what am I missing?

Answer 1

It works perfectly well, you just have to give different ids to your two GeoJSON layers:

map.addLayer({
  'id': 'Ghana1',
  'type': 'fill',
  'source': 'Ghana',
  'maxzoom': zoomThreshold,
  'paint': {
    'fill-color':'blue',
    'fill-opacity':0.6,
    'fill-outline-color':'#fff'
  },
  filter: ['==', 'level', 'Region']        
});
        
map.addLayer({
  'id': 'Ghana2',
  'type': 'fill',
  'source': 'Ghana',
  'minzoom': zoomThreshold,
  'paint': {
    'fill-color':'red',
    'fill-opacity':0.6,
    'fill-outline-color':'#fff'
  },
  filter: ['==', 'level', 'District']        
});