Mapbox GL JS : Refreshing JSON polygons

Question

I am developing a web app using Mapbox GL JS to display weather information. I wrote a JS function to refresh radar imagery depending on if a text file's timestamp matches the current one stored by the app. When the function is called, it removes the image source and adds another one with the same ID and thus refreshes the image. This works well.

However, I tried doing the same thing with a JSON source, and when the function is called to refresh - it will remove the polygons from the map but does not add them back. Is there another way I should be doing this?

The function is found in this JS file. (There is not much to it as of now.)

Function refreshWARNINGS_A() is where the issue is (pasted below). There are 2 JSON polygons for each warning (Flood, Flash Flood, Severe Thunderstorm, and Tornado Warning) because there is a colorized filled layer, and a duplicate layer to make a solid border. (There are different ID's so nothing should interfere with one another).

function refreshWARNINGS_A()
{



topleftmapbox.removeLayer('FlashFloodWarningOuter');
topleftmapbox.removeLayer('FlashFloodWarningInner');    

topleftmapbox.removeLayer('FloodWarningOuter');
topleftmapbox.removeLayer('FloodWarningInner');

topleftmapbox.removeLayer('SevereThunderstormWarningOuter');
topleftmapbox.removeLayer('SevereThunderstormWarningInner');

topleftmapbox.removeLayer('TornadoWarningOuter');
topleftmapbox.removeLayer('TornadoWarningInner');

// (Below should re-add the JSON layers, but it does nothing.)
//////////////////////////////////Add Flash Flood Warning 
topleftmapbox.addLayer({
'id': 'FlashFloodWarningOuter',
'type': 'line',
'source': {
'type': 'geojson',
'data': 'warnings/FlashFloodWarning.json'
},
'paint': {
'line-color': 'rgba(51,118, 34, 1)',
'line-width': 2
}
});  




topleftmapbox.addLayer({
'id': 'FlashFloodWarningInner',
'type': 'fill',
'source': {
'type': 'geojson',
'data': 'warnings/FlashFloodWarning.json'
},
'paint': {
'fill-color': 'rgba(72, 187 ,45, 0.2)',
'fill-outline-color': 'rgba(51,118, 34, 1)'
}
});  

//////////////////////////////////Add Flood Warning 

topleftmapbox.addLayer({
'id': 'FloodWarningOuter',
'type': 'line',
'source': {
'type': 'geojson',
'data': 'warnings/FloodWarning.json'
},
'paint': {
'line-color': 'rgba(51,118, 34, 1)',
'line-width': 2
}
});  




topleftmapbox.addLayer({
'id': 'FloodWarningInner',
'type': 'fill',
'source': {   
'type': 'geojson',
'data': 'warnings/FloodWarning.json'
},
'paint': {
'fill-color': 'rgba(72, 187 ,45, 0.2)',
'fill-outline-color': 'rgba(51,118, 34, 1)'
}
});

//////////////////////////////////Add Severe Thunderstorm Warning 


topleftmapbox.addLayer({
'id': 'SevereThunderstormWarningOuter',
'type': 'line',
'source': {
'type': 'geojson',
'data': 'warnings/SevereThunderstormWarning.json'
},
'paint': {
'line-color': 'rgba(191,0, 0, 1)',
'line-width': 2
}
});  




topleftmapbox.addLayer({
'id': 'SevereThunderstormWarningInner',
'type': 'fill',
'source': {  
'type': 'geojson',  
'data': 'warnings/SevereThunderstormWarning.json'
},
'paint': {
'fill-color': 'rgba(229, 23 ,23, 0.2)',
'fill-outline-color': 'rgba(238,0, 0, 1)'
}

});


//////////////////////////////////Add Tornado Warning 

topleftmapbox.addLayer({
'id': 'TornadoWarningOuter',
'type': 'line',
'source': {
'type': 'geojson',
'data': 'warnings/TornadoWarning.json'
},
'paint': {
'line-color': 'rgba(256,90, 256, 1)',
'line-width': 2
}
});  




topleftmapbox.addLayer({
'id': 'TornadoWarningInner', 
'type': 'fill',  
'source': { 
'type': 'geojson',
'data': 'warnings/TornadoWarning.json'
},
'paint': {
'fill-color': 'rgba(256, 90 ,256, 0.3)',
'fill-outline-color': 'rgba(200,60, 200, 1)'
}

});

}


} // end  refreshWARNINGS_A()

If there is a better or easier way to refresh a JSON polygon source, I am open to that too. I am very much a beginner and trying my best.

Answer 1

It became apparent that there was a function to update the JSON source, and removing/adding the layers was not needed. Below is an acceptable and easy way to update the source. My code should have been (and works) with :

topleftmapbox.getSource('FlashFloodWarningInner').setData('warnings/FlashFloodWarning.json');