Mapbox: Edit new source data on the fly

mapbox-addsource-edit

// You can edit source data on the fly but it requires it to have a layer first, as there is no way to directly access GeoJSON 
// GeoJson is only exposed via querySourceFeatures, grabbing features from a map's layer

const yourSourceId = 'some-source';
const url = 'some-url';

map.addSource(yourSourceId, {
    type: 'geojson',
    data: url
});
map.addLayer({id: 'the-layer', source: yourSourceId, type: '...'});

map.on('sourcedata', editSourceData);

function editSourceData(e) {
    if (e.isSourceLoaded && map.querySourceFeatures('the-layer').length > 0) {
        const geojson = map.querySourceFeatures('the-layer');
        const features = geojson.map((feature) => {
            // Do the stuff!!!! Maybe here, reassign properties to the top level
            feature.id = feature.properties.SOME_OTHER_ID;
            feature.properties.title = "Some new title " + feature.properties.some_other_prop;
            return feature;
        });
        console.log("New features!", features);
        const source = map.getSource(yourSourceId).setData({
            type: 'FeatureCollection',
            features: features
        });
        map.off('sourcedata', checkData); // Make sure to turn it off when done!
    }
}