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?
GetTileURL
function takes z, x, y (slippy tile coordinates), not a single value. Consider using print (or console.log) to debug