search

maplibre / maplibre-gl-js

MapLibre GL JS - Interactive vector tile maps in the browser
https://maplibre.org/maplibre-gl-js/docs/
Other
6.47k stars 694 forks source link

Larger tile boundaries #4803

Open wipfli opened 1 week ago

wipfli commented 1 week ago

maplibre-gl-js version: 5.0.0-pre.1 browser: chrome on ubuntu

Steps to Trigger Behavior

1. 2. 3.

Link to Demonstration

5.0.0-pre.1

https://jsbin.com/gacagon/edit?html,output

image

4.7.1

https://jsbin.com/didahib/edit?html,output

image

Expected Behavior

Tile content should be clipped at the tile boundary.

Actual Behavior

Tile content is larger than tile boundary. Depending on content, margin seems different (source layer "earth" extends more than source layer "landuse"). This creates a visual border effect which is notable during tile loading on slow connections.

HarelM commented 1 week ago

Thanks for taking the time to report this, I don't remember globe code touching tile boundaries in terms of clippling, but the fact don't lie :-)

kubapelc commented 1 day ago

I will definitely investigate this. Globe modified clipping a lot, since curved tiles are a lot more prone to seams at the border, especially with the fill layer, which can have much finer geometry than the stencil mask and thus extend beyond it vertically. I'm not sure there will be a good solution to this that changes the clipping logic itself, but it should be possible to detect tiles that lack a neighbour and use a different clipping mask for them.