Leaflet - Customer Tile Cache Scheme Review, Munich

Question

I am interested in user-specific tiling schemes and serverless display with Leaflet. I have come across problems that I cannot solve on my own.

There are older requests in the forum for the display of user-specific tile schemes with Leaflet. I took up the example from the thread SAS Planet cached tiles for use in Leaflet map and tried to reproduce the example. I encountered the problem that tiles deeper than zoom level 19 cannot be displayed.

I used the following JS code to display the tile bundle from the cache:

    L.TileLayer.customTiles = L.TileLayer.extend({
    getTileUrl: function (tile_bundle) {
            x = tile_bundle.x + 0,
            y = tile_bundle.y + 0,
            z0 = tile_bundle.z + 1,
            x0 = Math.floor(tile_bundle.x / 1024) + 0,
            x1 = Math.floor(tile_bundle.x % 1024) + 0,
            y0 = Math.floor(tile_bundle.y / 1024),
            y1 = Math.floor(tile_bundle.y % 1024);
        const tile_view = `./gMapCache/z${z0}/${x0}/x${x}/${y0}/y${y}.jpg`;
        console.log('tile_bundle', z0,x0,x,y0,y,x1,y1, tile_view);
        return tile_view; 
        },
});
L.tileLayer.customTiles = function (tile_bundle) { return new L.TileLayer.customTiles({maxZoom: 22}).addTo(map) }; var Ausgabekarte = L.tileLayer.customTiles({}).addTo(map);

The algorithm for calculating the path to the tiles should be correct. However, the tiles from the directory from gMapCache/z19 and below are not displayed. Does anyone know a solution for this?

Whether the tile is actually present should be displayed in a new browser window with a click of the mouse:

    map.on('click', function(click) 
    {
    clickzoom = map.getZoom();
    var latlng = map.mouseEventToLatLng(click.originalEvent);
    var layerPoint = map.latLngToContainerPoint(latlng);
            x = layerPoint.x + 0,
            y = layerPoint.y + 0,
            z0 = clickzoom + 0,
            x0 = Math.floor(x / 1024) + 0,
            x1 = Math.floor(x % 1024) + 0,
            y0 = Math.floor(y / 1024),
            y1 = Math.floor(y % 1024);
    var tile_on_click = `./gMapCache/z${z0}/${x0}/x${x}/${y0}/y${y}.jpg`;
    var clickurl = ["<br><a href=\"" + tile_grid_dir + "\"></a>"];

    console.log( layerPoint, x,y,'on click: ', tile_on_click);

    alert(
        "\rCLICK.TELEMETRIC URL to Tile:\r\r" +
        "URL: " + clickurl + "\n" + 
        "\n\n" )
    });

The attached ZIP Conatiner contains an example dataset. ZIP with dataset example. The same example online: LiveView

Answer 1

No matter what I tried and where I specified maxZoom option, when custom layer was created it had maxZoom option set to 18.

The only working solution seems to be to use L.setOptions method to set maxZoom option for created layer immediately after creation and before it's added to the map.

Relevant part of the code could then look something like this:

L.TileLayer.CustomTiles = L.TileLayer.extend({
  getTileUrl: function (tile_bundle) {
    x = tile_bundle.x + 0,
    y = tile_bundle.y + 0,
    z0 = tile_bundle.z + 1,
    x0 = Math.floor(tile_bundle.x / 1024) + 0,
    x1 = Math.floor(tile_bundle.x % 1024) + 0,
    y0 = Math.floor(tile_bundle.y / 1024),
    y1 = Math.floor(tile_bundle.y % 1024);
    const tile_view = `./gMapCache/z${z0}/${x0}/x${x}/${y0}/y${y}.jpg`;
    return tile_view; 
  }
});

L.tileLayer.customTiles = function () {
  var layer = new L.TileLayer.CustomTiles();
  L.setOptions(layer, {maxZoom: 24});
  return layer;
};
var Ausgabekarte = L.tileLayer.customTiles();
Ausgabekarte.addTo(map);

Answer 2

For those interested, here is the complete code (LiveViewWorkaround). I will soon deactivate the external links contained above.

<script type="text/javascript">
var map = L.map('map',{zoomDelta: 500, zoomSnap: 1, wheelPxPerZoomLevel: 100, minZoom: 0, maxZoom: 20, maxNativeZoom: 18}).setView([48.138535154457244, 11.57369971275329],18);


// local custom gMapCache:
// https://gis.stackexchange.com/questions/341108/sas-planet-cached-tiles-for-use-in-leaflet-map
L.TileLayer.customTiles = L.TileLayer.extend({ getTileUrl: function (tile_bundle) 
    {
    // localhost Tile-Schema short:
    const kachel = `./gMapCache/z${tile_bundle.z + 1}/${Math.floor(tile_bundle.x / 1024)}/x${tile_bundle.x}/${Math.floor(tile_bundle.y / 1024)}/y${tile_bundle.y}.jpg`; 
    return kachel;
    } 
});

L.tileLayer.customTiles = function () 
    {
    var layer = new L.TileLayer.customTiles(); 
    L.setOptions(layer, {maxZoom: 24}); //workaround: L.setOptions overwrite default maxZoom
    return layer; 
    };
var Ausgabekarte = L.tileLayer.customTiles({}).addTo(map);


// Display tile grid borders with leaflet (visual debugging)
// https://gis.stackexchange.com/questions/149062/display-tile-grid-borders-with-leaflet-visual-debugging
L.GridLayer.GridDebug = L.GridLayer.extend({
    createTile: function (tile_grid) {
        const tile = document.createElement('div');
        tile.style.outline = '1px solid white';
        tile.style.fontWeight = 'normal';
        tile.style.fontSize = '9pt';
            kachelid = tile_grid.z+"/"+tile_grid.x+"/"+tile_grid.y;
            tile_grid_dir = `./gMapCache/z${tile_grid.z + 1}/${Math.floor(tile_grid.x / 1024)}/x${tile_grid.x}/${Math.floor(tile_grid.y / 1024)}/y${tile_grid.y}.jpg`;
        tile.innerHTML = ["<a>" + kachelid + "<br>" + tile_grid_dir + "</a>"];
    return tile;
    },
});
L.gridLayer.gridDebug = function (opts) {return new L.GridLayer.GridDebug(opts);};
map.addLayer(L.gridLayer.gridDebug());

</script>