CODEWITHSUNDEEP
leaflet
ecv
ecv

Reputation: 38

How to set up leaflet for a non-geographical tile-grid with inverted Y coordinate?

I have an online-game that is generating map-tiles on our gameserver. I've had some success in actually generating an online map with those, something is always not quite right though.

The map tiles are stored in a tile/{z}/{x}/{y} pattern, sadly, not starting at upper left or lower left but in the center, so x and y can be negative and positive values.

I've been trying several approaches, each having major drawbacks. The only success I've had was with leaflet 0.7.7, there it works right out of the box with minimal code.

This is how it should look (leaflet 0.7.7) https://panel.chrani.net/map.php

Same code, current leaflet, garbled y axis and broken zoom (leaflet 1.2) https://panel.chrani.net/map2.php

altered code, current leaflet, good lower half, broken zoom (leaflet 1.2) https://panel.chrani.net/map5.php

I can't make heads or tails of this and pretty much all of the available help refers to geo-stuff and projections geo-services and whatnot.

I have pretty much a grid of pictures starting from -80,-80 going to 80, 80 on max zoom level. no transformations, no translations. How can i show that in leflet?

I would appreciate any pointers on where to look.

Upvotes: 0

Views: 1566

Answers (1)

IvanSanchez
IvanSanchez

Reputation: 19069

The map tiles are stored in a tile/{z}/{x}/{y} pattern

No, you're wrong here. Your tilelayer has the tms option set to true, which means the pattern is tile/{z}/{x}/{-y} instead. The behaviour of TMS tilelayers was changed in march 2016, see https://github.com/Leaflet/Leaflet/issues/4338 .

The issue here is that TMS assumes that there is a maximum value for the y tile coordinate, which is not possible to have with an infinite CRS.

I recommend you re-do your tiles as to invert the y coordinate. Otherwise, it's possible to hack around the getTileUrl method of your tilelayer to invert the y coordinate.

var tiles = L.tileLayer('https://panel.chrani.net/tiles/{z}/{x}/{y}.png', {});

tiles.getTileUrl = function(coords) {
  coords.y = -coords.y;
  return L.TileLayer.prototype.getTileUrl.bind(tiles)(coords);
}

var map = new L.Map('leaflet', {
  crs: L.CRS.Simple,
  layers: [tiles],
  center: [0, 0],
  zoom: 0
});

Calling L.TileLayer.prototype.getTileUrl.bind(...)(...) is hackish, but the whole hack works.

Upvotes: 2

Related Questions