MapboxGL JS - Display 3d buildings in lower zoom level

Question

I use MapboxGL JS v2 with mapbox://styles/mapbox/streets-v11 style.
And I use this code to display 3D buildings on my map:

map.addLayer({
    'id': '3d-buildings',
    'source': 'composite',
    'source-layer': 'building',
    'filter': ['==', 'extrude', 'true'],
    'type': 'fill-extrusion',
    'minzoom': 15,
    'paint': {
        'fill-extrusion-color': '#666',
        'fill-extrusion-height': ['interpolate', ['linear'], ['zoom'], 15, 0, 15.05, ['get', 'height']],
        'fill-extrusion-base': ['interpolate', ['linear'], ['zoom'], 15, 0, 15.05, ['get', 'min_height']],
        'fill-extrusion-opacity': 0.9,
    }
});

It's working as expected, as seen in this example.

Now, what I want is to load these buildings at lower zoom level, for example 10 instead of 15.
So, I changed minzoom from 15 to 10, and I also changed the interpolate stuff to use linear interpolation from 10 to 15.05.

Here is the final code:

map.addLayer({
    'id': '3d-buildings',
    'source': 'composite',
    'source-layer': 'building',
    'filter': ['==', 'extrude', 'true'],
    'type': 'fill-extrusion',
    'minzoom': 10,
    'paint': {
        'fill-extrusion-color': '#666',
        'fill-extrusion-height': ['interpolate', ['linear'], ['zoom'], 10, 0, 15.05, ['get', 'height']],
        'fill-extrusion-base': ['interpolate', ['linear'], ['zoom'], 10, 0, 15.05, ['get', 'min_height']],
        'fill-extrusion-opacity': 0.9,
    }
});

Unfortunately it's not working, it looks like it still waits for zoom level 15 to load, and I didn't find anything on the internet to make it work.

Answer 1

It seems like tile set's for building are generated after zoom level 13.

READ HERE

So, when we query map queryRenderedFeatures({ layers: ["3d-buildings"] }); on zoom level below 13 no feature's get added on Map. But once the zoom level is greater then 13 few building feature's get added.

Screenshot zoom level<13

Screenshot zoom level>13

UPDATE

In order to make it work from zoom level 10 to 15, You have to create your own tileset using Tilesets CLI where you have to make a recipe json and have to provide zoom levels like:

{
   "version": 1,
   "layers": {
   "building_footprints": {
   "source": "mapbox://tileset-source/username/building-footprints",
   "minzoom": 10, //<---
   "maxzoom": 15
   }
 }
}

Screenshot:

Step by Step Creation

Thanks!