Viewport padding for loading (raster) tiles outside the viewport

[patrikschiller]

Hi,
I already posted this issue to OpenStreetMaps Slack and closed the thread thinking, that I resolved the issue. However, I did not.

What I need is an option to load extra tiles outside the viewport. More specifically, I need to load tiles on those sides of the viewport, which are too close to the edge of the loaded tiles on that given side (the orange tiles in the following image):

That means I need to effectively expand the active area used for filtering out the non-visible tiles.

I looked through the relevant code, especially transform.ts, and found out that visible tiles are computed in Transform.coveringTiles() method via frustum culling. The problem is, that the same transform is used for tiles loading (filtering non-visible ones) and also for their rendering. So expanding the transform (viewport) results in loading more tiles, but also the map "zooms-out", which results in the same behavior as without the padding in the end.

Last week I came up with a temporary solution for the problem, where I created a copy (via Transform.clone()) of the original map.transform (which is initially the same object shared with map.painter.transform), expanded it by modifying its width and height properties, and set the original non-padded transform to the map.painter. So in this state, the padded transform (map.transform, having let's say 1200x1000) is used for the tile/viewport testing, and the map.painter.transform (which has the original resolution 1000x800) is used for rendering. Initially, it seemed to work perfectly until I spotted a few problems:

1. The map.transform is probably used also for handling mouse (and other canvas location) events, while the events still have the non-padded coordinates (in the range [0-1000]x[0-800]), which are sadly applied w.r.t. the padded map.transform [1200x1000]. This results in the map center drifting towards the upper left corner (the higher the padding is, the more it drifts). This is pretty annoying, since the map is not zooming into the center but towards the drifted center. I managed to partially fix this problem, but not fully.
2. Probably, the padded map.transform also negatively affects tiles loading/visibility while crossing the data line with the viewport (there is an area - a vertical strip around the data line, when all tiles in the viewport disappear, if the map center is inside it.
3. And maybe, there might be more issues that I didn't spot.

Regarding my problem, I have a few questions:

1. Is there any way, how to resolve the mentioned problem without the need to modify maplibre-gl-js at all? Today, we came up with an idea of modifying the mentioned map.transform.coveringTiles() method (setting our custom version with custom tile collision testing) but haven't tried to implement it yet, since there might be a better solution - the reason I'm starting this discussion.
2. In case the maplibre modification would be required, is this feature something, that could be potentially integrated into the library, or is it too specific? And what approach would you recommend?

Thank you :)

Possible use-cases:

• preloading tiles around the viewport for a better visual experience when moving with the map
• read data outside the viewport (for custom rendering - which is our case, we use CustomLayers with RasterTileSource)

[HarelM]

I would consider adding an option to the map called viewPortPadding and add some extra variables to trasform class that are specific to this case.
Once there are not the same as width and height you can use them in the relevant places only.
I would consider getting feedback from the community to see if this is something other needs.
Generally speaking, if this is not alot of code changes and fully tested I don't see a reason not to introduce this.