mgl-images are not preserved when a new style is loaded

[bdirito]

For something like:

<mgl-map [style]='this.style' (load)='this.map = $event'>
   <mgl-image *ngFor='let imageName of imageData.keys()'
    [id]='imageName'
    [data]='imageData.get(imageName)'
   ></mgl-image>
  <mgl-geojson-source id='events'>
     <mgl-feature *ngFor='let marker of this.markers'
       [geometry]='marker.geometry'
       [properties]='marker.properties'
     ></mgl-feature>
  </mgl-geojson-source>
  <mgl-layer
    id='eventLayer'
    type='symbol'
    source='events'
    [layout]="this.markersLayerLayout"
  ></mgl-layer>
</mgl-map>

When you swap map styles the symbol layer will not redisplay. Digging into the mapbox gl layer we find that the glmap.listImages() no longer has any of the image names.

https://www.mapbox.com/mapbox-gl-js/api#map#addimage states that glmap.addImage adds it to a sprite. Im pretty sure the spite is associated with the style in mapbox gl, thus since we have a new style we have a new sprite and none of the images are there.

Meanwhile our remain static meaning they will not be attempted to load into the new style. Attempting to remove and readd also fails as removing would invoke

  ngOnDestroy() {
    if (this.imageAdded) {
      this.MapService.removeImage(this.id);
    }
  }

however the image no longer exists on glmap as checked via glmap.hasImage()

Further complicating things is that via #35 the images must be loaded before the layer.

[behuda]

When style is changed, user defined layers and image source are removed.
In in my project what i do is I listen to event style.loading event from mapbox-gl and re apply all the layers and sources.
I can try with my reapply layers and image source if u can provide a stackblitz, maybe that can fit ur needs