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

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
}
});