Uso leafletjs para hacer un mapa interactivo. Tengo una lista fija de URL para usar y no puedo cambiar las URL. Quiero hacer un mapa con esos mosaicos siempre en el mismo lugar y en el lugar que quiero que estén.

Tile0 está en (0, 0)

Tile1 está en (0, 1) y así sucesivamente. ¿Cómo decido dónde va cada ficha?

 var i = 0; L.TileLayer.CustomUrlLayer = L.TileLayer.extend({ getTileUrl: function(coords) { var x = i; var y = i; i = i + 1; return `https://example.com/${y}-${x}.png`; } }); 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);

Este fragmento muestra mi mapa actual de leafletjs. Los mosaicos se colocan donde sea y depende del tamaño de la pantalla. Cambia si mi ventana de Google Chrome es más pequeña y así sucesivamente. Se cargan las imágenes correctas.

Baldosa0 Baldosa1 Baldosa2 Baldosa3

Azulejo4 Azulejo5 Azulejo6 Azulejo7

... siempre independientemente de la pantalla. ¿Cómo?