CODEWITHSUNDEEP
mapboxmapbox-gl-js
Jesse
Jesse

Reputation: 161

How to update layer in mapbox

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

At first, I have an initial GeoJSON, and they can show on the map enter image description here

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.

enter image description here

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?

Upvotes: 0

Views: 1802

Answers (1)

AndrewHarvey
AndrewHarvey

Reputation: 3047

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

Upvotes: 3

Related Questions