how to smothly translate/animate updated positions of mapboxgl JS points layer symbols

Question

i'm trying to figure out how to animate the update of this map layer so that points translate smoothly to new positions rather than simply appearing there. i have not found any useful starting points in the mpabox gl tutorials / examples and was wondering if there is a straightforward way to approach this. thanks

the code below fetches a geojson doc from an api once every 60 seconds and updates the map layer.

        var map = new mapboxgl.Map({
            container: 'map', // container id
            style: 'mapbox://styles/mapbox/light-v10', // style URL
            center: [-73.93, 40.73], // centroid of NYC
            zoom: 11 // starting zoom
        });

        var url = '/api/v1/nyc/livemap';
            map.on('load', function () {
            var request = new XMLHttpRequest();
            window.setInterval(function () {
            // make a GET request to parse the GeoJSON at the url
            request.open('GET', url, true);
            request.onload = function () {
            if (this.status >= 200 && this.status < 400) {
            // retrieve the JSON from the response
            var json = JSON.parse(this.response);

            map.getSource('observations').setData(json);

            map.flyTo({
            center: json.geometry.coordinates,
            speed: 0.5
            });
            }
            };
            request.send();
            }, 60000); // refresh every n milliseconds

            map.addSource('observations', { type: 'geojson', data: url });
            map.addLayer({
                'id': 'buses',
                'type': 'circle',
                'source': 'observations',
                'paint': {
                'circle-radius': 3,
                    //'circle-color': '#0039A6'

                    'circle-color': [
                        'match',
                        ['get', 'occupancy'],
                        'full',
                        '#e55e5e',
                        'standingAvailable',
                        '#FFFF00',
                        'seatsAvailable',
                        '#00FF00',
                        /* null */ '#87CEFA'
                        ]
                        },
            });
            });

Answer 1

Mapbox GL JS doesn't contain any mechanism for animating data points from one location to another.

You could use Turf's along function to interpolate each point some proportion along the way from its previous location to its new location.