Unable to remove transitions from style

[orangemug]

This means we need to wait for 'a while' until the transitions complete. This isn't very stable because the 1000ms is just a guess and could be incorrect for the style/renderer. See lines below

https://github.com/orangemug/mapbox-gl-to-blob/blob/9a138181ccd1747c5296ca67976f65b4ee43b587/index.js#L181-L191

https://github.com/orangemug/mapbox-gl-to-blob/blob/9a138181ccd1747c5296ca67976f65b4ee43b587/index.js#L75-L93

[pathmapper]

@orangemug maybe trying one of the following options?

Option 1:
https://jsbin.com/veyiquhofu/1/edit?html,output
which is from here
mapbox/mapbox-gl-js#6076 (comment)

Option 2:
mapbox/mapbox-gl-js#4222 (comment)

More context in the linked issues.

[pathmapper]

I've tried the options above but wasn't successful. Using option 2 I wonder why the following isn't working:

    map.on('render', onMapLoad);

        function onMapLoad() {
          if (!map.areTilesLoaded() || !map.isStyleLoaded() || !map.loaded()) {
            return
          }

          map.getCanvas().toBlob(function(blob) {
            cleanUp();
            resolve(blob);
          }, mimeType, qualityArgument);

          map.off('render', onMapLoad);
        }

Looking for a solution I came across the following nice project
https://github.com/Eddie-Larsson/mapbox-print-pdf
which is having the same issue:
Eddie-Larsson/mapbox-print-pdf#1
The way it is currently handled there:
https://github.com/Eddie-Larsson/mapbox-print-pdf/blob/master/js/map-utils.js#L47-L66

[orangemug]

@pathmapper thanks for looking into this. So are we basically thinking that the delay (setTimeout) is the best approach until it gets fixed upstream (mapbox-gl-js) ?

FYI, a (partially) working export UI, in Maputnik 😁

[pathmapper]

@orangemug Turns out that what we are trying to remove is not a transition, instead it's a label fade-in.

There is a fadeDuration option which defaults to 300 ms and could be set to 0:
https://github.com/mapbox/mapbox-gl-js/pull/6702/files

Thanks for the UI preview!
It would be nice to have some kind of box/rectangle which shows on the map depending on the export settings which area will be exported.

[orangemug]

Nice spot @pathmapper. So I tested with fadeDuration: 0 (37c6958) and that got us most of the way there, we no longer had any semi transparent labels on export. However the export still did include randomly missing labels, urgh!

So I added a hack 7df2314 which is described here

https://github.com/orangemug/mapbox-gl-to-blob/blob/7df231486bd75cc2eea6365690cbb4b069ea396a/index.js#L200-L205

Although this is a massive hack, I believe this should be relatively stable unless the CPU is busy for 1 second between 'render' events being fired, which seems pretty unlikely in all but the most extreme of cases.

Give it a try and let me know what you think.

[pathmapper]

Thanks @orangemug, worked for me.

Yes, I also think that currently the only way to be sure the map is rendered completely is to wait until there are no render events fired anymore.

I've tested also on a pretty old (~ 10 years) laptop and had no issues, so 1 second debounce was enough in this case.

Question: It is currently 1 second wait after the last render event, right? So if there is another render event before the wait milliseconds have elapsed, the wait period starts again?

[orangemug]

@pathmapper thanks for testing

Question: It is currently 1 second wait after the last render event, right? So if there is another render event before the wait milliseconds have elapsed, the wait period starts again?

Correct, my assumption was that even on a really slow machine a 1 second delay between events would be pretty drastic, however I'm unsure of the total work to complete. I'm imagining a really complex map with 100,000 of renderer items would get lots of render events.

Note: This is mainly guess work, I need to dive into the mapbox-gl-js codebase to confirm all that. But I definitely haven't got the time for that right now

[pathmapper]

This issue should be resolved with #3.

@orangemug can you close here? I don't have the rights.