Update maplibre/mapbox geoJSON line, from sockets.io data

Question

I am currently receiving on client side, some coordinates (lat, lon) from my Node-Express-Socket.IO server. I am using these coordinates to update a marker, with my callback function:

     socket.on("geolocation-data", function(msg) {
            // update marker position
             marker.setLngLat([msg.lon, msg.lat]);
      }

So far, so good. Now I want to draw a line between the coordinates I am receiving and another fixed point.

I am adding a data source (with arbitrary initial values), then a layer in a separate function:

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


            map.addSource('route', {
                'type': 'geojson',
                'data': 'type': 'Feature',
            'properties': {},
            'geometry': {
                'type': 'LineString',
                'coordinates': [
                    [40, 40],
                    [50, 50],

                ]
            }
            });


            map.addLayer({
                'id': 'route',
                'type': 'line',
                'source': 'route',
                'layout': {
                    'line-join': 'round',
                    'line-cap': 'round'
                },
                'paint': {
                    'line-color': '#888',
                    'line-width': 8
                }
            });

I have tried adding map.getSource('route').setData(// new data here) inside the sockets.io callback but I cannot get the line to update. As soon as I move it outside and put it inside map.on('load') it works, but only if I hardcode some values.

What am I doing wrong?

EDIT: I have also tried putting the socket functions inside the map.on('load') function, but it didn't work either.

Answer 1

SOLVED!

I was putting lat, lon instead of lon,lat to the new data (where as in the marker data it was correct).

So overall structure is:

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

        socket.on("geolocation-data", function (msg) {

        // do something
        
        //update variable geoJSONline, according to the msg
        
         map.getSource('route').setData(geoJSONline);
        
        }

        map.addSource('route', {
                type: 'geojson',
                data: geoJSONline
            });


         map.addLayer({
                'id': 'route',
                'type': 'line',
                'source': 'route',
                'layout': {
                    'line-join': 'round',
                    'line-cap': 'round'
                },
                'paint': {
                    'line-color': '#888',
                    'line-width': 8
                }

});