Images don't work on Firefox—backport needed about maplibre-gl-js HOT 4 CLOSED

I was testing the PR. I faced some problem trying to add geojson source after an image source. Would be nice if someone else can confirm that the problem can be reproduced.

geojson
  .then(json => {
      this.addSource("ref_img", {
          "type": "image",
          "url": "/static/test.png",
          "coordinates": bbox
      });
      this.addSource("ref_points", {
          "type": "geojson",
          "data": json,
      })
      this.addLayer({
          "id": "ref_img",
          "type": "raster",
          "source": "ref_img",
      });
      this.addLayer({
          "id": "ref_points",
          "type": "circle",
          "source": "ref_points",
          "paint": { "circle-radius": ["interpolate", ["linear"], ["zoom"], 8, 1, 22, 20] },
      });
  })

version 1.13.0-rc.3 renders the points correctly but of-course does not work on Firefox. With the PR, I can only see the image. My guess is that the points layer is being added first before the request animation frame and then the image layer on top of that so I do not see the points layer anymore.

In summary, I think, the request animation frame can lead to wrong layer ordering. Please correct me if I am wrong.

Thank You

from maplibre-gl-js.

Can this PR be merged? The change is not a big one to sit over a month on. Thank You @lights0123 for bringing this up.

from maplibre-gl-js.

The requestAnimationFrame callback is only responsible for releasing the image to avoid memory leaks, so it can't have any impact on the layer ordering. Tested your sample under a current version of firefox and it works for me.

from maplibre-gl-js.

Fixed in #87. Thanks @lights0123!

from maplibre-gl-js.