rendercomplete is unreliable

[AidasK]

I am trying to load a map and convert it to blob as soon as possible, but result is sometimes a blank transparent image and sometimes it is ok. I think it depends on network latency.

This does not happen with raster tilesXYZ.

I have tried these methods:

• no delay, works great for raster tiles, but not for olms

        olms.apply(map, options.style);
        map.renderSync();
        map.once('rendercomplete', function(event) {
                var canvas = event.context.canvas;
                canvas.toBlob(function(blob) {
                    ...
                });
       });

• More reliable for olms, with 1 second delay:

        olms.apply(map, options.style);
        setTimeout(() => {
            map.renderSync();
            map.once('rendercomplete', function(event) {
                var canvas = event.context.canvas;
                canvas.toBlob(function(blob) {
                    ...
                });
            });
        }, 1000);

• Not really reliable, with 100ms delay:

        olms.apply(map, options.style);
        setTimeout(() => {
            map.renderSync();
            map.once('rendercomplete', function(event) {
                var canvas = event.context.canvas;
                canvas.toBlob(function(blob) {
                    ...
                });
            });
        }, 100);

[AidasK]

Tried a new approach which prevents of getting a completely empty image:

        load = olms(map, options.style);
        map.renderSync();
        load.then(() => {
            map.once('rendercomplete', function(event) {
                event.context.canvas.toBlob(function(blob) {
                    ...
                });
            });
        });

Though returned image sometimes is still missing a few tiles

[ahocevar]

Which version of the ol package are you using? Can you please try with the latest ol@beta?

[ahocevar]

Oh wait, I see what the problem is. Please use the default export of ol-mapbox-style and register your rendercomplete listener in the resolve callback:

import olms from 'ol-mapbox-style';
olms('map', options.style).then(map => {
  map.once('rendercomplete', e => {
    // create blob here
  });
});

[foo4foo]

@ahocevar I confirmed that this problem still exists on iOS on ol v7.4.0 and ol-mapbox-style v11.0.1. The map is sometimes just blank showing the color of the background. Map layer isn't rendered at all.

[ahocevar]

@foo4foo Did you add the rendercomplete listener after the promise that apply() returns was resolved?