How to update a single GeoJson Feature property in MapBox and reflect in real time?

Question

I have MapBox JS implmenetation with thousands of features that are loaded via GeoJson. One requirement is to allow users to select a marker and be able to update some data on it. I do this by handling a 'click' handler and showing a window that allows some new inputs and an update button, which calls a server and returns a response. Simple scenerio.

When changing the property value on the callback, however, it does not seem to show the new data upon another click. I have the following Example to show a simplified version of my process. the update is happening on line #160.

        // When a click event occurs on a feature open a popup at the
        // location of the feature, which allows upadting
        map.on('click', 'places', function(e) {
            var coordinates = e.features[0].geometry.coordinates.slice();
            var description = e.features[0].properties.description;

            // Ensure that if the map is zoomed out such that multiple
            // copies of the feature are visible, the popup appears
            // over the copy being pointed to.
            while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
                coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
            }


            new mapboxgl.Popup()
                .setLngLat(coordinates)
                .setHTML(description)
                .addTo(map);

            // change the description value. this is only a POC. 
            // real applications will update data on a server and only then update the description.
            // is this a copy or a reference to the feature?!?
            e.features[0].properties.description = "my new description"; // update happens here - #160
        });

I was assuming that the features that are returned on the 'click' handler under e.features are references to the original features and thus could be easily changed, but that does not seem to be the case. the only alternative that I see for this it to query features from the source, finding the original feature object, updating it, and resetting the data in the source, but this seem like too much overhead.

What is the correct approach here?

Answer 1

If I understand correctly, your workflow is:

1. Load GeoJSON from server
2. Add GeoJSON to map
3. User causes update on server
4. Load partial GeoJSON from server?
5. ...something...
6. Map is now displaying the most up to date GeoJSON

You have a few alternatives for step 5.

The simplest is:

• In step 1, retain a copy of the GeoJSON
• In step 4, update that copy with the new information (ie, update properties of the individual feature being touched)
• In step 5, call map.setData() again.