What do minzoom and maxzoom do in Mapbox-GL-JS exactly?

Question

What exactly do the minzoom and maxzoom properties on vector tile sources, and vector-based layers do in Mapbox-GL-JS styles? The documentation is a bit short.

Answer 1

In a vector tile source

Let's take this example:

"mytiles": {
    "type": "vector",
    "tiles": ["http://localhost/tiles/{z}/{x}/{y}.pbf"],
    "minzoom": 7,
    "maxzoom": 12
}

This means:

• If there is a TileJSON file available at http://localhost/tiles/tiles.json (I think), ignore its minzoom and maxzoom properties.
• Never attempt to fetch any tile outside the range 7-12.
• If a tile is needed at, say, zoom 13, then fetch the equivalent tile at zoom 12, and overzoom it instead.
• If a tile is needed at, say, zoom, 6, then don't display a tile at all. Underzooming never occurs.

If minzoom and/or maxzoom properties are not defined on the source, the equivalent properties are used from a TileJSON if available. Otherwise, tiles are assumed to be available at any zoom level requested, and no overzooming occurs. (If tiles aren't actually available, they just don't display.)

In a vector layer

Let's take this example, referring to the source above:

{
    "id": "mylayer",
    "source": "mytiles",
    "source-layer": "mytiles-layer",
    "type": "fill",
    "minzoom": 10,
    "maxzoom": 14
}

This means:

• Never display this layer at zooms less than 10, even though there are tiles available.
• Attempt to display this layer at zooms 10.0-13.9, overzooming tiles between 13.0 and 13.9 as required.
• Never display this layer at zooms 14+

If minzoom/maxzoom properties are not defined, then the layer will attempt to display at any given zoom within the source's zoom range.

On the map object

For completeness: When instantiating the Map object:

   const map = new mapboxgl.Map({
     container: 'map,
     style,
     minZoom: 8, // note the camel-case
     maxZoom: 15
   });

This means:

• Don't allow the user to zoom out less than 8, or in more than 15.