Useful Information

The Hitchhacker’s Guide To Tiled Maps
Slippy map tilenames

QGIS

QTiles

Onder de motorkap

De url van een tilelayer is meestal zoiets : http://bla.bla.bla/{z}/{x}/{y}.png. Om de tiles van zo'n layer op het kaartje zichtbaar te maken kun je het volgende aan je css toevoegen, hierdoor wordt een box om de tiles getekend.

.leaflet-tile {
  border: solid red 1px;
}

Hierbij zie je echter niet de tile coordinaten (x,y) en het zoomlevel (z). Om die te tonen kun je de volgende, debug, layer aan je kaart toevoegen :

L.GridLayer.GridDebug = L.GridLayer.extend({
  createTile: function (coords) {
    const tile = document.createElement('div');
    tile.style.outline = '1px solid green';
    tile.style.fontWeight = 'bold';
    tile.style.fontSize = '12pt';
    tile.style.color ='green';
    tile.innerHTML = [coords.z, coords.x, coords.y].join('/');
    return tile;
  },
});

L.gridLayer.gridDebug = function (opts) {
  return new L.GridLayer.GridDebug(opts);
};

map.addLayer(L.gridLayer.gridDebug());

De trick hierbij is dat als de debuglayer een tile wil ophalen er geen image wordt teruggeven maar inplaats daarvan een div element. (many thanks to Brian Burns)