Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 754
Steve Bennett Avatar asked Jan 10 '18 22:01

Steve Bennett


People also ask

What does maximum zoom level mean?

A zoom level determines how much of the world is visible on a map. Mapbox provides maps in 23 zoom levels, with 0 being the lowest zoom level (fully zoomed out) and 22 being the highest (fully zoomed in).

Does Mapbox use JavaScript?

Mapbox GL JS is a JavaScript library for vector maps on the Web. Its performance, real-time styling, and interactivity features set the bar for anyone building fast, immersive maps on the web.

What is a Mapbox layer?

A layer references a data source that defines the features that should be appear when the layer is rendered, and it provides styling instructions that describe the visual properties that should be applied to those features when the layer is rendered.


1 Answers

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.
like image 187
Steve Bennett Avatar answered Sep 27 '22 23:09

Steve Bennett