[Feat] Ability to change tiles of raster <Source>

Target Use Case

I have a <Source> of type raster in which I would like to change the tiles dynamically.

My use case is that my source is a WMS satellite pictures API of an area in which I can select the date (when it's not too cloudy), or the visualisation type (natural colours, temperature, reflection…).

Updating tiles of raster source is unsupported as it throws an exception Unable to update <Source> prop: tiles in source.ts.

I tried to create many sources at first and switch them using the source attribute of <Layer> but it doesn't seem to be updated.

Proposal

Source of type raster could support updating their tiles.

The raster source look a bit undocumented in MapboxGLJS, the documentation has an example but not much more.

My workaround is to add a key property to my source and layer that change when the tiles property change, so the source and layer gets recreated instead of being updated.

I don't think you can reliably change the tiles url of a source in mapbox. Even if you do, I don't think you can get the behavior you are probably looking for where the old tiles are replaced incrementally with the new tiles. Best bet is to recreate the source like you are doing, that way the map will automatically clear the old tiles and repaint. I'm guessing this would be a breaking change because people might be relying on the current behavior.

react-map-gl does not implement any source on its own. This can only be supported if Mapbox GL JS exposes a public method to update the source, similar to VectorTileSource.setTiles.

I suggest you open a feature request in the Mapbox GL JS repo if the current solution does not meet your needs.

I created a feature request in the mapbox gl js repository.

any other way we can add raster image ?

I want to added raster image with their own 4 coordinates

something like this https://github.com/nitaliano/react-native-mapbox-gl/blob/master/docs/RasterSource.md

Yes https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#image

My workaround is to add a key property to my source and layer that change when the tiles property change, so the source and layer gets recreated instead of being updated.

@fungiboletus I can't seem to make this work-around work...can you point me to an example? I am getting the following error: Error: Source "radarsource" cannot be removed while layer "jsx-layer-1" is using it.

@fungiboletus we have found a way to change tiles dynamically but the transitions are too slow.

PR merged to main in mapbox-gl-js on Feb 2, 2023 to add setTiles and setURL on a raster layer source - see here So one can now do, for example in a useEffect method which watches/subscribes to the TMS source URL property:

  useEffect(() => {
    mapRef.current?.getSource("source-id")?.setTiles([sourceTmsUrl]);
  }, [sourceTmsUrl]);

What would be really interesting now is a way to avoid tile popping on layer tiles change. When one does use setTiles with a single TMS url, the previous rasterLayer tiles of the source are dumped - resulting in the map background style being displayed for a short amount of time until the new tiles are loaded and start populating the map. This makes for a harsh transition especially for periodic tilesets. But this is probably more a request for mapbox-gl-js

https://github.com/visgl/react-map-gl/assets/16822841/f38999eb-7084-4afb-aaa3-5e0ff388a81d