Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tall custom sized tiles are not wrapped correctly #9326

Open
4 tasks done
mmlodzikhexagon opened this issue Apr 18, 2024 · 0 comments
Open
4 tasks done

Tall custom sized tiles are not wrapped correctly #9326

mmlodzikhexagon opened this issue Apr 18, 2024 · 0 comments
Labels
bug needs triage Triage pending

Comments

@mmlodzikhexagon
Copy link

Checklist

  • I've looked at the documentation to make sure the behavior isn't documented and expected.
  • I'm sure this is an issue with Leaflet, not with my app or other dependencies (Angular, Cordova, React, etc.).
  • I've searched through the current issues to make sure this hasn't been reported yet.
  • I agree to follow the Code of Conduct that this project adheres to.

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

  • Leaflet version: 1.9.4
  • Browser (with version): Chrome 123.0.6312.123, Firefox 124.0.2 (64 bits), Edge 123.0.2420.97
  • OS/Platform (with version): Windows 11 laptop
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug needs triage Triage pending
Projects
None yet
Development

No branches or pull requests

1 participant