Place tiles in Leaflet map

Question

I use leafletjs to make a interactive map. I have a fixed list of URLs to use and I can not change the URLs. I want to make a map with those tiles always in the same place and in the place I want them to be.

Tile0 is in (0, 0)

Tile1 is in (0, 1) and so on.

How do I decide where each tile goes?

var urls = [url0, url1, ...url15]; var i=0;
L.TileLayer.CustomUrlLayer = L.TileLayer.extend({
    getTileUrl: function(coords) {
        i++;
        return urls[i%16];
    }
});

L.tileLayer.myLayer = function(templateUrl, options) {
    return new L.TileLayer.MyLayer(templateUrl, options);
}

var map = L.map('map').setView([0, 0], 18);
L.tileLayer.myLayer('', {
    attribution: 'My Map',
    maxZoom: 18,
    noWrap: true,
    tileSize: 256,
}).addTo(map);

This snippet show my current leafletjs map.

The problem is tiles are placed wherever and their placement depends on the screen size. It changes if my Google Chrome window is smaller and so on. The correct images are loaded but not in the correct position. With my screen size the placement is:

Tile0 Tile1 Tile2 Tile3 Tile4 Tile5  Tile6  Tile7
Tile8  Tile9  Tile10 Tile11 Tile12 Tile13 Tile14 Tile15

they change when the screen resizes.

what I want:

Tile0  Tile1  Tile2  Tile3

Tile4  Tile5  Tile6  Tile7

Tile8  Tile9  Tile10 Tile11

Tile12 Tile13 Tile14 Tile15

... always regardless of the screen. How?

Answer 1

Reading the Leaflet tutorial on extending L.TileLayers will teach you how to hook custom functions to get the tile URL from the tile coordinates, so please do so (if you haven't already).

For your tiling scheme, the tile ID is the sum of the tile row times the number of tiles per row, plus the tile column. So:

L.TileLayer.CustomUrlLayer = L.TileLayer.extend({
    getTileUrl: function(coords) {
        var tileId = (coords.y * 4) + coords.x
        return `https://example.com/Tile${tileId}.png`;
    }
});