I have a problem that I am not able to describe so I have taken a video of the issue. In the video I am clicking forward one 'frame' at a time and you can see the layer loads then it seems like the fill is applied/changed(?) after a delay. I have tried two different packages and it occurs with both of them. So I'm assuming the problem is my code as I am no expert! It happens on the emulator and real device.
https://youtube.com/shorts/1jT5OKuSISQ
The code below is using the mapbox_gl package, but this issue also occurs with the official mapbox_maps_flutter package. I have raised an issue in the mapbox_gl GitHub, but have had no reply.
void _addRadarLayer (String id) {
this.controller.addSource(
'composite$id',
VectorSourceProperties(
url: radarCapability.data.rain[frame].url,
minzoom: 3,
maxzoom: 10,
),
);
this.controller.addFillLayer(
'composite$id',
'radarLayer$id',
const FillLayerProperties(
fillColor:
[
Expressions.interpolate,
['linear'],
['get', 'value'],
0,
'hsla(240, 100, 98, 0)',
0.4,
'#f5f5ff',
1.6,
'#b4b4ff',
3.1,
'#7878ff',
4.7,
'#1414ff',
7,
'#00d8c3',
10.5,
'#009690',
15.8,
'#006666',
23.7,
'#ffff00',
35.5,
'#ffc800',
53.4,
'#ff9600',
80.1,
'#ff6400',
120.3,
'#ff0000',
180.5,
'#c80000',
271.1,
'#780000',
406.9,
'#280000'
],
),
sourceLayer: id,
minzoom: 3,
maxzoom: 10,
);
}
In the video, clicking the button removes the layer & source, then re-adds the source and layer based on the incremented 'frame' variable. Happy to post more code if needed.
Hopefully someone can assist.
