4

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?

  • Is this site any use in helping you identify where tile borders are? By default Leaflet uses the Google tile naming convention maptiler.org/google-maps-coordinates-tile-bounds-projection – BStone May 29 '15 at 12:06
  • Not really sure about it since I have a latlon projection and the upper/lower borders are at 90/-90 degrees and not ~= 85 as in Gmaps. I'll try to follow the same Quadtree principle on it and draw it myself to see if it matches. – a1an Jun 8 '15 at 14:52
3

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.

4

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 -

map

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.