Generating an image from the map canvas results in blank images. about maplibre-gl-js HOT 3 CLOSED

I think using resize event isn't a good idea.
Try "idle" instead. For me this works:

function saveImage() {
    map.setPixelRatio(300 / 48);

    map.once('idle', () => {
        const link = document.createElement('a');
        link.href = map.getCanvas().toDataURL('image/png');
        link.download = 'map.png';
        document.body.appendChild(link);
        link.click();
    });
}

from maplibre-gl-js.

Thanks for the response!

I have tried any number of combos with this and had the same problem with all of them.

But you're quite right - in the jsbin the "idle" event is indeed working ok.

I have tested the 'idle' listener in my own project again and it's still producing blank images. My theory here is similar to the difference between having the developer tools open vs not. The timing is just slightly different for the idle handler in the pastebin vs in my project which of course is drawing a lot more on the map than just this simple example.

from maplibre-gl-js.

You need to use preserveDrawingBuffer.
The link to jsbin isn't working.
Converting to a discussion.

from maplibre-gl-js.