Display tile grid borders with leaflet (visual debugging)
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 -
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.