In the modern UI, vehicle markers move in noticeable jumps instead of smoothly following the route.

Hello everyone,

I am running Traccar Server 6.7 and I have noticed a significant difference between the modern web interface and the legacy interface regarding live vehicle movement.

In the modern UI, vehicle markers move in noticeable jumps instead of smoothly following the route. However, when using the legacy UI, the same vehicles move smoothly and continuously.

Important observations:

• Traccar Server version: 6.7
• The issue affects all devices and all users
• It occurs on multiple computers and browsers
• GPS reporting frequency is good and identical in both interfaces
• The server is running on Ubuntu behind Apache reverse proxy
• Legacy UI displays smooth movement
• Modern UI updates appear step-by-step/jumpy

Because the same data is displayed smoothly in the legacy interface, I believe the issue is related to how the modern UI handles marker animation or interpolation.

My questions are:

1. Does the modern UI use a different animation/interpolation method than the legacy UI?
2. Is there any setting to enable smoother marker movement in the modern interface?
3. Has anyone else experienced this behavior on Traccar 6.7?

Thank you for your help.

There's no animation in the modern web app.

Okay, thanks for replying.

Add requestAnimationFrame

let startTime = null;
const duration = 5000; // Animation duration in milliseconds (5 seconds)

function animateMarker(timestamp) {
    if (!startTime) startTime = timestamp;
    
    // Calculate progress as a percentage (0 to 1)
    const progress = Math.min((timestamp - startTime) / duration, 1);
    
    // Calculate the distance along the line based on progress
    const distance = progress * lineDistance;
    
    // Get the exact point coordinates at that distance
    const point = turf.along(route, distance, { units: 'kilometers' });
    
    // Update the marker position
    marker.setLngLat(point.geometry.coordinates);

    if (progress < 1) {
        requestAnimationFrame(animateMarker);
    }
}

// Start the animation
requestAnimationFrame(animateMarker);