2

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?

1
  • If the data isn't private, it might be helpful to post the location. I think the GetTileURL function takes z, x, y (slippy tile coordinates), not a single value. Consider using print (or console.log) to debug Jun 13, 2022 at 14:52

1 Answer 1

3

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`;
    }
});
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.