Show background grid when data is missing

[wipfli]

In Google maps and I think also in Apple maps, you see a grid if the data has not been loaded yet:

Is there a way to get a similar effect in MapLibre? For example, can I style the background layer such that I see a grid?

Usually, I just have a background layer with a single color like this one:

{
      "id": "background",
      "type": "background",
      "layout": {
        "visibility": "visible"
      },
      "paint": {
        "background-color": "gray"
}

But that is a bit boring because it has no structure. So when the users zooms or pans, it is nice to have the grid to give some visual feedback to the user input.

cc @lseelenbinder or @bdon, can't remember with whom I discussed this recently but might have been one of you...

[HarelM]

I think you can create a layer that has an inline geojson source as the most "low" layer.
Paint the lines in that layer white on a gray background and you should get this effect I think.
It's a hack, but it might just work 😀
Regardless, there might be a better way to define that spec-wise.

[wipfli]

Actually it is already now possible to get this effect:

The trick is to use a background pattern image with stripes. For example this one:

And then use it as

{
    "id": "pattern-layer",
    "type": "background",
    "paint": {
        "background-pattern": "pattern"
    }
},

and

map.loadImage('pattern.png',
    function (err, image) {
        if (err) throw err;
        map.addImage('pattern', image);
    }
);

[1ec5]

The same grid pattern also appears on land wherever landcover is unavailable:

mapbox/mapbox-gl-style-spec#626 mapbox/mapbox-gl-js#4156 (from well before the fork) proposed a cover layer type that could be distinct from the background layer type, which normally represents land.

[wipfli]

Demo code https://github.com/wipfli/background-grid

Demo https://wipfli.github.io/background-grid/#map=1/0/0

[HarelM]

This is what I wrote with the geojson source, no need for add protocol...

[wipfli]

That is actually a fun idea @bdon... Just return the same tile for every z/x/y.

[wipfli]

But how would one create such a tile?

[lseelenbinder]

Since MVT uses a tile-local coordinate system, you'd only need to create a grid in tile coordinates and then serve the same tile every time.

Maybe line features every N coordinates (assuming 4096 range), on every 256 or 512 divisible coordinate? You could also simulate the major/minor gridlines pretty easily, too.

[wipfli]

Magic of addProtocol:

"sources": {
    "background-grid": {
        "type": "vector",
        "tiles": ["background-grid://{z}/{x}/{y}.pbf"]
    }
}

"layers": [
        {
            "id": "background",
            "type": "background",
            "paint": {
                "background-color": "#f2efe9"
            }
        },
        {
            "id": "background-grid",
            "type": "line",
            "source": "background-grid",
            "source-layer": "lines",
            "paint": {
                "line-width": [
                    "case",
                    ["==", ["get", "width"], "wide"],
                    2,
                    1
                ],
                "line-color": "white"
            }
        },

const tileBase64 = 'GvwKeAIKBWxpbmVzKIAgGgV3aWR0aCIGCgR3aWRlIggKBm5hcnJvdxIRGAISAgAAIgkJgECAQAoA5T8SDxgCEgIAACIHCQAACoBAABIQGAISAgAAIggJAIBACgDlPxIQGAISAgABIggJAOQBCoBAABIRGAISAgABIgkJ5AGAQAoA5T8SEBgCEgIAASIICQDIAwqAQAASERgCEgIAASIJCcgDgEAKAOU/EhAYAhICAAEiCAkAqgUKgEAAEhAYAhICAAEiCAkAjgcKgEAAEhEYAhICAAEiCQmqBYBACgDlPxIRGAISAgABIgkJjgeAQAoA5T8SEBgCEgIAASIICQDyCAqAQAASEBgCEgIAASIICQDWCgqAQAASEBgCEgIAASIICQC4DAqAQAASEBgCEgIAASIICQCcDgqAQAASERgCEgIAASIJCfIIgEAKAOU/EhEYAhICAAEiCQnWCoBACgDlPxIRGAISAgABIgkJuAyAQAoA5T8SERgCEgIAASIJCZwOgEAKAOU/EhAYAhICAAAiCAkAgBAKgEAAEhAYAhICAAEiCAkA5BEKgEAAEhAYAhICAAEiCAkAyBMKgEAAEhAYAhICAAEiCAkAqhUKgEAAEhAYAhICAAEiCAkAjhcKgEAAEhAYAhICAAEiCAkA8hgKgEAAEhAYAhICAAEiCAkA1hoKgEAAEhAYAhICAAEiCAkAuBwKgEAAEhAYAhICAAEiCAkAnB4KgEAAEhEYAhICAAAiCQmAEIBACgDlPxIRGAISAgABIgkJ5BGAQAoA5T8SERgCEgIAASIJCcgTgEAKAOU/EhEYAhICAAEiCQmqFYBACgDlPxIRGAISAgABIgkJjheAQAoA5T8SERgCEgIAASIJCfIYgEAKAOU/EhEYAhICAAEiCQnWGoBACgDlPxIRGAISAgABIgkJuByAQAoA5T8SERgCEgIAASIJCZwegEAKAOU/EhAYAhICAAAiCAkAgCAKgEAAEhAYAhICAAEiCAkA5CEKgEAAEhAYAhICAAEiCAkAyCMKgEAAEhAYAhICAAEiCAkAqiUKgEAAEhAYAhICAAEiCAkAjicKgEAAEhAYAhICAAEiCAkA8igKgEAAEhAYAhICAAEiCAkA1ioKgEAAEhAYAhICAAEiCAkAuCwKgEAAEhAYAhICAAEiCAkAnC4KgEAAEhAYAhICAAAiCAkAgDAKgEAAEhAYAhICAAEiCAkA5DEKgEAAEhAYAhICAAEiCAkAyDMKgEAAEhAYAhICAAEiCAkAqjUKgEAAEhAYAhICAAEiCAkAjjcKgEAAEhAYAhICAAEiCAkA8jgKgEAAEhAYAhICAAEiCAkA1joKgEAAEhAYAhICAAEiCAkAuDwKgEAAEhAYAhICAAEiCAkAnD4KgEAAEhEYAhICAAAiCQmAIIBACgDlPxIRGAISAgABIgkJ5CGAQAoA5T8SERgCEgIAASIJCcgjgEAKAOU/EhEYAhICAAEiCQmqJYBACgDlPxIRGAISAgABIgkJjieAQAoA5T8SERgCEgIAASIJCfIogEAKAOU/EhEYAhICAAEiCQnWKoBACgDlPxIRGAISAgABIgkJuCyAQAoA5T8SERgCEgIAASIJCZwugEAKAOU/EhEYAhICAAAiCQmAMIBACgDlPxIRGAISAgABIgkJ5DGAQAoA5T8SERgCEgIAASIJCcgzgEAKAOU/EhEYAhICAAEiCQmqNYBACgDlPxIRGAISAgABIgkJjjeAQAoA5T8SERgCEgIAASIJCfI4gEAKAOU/EhEYAhICAAEiCQnWOoBACgDlPxIRGAISAgABIgkJuDyAQAoA5T8SERgCEgIAASIJCZw+gEAKAOU/EhAYAhICAAAiCAkAgEAKgEAA';

maplibregl.addProtocol('background-grid', (params, callback) => {
    const tileArrayBuffer = Uint8Array.from(atob(tileBase64), c => c.charCodeAt(0));
    callback(null, tileArrayBuffer, null, null);
    return { cancel: () => { } };
});

Result is at is at the demo...