Mapbox layer not updating after source update

Question

I'm using Redux state to update an array of coordinates in a Mapbox source. I initially check if there is a source with the id, if yes, I set the data of the source, if not I add the source to the map. When the redux state is changed, it triggers an effect which updates the coordinates of the features in the geojson object and uses setData to change the source. I've tried removing the layer, changing source and adding the layer, which just gave me the old layer (even though the source had indeed been updated). I also tried just updating the source alone and seeing if the layer would update dynamically, it did not.

Here is the code for the effect, which is triggered when the redux state is changed.

useEffect(() => {

        const geoJsonObj = {
            type: 'geojson',
            data: {
                type: 'FeatureCollection',
                features: []
            }
        };
        for (let i = 0; i < (props.mapRoutes.length); i++) {
            geoJsonObj.data.features.push({
                type: 'Feature',
                geometry: {
                    type: 'LineString',
                    coordinates: props.mapRoutes[i].geometry.coordinates
                }
            });
        };

        const routeLayer = {
            id: 'route',
            type: 'line',
            source: 'route',
            layout: {
                'line-join': 'round',
                'line-cap': 'round'
            },
            paint: {
                'line-color': '#ff3814',
                'line-width': 5,
                'line-opacity': 0.75
            }
        };
        const jsonString = JSON.stringify(geoJsonObj);
        const jsonObj = JSON.parse(jsonString);

        if (props.mapRoutes.length) {
            if (map.current.getSource('route')) {
                map.current.getSource('route').setData(jsonObj);
            } else {
                map.current.addSource('route', jsonObj);
                map.current.addLayer(routeLayer);
            };
        };

    }, [props.mapRoutes]);

Neither of these worked and I am having trouble finding how to update a layer based on an updated source. Everything seems right when I inspect the source in the console, I just can't manage to update the layer on the map.

Any help would be appreciated.

FRMR FRMR · Accepted Answer · 2020-08-30T23:36:34

I found the problem, I was using the original geoJson object for the setData method instead of the data entry, which was one level too high in the object. Just a simple error which was overlooked.

Mapbox layer not updating after source update

1 Answers