How to visually differentiate empty tiles?

[hodossy]

I serve my map tiles of relatively small areas with maptiler/tileserver-gl and the tiles, which are not generated, are marked as empty with the 204 response. I would like to add a watermark or any other visual indication that there is an empty/missing tile there. How can I achieve it? Is there a js api I can use?

[HarelM]

Why not rig it in nginx or something to return a special tile (the same one with the watermark) when there's a 204 response from the tile server?

[hodossy]

That crossed my mind as well, but I don't know how to generate such a tile. Do you have a link for an example? Thanks!

[HarelM]

If it's raster, it's easy, for MVT, you'll need to think about styling as well.
I don't have an example unfortunately.
You can also place the watermark behind the canvas I think, not sure though...

[hodossy]

it's MVT, creating an image would not be a problem. I cannot place anything behind the canvas, as the background is drawn in case of 204 (if I get it correctly), so unless I set a transparent background, nothing is visible behind the canvas.

[hodossy]

In the end I followed a slightly different approach. I just leave it here for future reference, maybe someone finds it useful.

First step is to have a tile, with the necessary information, that can be served instead of 204. One thing, that was not immediately obvious to me, is that the tile data does not really contains any location information. It is vectorised, and all lat-lon information is converted to x-y coordinates, in the tile coordinate system! That means, that I can use the same binary data in place of any missing tile. That's good news! Now I needed to create a tile. I chose to build the 0/0/0 tile, and create a geojson that contains 4 point geometries with a label attribute:

[
  {"type":"Feature","geometry":{"type":"Point","coordinates":[-90,-65.5]},"properties":{"label":"No data"}},
  {"type":"Feature","geometry":{"type":"Point","coordinates":[-90,65.5]},"properties":{"label":"No data"}},
  {"type":"Feature","geometry":{"type":"Point","coordinates":[90,-65.5]},"properties":{"label":"No data"}},
  {"type":"Feature","geometry":{"type":"Point","coordinates":[90,65.5]},"properties":{"label":"No data"}},
]

Note: This places four labels in the middle of each quadrant (origin is in the middle). There is a projection here, which explains why I used 65.5 instead of 45. This can be avoided if you choose a tile with higher zoom level, close to [0,0].

Now I just needed to feed this json to Tippecanoe, and my tile was built:

tippecanoe -e missing_tile -l missing-tile -n "Missing tile placeholder layer" -z0 -Z0 --no-tile-compression no_data_tile.geojson

Now I have the binary, which I chose to serve not from Nginx, but from the JS code itself, following the documentation of addProtocol. I just check the response code, and if it is 204, I just serve the binary stored in an ArrayBuffer:

// this is the actual binary I use now
const MISSING_TILE = new Uint8Array([
  26, 97, 120, 2, 10, 12, 109, 105, 115, 115, 105, 110, 103, 45, 116, 105, 108, 101, 40, 128, 32,
  26, 5, 108, 97, 98, 101, 108, 34, 9, 10, 7, 78, 111, 32, 100, 97, 116, 97, 18, 13, 24, 1, 18, 2,
  0, 0, 34, 5, 9, 128, 16, 184, 16, 18, 13, 24, 1, 18, 2, 0, 0, 34, 5, 9, 128, 16, 198, 47, 18, 13,
  24, 1, 18, 2, 0, 0, 34, 5, 9, 128, 48, 184, 16, 18, 13, 24, 1, 18, 2, 0, 0, 34, 5, 9, 128, 48,
  198, 47,
]);

// and later in the code somewhere:

// we need to create a copy of the buffer, otherwise
// there will be ArrayBuffer detached errors for all
// tiles after the first requested
callback(null, MISSING_TILE.buffer.slice(0), null, null)

Then you need to include the layer (specified with the -l parameter of tippecanoe, for me its missing-tile) in the style spec:

{
  layers: [
    {
      id: 'missing_tile',
      type: 'symbol',
      paint: {
        'text-color': 'rgba(0, 0, 0, 0.2)',
      },
      layout: {
        'text-font': ['Open Sans Regular'],
        'text-size': 32,
        'text-field': '{label}',
        'text-letter-spacing': 0.1,
        'text-justify': 'center',
        'text-rotation-alignment': 'map',
      },
      source: 'openmaptiles',
      'source-layer': 'missing-tile',
    },
  ],
  ....
}