How to update layer in mapbox

Question

I have a question about mapbox -- update feature on layer.

At first, I have an initial GeoJSON, and they can show on the map

We can see the variable "user" on the console and the two points on the map.

Now I query data from my local database, and backend transfers GEOJSON to frontend, the variable "user" has been updated, as we can see from the console.

So, now the layer should be updated, I write a click function that when I click the old layer(points) the new data(points) will show.

map.on('load', function(){

        map.addSource('wifiData',{
            'type': "geojson",
            'data': {
                    "type": "FeatureCollection",
                    "features": user,
                }
        });

        map.addLayer({
            'id': 'test',
            'type': 'circle',
            'source' : 'wifiData',
            'paint':{
                'circle-color': '#00b7bf',
                'circle-radius': [
                    '/',['get','total'],50
                ],
                'circle-stroke-width': 1,
                'circle-stroke-color': '#333',
                'circle-opacity': 0.3,
            }
        });

map.on('click','test',function () {
                map.getSource('wifiData').setData(user);
            })

        });

But console shows "Error {message: "Input data is not a valid GeoJSON object." " could you tell me how to update the layer on the map depends on the new data?

AndrewHarvey AndrewHarvey · Accepted Answer · 2019-10-24T04:20:28

That's not valid GeoJSON. If you have multiple features you need to wrap them up in a feature collection

How to update layer in mapbox

1 Answers