Leaflet / Leaflet

🍃 JavaScript library for mobile-friendly interactive maps 🇺🇦
https://leafletjs.com
BSD 2-Clause "Simplified" License
40.17k stars 5.75k forks source link

Tall custom sized tiles are not wrapped correctly #9326

Open mmlodzikhexagon opened 1 month ago

mmlodzikhexagon commented 1 month ago

Checklist

Steps to reproduce

I'm trying to get custom sized tiles from http://www.ign.es/wms-inspire/ign-base and display them in our app, with wrap option enabled.

Expected behavior

All tiles should be displayed properly forming whole map instead of repeated fragments map2

Current behavior

There is no problem when tiles width is greater than height (for example 2048 width and 1024 height), but with the opposite configuration tiles are displayed incorrectly. map

After some debugging session I recognized that there is a problem with wrapping X coords of tiles. CRS that we are using there have wrapLng (-180, 180) so we are setting _wrapX in GridLayer.js:

this._wrapX = crs.wrapLng && !this.options.noWrap && [
            Math.floor(map.project([0, crs.wrapLng[0]], tileZoom).x / tileSize.x),
            Math.ceil(map.project([0, crs.wrapLng[1]], tileZoom).x / tileSize.y)
        ];

this._wrapY = crs.wrapLat && !this.options.noWrap && [
            Math.floor(map.project([crs.wrapLat[0], 0], tileZoom).y / tileSize.y),
            Math.ceil(map.project([crs.wrapLat[1], 0], tileZoom).y / tileSize.x)
        ];

I don't understand why it's using y value of tileSize to calculate max range of X, shouldn't it use only tileSize.x for _wrapX, and tileSize.y for _wrapY? After changing it locally to:

this._wrapX = crs.wrapLng && !this.options.noWrap && [
            Math.floor(map.project([0, crs.wrapLng[0]], tileZoom).x / tileSize.x),
            Math.ceil(map.project([0, crs.wrapLng[1]], tileZoom).x / tileSize.x)
        ];
this._wrapY = crs.wrapLat && !this.options.noWrap && [
            Math.floor(map.project([crs.wrapLat[0], 0], tileZoom).y / tileSize.y),
            Math.ceil(map.project([crs.wrapLat[1], 0], tileZoom).y / tileSize.y)
        ];

everything is working properly.

Minimal example reproducing the issue

No response

Environment