weird issue with mgl-image / mgl-layer (layer-icons disappear)

[Tobbyte]

Hey @Wykks using your awesome library again (working on a coffee for you) but came across a strange bug / behaviour.
I use one mgl-geojson-sourceand multiple mgl-layer that filter part of the data (f.e. [filter]="['all', ['!has', 'point_count'], ['==', 'Kategorie', 'Wanderung']]") and use an mgl-image as icon-image.

So far, so working good. But: every 10th load er so, only some of the layers render initially and only reappear from that on on some zoom-levels (oh and none of them are clickable, if that happens).

You can take a look at the app here: https://tdsn-2018.firebaseapp.com/ (just reload multiple times and suddenly only some of the markers will appear).

Any suggestion / idea / hint would be awesome.

[Wykks]

Indeed I can reproduce the issue.
It looks like a bug in mapbox-gl itself, but it also looks like it could be avoided.
Sometimes layer doesn't load in the same order, you should use the before input of mgl-layer to ensure the layers are in a defined order.

Maybe wait the loaded event of mgl-image before showing the layers.

I wonder if this commit can help too (2c96ac9), as it ensure a correct order of mapbox-gl api calls. I'll publish this commit in a @next version if the above suggestions are not enough

[Tobbyte]

The loaded event of the images already was in place. But you pointed me in the right direction:

• the not-clickability of the layers indeed came from the "click-layer" being loaded in the wrong order - before to the rescue, perfect.
• the icons not appearing was harder: initially I fed a replaySubject with my data in the constructor() and subscribed the map to it via async-pipe [data]="data$ | async". What did the trick was waiting for all layer images to be loaded and then fire this.dataSource.next(myData). No idea why this works, but after my totally professional testing of reloading the page 50+ times without missing layers, I'm positiv it does the job :D Thanks again!

[Wykks]

Cool :)
I think it's better to use *ngIf instead of sending data only when images are loaded; but it's a minor thing.