mapbox-gl-jsvector-tiles

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


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.


Solution

  • 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 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:

    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: