Skip to content

feat(TileLayer): Add visibleMinZoom & visibleMaxZoom props#10091

Open
felixpalmer wants to merge 9 commits intomasterfrom
felix/tile-layer-overdraw
Open

feat(TileLayer): Add visibleMinZoom & visibleMaxZoom props#10091
felixpalmer wants to merge 9 commits intomasterfrom
felix/tile-layer-overdraw

Conversation

@felixpalmer
Copy link
Copy Markdown
Collaborator

@felixpalmer felixpalmer commented Mar 12, 2026

Background

The extent prop in TileLayer controls whether tiles are fetched & drawn when the viewport zoom is below minZoom, but there is no mechanism to control this for zooms above maxZoom. It is also a common source of confusion on whether these props control the levels at which data is loaded or shown.

New API

Two new props are added:

  • visibleMinZoom: The zoom below which TileLayer will not draw
  • visibleMaxZoom: The zoom above which TileLayer will not draw

To illustrate the interplay between all these props, the website TileLayer example is updated. SEE LIVE DEMO

Screenshot 2026-03-31 at 10 52 47

Change List

  • Add visibleMinZoom & visibleMaxZoom props
  • Update website example to demonstrate how these props interact
  • New widget in website example to explain relation between tile loading & resolving viewport zoom to tile zoom
  • Docs


- Default: 0

#### `overdraw` (boolean, optional) {#overdraw}
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good name? overzoom?

@coveralls
Copy link
Copy Markdown

coveralls commented Mar 12, 2026

Coverage Status

coverage: 80.341% (+0.001%) from 80.34%
when pulling 51f95bb on felix/tile-layer-overdraw
into fcd90b9 on master.

@Pessimistress
Copy link
Copy Markdown
Collaborator

It has always been a point of confusion because minZoom and maxZoom sounds symmetrical, but they work differently. There are two behaviors - visibility and fetching - that the users may want to control in underzoom/overzoom. I personally think we should have four props for each of these.

@felixpalmer
Copy link
Copy Markdown
Collaborator Author

felixpalmer commented Mar 26, 2026

@Pessimistress so would you be in favour of:

  • minZoom: min zoom level at which tiles are fetched
  • maxZoom: max zoom level at which tiles are fetched
  • minDisplay: min zoom level at which tiles are displayed
  • maxDisplay: max zoom level at which tiles are displayed
  • extent: clipping region for tile fetches

minDisplay & maxDisplay are new, while the other keep the current behavior. We then don't need overdraw at all

@chrisgervang
Copy link
Copy Markdown
Collaborator

How about naming the new props:

  • visibleMinZoom: min zoom level at which tiles are visible
  • visibleMaxZoom: max zoom level at which tiles are visible

Along the same lines as the visible prop for layers and reads naturally ("visible at min zoom")

@ibgreen
Copy link
Copy Markdown
Collaborator

ibgreen commented Mar 27, 2026

No big objections other as long as we put in some effort on the prop naming, to make this as orthogonal, expandable and intuitive as we can.

FWIW

  • I have sometimes wanted a minZoom/maxZoom prop (or visibleMinZoom, visibleMaxZoom or ...) prop on all layers.
  • One use case is that as one zooms in one can change between a more aggregated view (perhaps a point layer) and then a detailed layer (e.g. a HexagonLayer) as one gets close, but there are other use cases as well.
  • I expect this can be done with the layerFilter mechanism but that is a bit clunky (centralized and non-declarative).

Just mill for the grist if we are ideating about such props.

@chrisgervang
Copy link
Copy Markdown
Collaborator

I could imagine visibleMinZoom / visibleMaxZoom as a base Layer prop. I see it as a configuration of the visible prop, both functionally and in intent.

I also have run into the "refinement" use case you've mentioned @ibgreen. Maplibre has a nice implementation of this.

I'm in favor of starting with the TileLayer and eventually extending it to the base Layer. I think it'd also be nice if visibility toggles could be configured to dissolve - today one can set opacity and a transition prop - how might we extend that to zoom-controlled visibility?

@felixpalmer felixpalmer changed the title feat(TileLayer): Add overdraw prop feat(TileLayer): Add visibleMinZoom & visibleMaxZoom props Mar 31, 2026
@felixpalmer
Copy link
Copy Markdown
Collaborator Author

@chrisgervang @ibgreen I've reworked this to use visibleMinZoom / visibleMaxZoom and updated the description. Be sure to check the improved website example

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants