Display tile grid borders with leaflet (visual debugging)

Question

I'd like to have the tile grid borders displayed on a leaflet WMS Layer in order to see which areas are requested as separate maps. On top of that it should be possible to overlay a border to the tiles actually received from the server. That would allow checking server behavior at or near tile borders.

The only solution I've found so far is to enable server side watermarking on the WMS, which is influenced by tile generation parameters (e.g. meta tiling with GeoWebCache) and can thus be also used for comparison with the other border grids.

Is this feasible (even with a client other than leaflet) or are there any other workarounds to get the same functionality?

Answer 1

Another option is to create a plugin like so -

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 = '14pt';
    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());

Result -

Answer 2

Leaflet tiles have the leaflet-tile class You can use css to make the border visible

.leaflet-tile { border: solid black 5px; }

This would create black borders for each tile.

It worked for this example https://www.mapbox.com/mapbox.js/example/v1.0.0/wms/ by editing in the developer console of the browser.