Why leaflet map tiles ordering wrong

Question

I'm using leaflet to render a map with a popular visualization coordinate system, but the map tile is wrong ordering. How can I solve this problem?

var map = L.map('map', {
    // crs: crs,
    continuousWorld: true,
    worldCopyJump: false,
    zoomControl: true
});

new L.TileLayer('https://www.gtrack.co.id/TileMapService/TileMap.ashx?cachetype=0&tilex={x}&tiley={y}&level={z}', {
    maxZoom: 14,
    minZoom: 0,
    continuousWorld: true,
    tileSize:256,
    // tms: true
}).addTo(map);

map.setView([-0.497125, 117.108078], 5);

Answer 1

The problem is that the Z index for the tile server is not zero-based like TileLayer([x,y], z) expects to receive. You have to pass an argument called zoomOffset with value 1 to fix this.

var map = L.map('map', {
    // crs: crs,
    continuousWorld: true,
    worldCopyJump: false,
    zoomControl: true
});

new L.TileLayer('https://www.gtrack.co.id/TileMapService/TileMap.ashx?cachetype=0&tilex={x}&tiley={y}&level={z}', {
    maxZoom: 14,
    minZoom: 0,
    continuousWorld: true,
    tileSize:256,
    crs: L.CRS.Simple,
    zoomOffset: 1 // <------------ the param to add
}).addTo(map);

map.setView([-0.497125, 117.108078], 5);

Then you get:

Answer 2

I was having issues with invalid, empty and misplaced placed tiles as well.

As I do not know the service you are requesting the tiles from, this solution may not apply to you, but this might help any passerby using OpenStreetMaps:

In the URL, x, y and z must NOT be in alphabetical order like so:

const tileURL = "https://{s}.tile.osm.org/{x}/{y}/{z}.png";

but must instead be in this order:

const tileURL = "https://{s}.tile.osm.org/{z}/{x}/{y}.png";

Otherwise, invalid tiles will be requested, resulting in an unusable, faulty map.