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.

Just a quick note here, did u update the zoom value in ```new mapboxgl.Map({ style: 'mapbox://styles/mapbox/light-v10', center: [-74.0066, 40.7135], zoom: 10, //<----here pitch: 45, bearing: -17.6, container: 'map', antialias: true });``` while creating new instance of mapboxgl map? — Dolly, Feb 15 '21 at 10:18
@Dolly Yes, but as it represents the `initial zoom level`, scrolling with the mouse to zoom also works — Marc, Feb 15 '21 at 10:24

Dolly · Accepted Answer · 2021-02-20T19:42:35.697

2

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!

edited Feb 20 '21 at 19:42

answered Feb 15 '21 at 12:17

Dolly

2,213
16
38

Thanks for the information, so, are you saying there is no solution to get buildings for example at zoom level 10? – Marc Feb 15 '21 at 15:44
Seems like it @Marc – Dolly Feb 15 '21 at 15:48
Do you think I could achieve my goal using another source (not the one provided by Mapbox) ? – Marc Feb 18 '21 at 15:36
@Marc Read Here https://docs.mapbox.com/mapbox-tiling-service/examples/building-footprints/#using-the-tilesets-cli-to-generate-a-tileset by default building feature's are available from 13 to15 zoom level but you want them on lower zoom level, you have to publish your own tilesets through mapbox studio. I haven't done this bymyself but seems like it will work. – Dolly Feb 19 '21 at 06:51

MapboxGL JS - Display 3d buildings in lower zoom level

1 Answers1