Inverted Y Axis Of Custom Tile Images Names

There is a know problem of Leaflet that when you use a custom tile provider, not with real earth images, set crs: L.CRS.Simple, Leaflet queries for images where Y coordinate is inv

Solution 1:

As noted in the Leaflet tutorial for WMS/TMS, the canonical way of inverting the Y coordinate for tile coordinates is using {-y} instead of {y} in the tile URL template. e.g.:

var layer = L.tileLayer('http://base_url/tms/1.0.0/tileset/{z}/{x}/{-y}.png');

Note, however, that (as of Leaflet 1.3.1) that only works for maps with a non-infinite coordinate system.

In your case, you might want to get around this by creating your own subclass of L.TileLayer. There is a complete guide on the Leaflet tutorial about extending layers, but the TL;DR version for a tilelayer that shifts its tile coordinates is:

L.TileLayer.CustomCoords = L.TileLayer.extend({
    getTileUrl: function(tilecoords) {
        tilecoords.x = tilecoords.x + 4;
        tilecoords.y = tilecoords.y - 8;
        tilecoords.z = tilecoords.z + 1;
        return L.TileLayer.prototype.getTileUrl.call(this, tilecoords);
    }
});

var layer = new L.TileLayer.CustomCoords(....);

And the specific case for just inverting the Y coordinate is:

L.TileLayer.InvertedY = L.TileLayer.extend({
    getTileUrl: function(tilecoords) {
        tilecoords.y = -tilecoords.y;
        return L.TileLayer.prototype.getTileUrl.call(this, tilecoords);
    }
});

var layer = new L.TileLayer.InvertedY(....);