Show overzoomed raster tiles when loading a map at a zoom level greater than available raster tiles

[andrewharvey]

mapbox-gl-js version: 0.32.0

Steps to Trigger Behavior

1. Load a style with a raster source at a zoom level where there is no raster data present. eg. https://api.mapbox.com/styles/v1/mapbox/satellite-v9.html?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpbG10dnA3NzY3OTZ0dmtwejN2ZnUycjYifQ.1W5oTOnWXQ9R1w8u3Oo1yA#20/-33.84319/-238.14999

The tile requests 404 and the map is black.

However if you zoom out 4 times to z16 the tiles load, and then zoom back in 4 times to z20 the raster tiles show up overzoomed.

Expected Behavior

Initially loading at z20, the map should look the same as loading at z16 then zooming into z20.

Actual Behavior

Map is black.

Possible Solution

https://api.mapbox.com/v4/mapbox.satellite.json has a maxzoom of 22, but for this location the data is only there up to ~z16, so the solution can't just check the maxzoom value. It seems the solution here is if a raster source 404's, then try one zoom level up and repeat this until it returns data.

As raised in #1800, it might be better if the Mapbox API returned 204 No content responses rather than 404's so that only a 204 response would result in trying a lower zoom level.

Is this the best solution, would a PR solving it this way be accepted? Or is there a better solution?

[anandthakker]

Oof, yeah this is a tricky one to solve so long as we cannot distinguish between invalid requests and missing tiles. Without a solution to that, my concern with falling back to lower zooms is that it would mean significantly more requests in situations where (a) there's a typo/error in the tile URL, or (b) you're looking at a map where one of your sources only has data covering a small area.

🤔

[kkaefer]

Counterpart to mapbox/mapbox-gl-native#8164

Directly loading a map that requires overzooming raster tiles only shows black at z16.50:
https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v9.html?title=true&access_token=ACCESS_TOKEN#16.5/50.11690/-122.95461

Directly loading the map at z16.49 instead of z16.50 shows the satellite tiles (and you can now zoom in beyond z16.50 and still see tiles in this location), but when panning no new tiles will be loaded:

[kkaefer]

@anandthakker what we do in gl-native is the following:

• request "ideal" zoom level tile. if it can't be found, we ascend the tile pyramid until the minzoom. We retain failed tile loading attempt so that when you're panning, you don't have to climb up the pyramid for the adjacent tiles.

so long as we cannot distinguish between invalid requests and missing tiles

This is true for vector tiles, but not for raster tiles. Raster tiles can either be loaded, or they can't, but unlike vector tiles, there's no notion of "this raster tile exists but is empty".

there's a typo/error in the tile URL

I don't think this is a valid use case we should support; if you enter wrong URLs Mapbox GL just won't work and there's not much we can to about it.

you're looking at a map where one of your sources only has data covering a small area.

This is a valid use case, and it's covered (at least partially) by the bounds key in the TileJSON spec, which defines the The maximum extent of available map tiles. Of course, there are all sorts of use cases beyond having a single rectangular ROI, e.g. polygonal ROIs, or per-zoom level ROIs. In any case, the bounds key isn't currently implemented by GL native.

[anandthakker]

Thanks @kkaefer -- I'll check out the native implementation

[andrewharvey]

you're looking at a map where one of your sources only has data covering a small area.

This is a valid use case, and it's covered (at least partially) by the bounds key in the TileJSON spec, which defines the The maximum extent of available map tiles. Of course, there are all sorts of use cases beyond having a single rectangular ROI, e.g. polygonal ROIs, or per-zoom level ROIs. In any case, the bounds key isn't currently implemented by GL native.

source bounds was implemented in gl js in #4556, which should address concerns with traversing up the tree to find a non empty satellite tile.

[strech345]

is there now a solution?
I've a raster with maxzoom of 19 (bing with quadkey) and want to show this tile level for higher zoom (20 and up) level.

[asheemmamoowala]

The link in the comment points to a LatLng that has added new satellite imagery and no longer reproduces this problem.

It can still be seen at 16.74/11.45313/11.1671 though, using this link: https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v10.html?title=true&access_token=ACCESS_TOKEN#16.74/11.45313/11.1671

[Shane98c]

Is this functionality added as part of #5105?

[andrewharvey]

Thanks @Shane98c you're right it looks like this is fixed in v0.43.0 by #5105

[brianreavis]

@andrewharvey Just tried out v0.43.0 and this doesn't seem to be addressed in #5105, unless I'm missing something. Tried two scenarios:

1. Set a maxzoom of 14 on the raster layer, started zoomed at 16, and no loading was attempted. I suppose this is expected given zooming in to 16 with a loaded map causes everything to go blank? Unfortunate, but expected. Relevant: raster-overzoom mapbox-gl-style-spec#163
2. Tried setting a high maxzoom of 22 and the tiles are fetched as you'd expect, but the failures doesn't cause ascending of the tile pyramid like mentioned in Show overzoomed raster tiles when loading a map at a zoom level greater than available raster tiles #4257 (comment).

The former would be ideal for my use case. Otherwise monkey-patching window.XMLHttpRequest.prototype.open to immediately abort() tile requests from Mapbox GL to avoid requesting bogus tiles is the only real approach (or one could just let them fail, but that's wasteful). Overzooming a raster seems like it'd be a common need? #4257 (comment))

[andrewharvey]

When I visited the link from the original report here (after replacing the access_token), I notice after tile request failures it ascends the pyramid until it gets a tile successfully. Did that not work for you?

[kkaefer]

@brianreavis The behavior @andrewharvey describes is what should be happening. If it doesn't do that, would you be able to provide us with a small example (e.g. JSFiddle) that exhibits this behavior?

[brianreavis]

@andrewharvey @kkaefer Sorry for the delay! Here you go: https://jsfiddle.net/t8szL2wb/

In putting this together, I noticed that setting maxzoom: 15 on the source (not the layer) makes it work as I need it to! That said, it doesn't seem to ascend the pyramid on failure (shown in the fiddle). Not a problem for me, but maybe worth looking into if inclined.

[mollymerp]

@brianreavis setting maxzoom on the layer will prevent tile requests above that zoom because the layer isn't shown above that zoom https://www.mapbox.com/mapbox-gl-js/style-spec/#layer-maxzoom

I think you should be setting the maxzoom on the source – if I change the fiddle to do this it behaves as expected and loads the highest-zoom parent tile available https://jsfiddle.net/t8szL2wb/

[brianreavis]

Thanks for the follow up @mollymerp! You're right, that's what I discovered in #4257 (comment). The second part of that comment was just referencing:

I notice after tile request failures it ascends the pyramid until it gets a tile successfully
#4257 (comment) by @andrewharvey

Which doesn't seem to be the case. Again, not a problem for me at all – but just thought I'd note it if there's anyone else coming to this thread from Google (using a discontinuous tileset for instance).

Thanks for the work on #5105!