Support For Multi-Image Sources + Raster Layers

Motivation

Mapbox currently supports an image source + raster layer, which can display a single image over a map. For example: https://docs.mapbox.com/mapbox-gl-js/example/image-on-a-map/

If you were to build a real world application with the above though, you would need a separate image source & raster layer for every single image, which quickly becomes unmanageable (and presumably, bad for performance).

Some use cases:

Adding building interior raster images
Adding weather pattern overlays
Adding custom captured drone satellite imagery

Often it isn't possible or performant to create a full tile raster layer for the above use cases, and there would be many "holes" in the map (e.g. for building interiors)

Design Alternatives

Adding an image source + raster layer for every single image (messy + likely impacts performance)
Building a complete raster tile layer by combining all images into one (non-performant in case layer has many holes/gaps + requires overhead to regenerate all tiles every time a new image is added)

Design

Not knowing anything about Mapbox internals, I can't really suggest an implementation, but from an API consumer perspective, something like the below would be ideal:

map.addSource('radar', {
  'type': 'image',
  'images': [{
    'url': 'https://docs.mapbox.com/mapbox-gl-js/assets/radar.gif',
    'coordinates': [
      [-80.425, 46.437],
      [-71.516, 46.437],
      [-71.516, 37.936],
      [-80.425, 37.936]
    ]
  }]
});

And being able to display the radar source in a single raster layer like below:

map.addLayer({
  id: 'radar-layer',
  'type': 'raster',
  'source': 'radar',
  'paint': {
    'raster-fade-duration': 0
  }
});

mapbox / mapbox-gl-js