Animate marker on updateLatest (#748)

2 files changed, 37 insertions, 5 deletions

diff --git a/web/app/Style.js b/web/app/Style.js
index 47c49a96..371e05a1 100644
--- a/web/app/Style.js
+++ b/web/app/Style.js
@@ -81,6 +81,9 @@ Ext.define('Traccar.Style', {
     mapGeofenceWidth: 5,
     mapGeofenceRadius: 9,
 
+    mapAnimateMarkerDuration: 2000,
+    mapAnimateMarkerTimeout: 40,
+
     coordinatePrecision: 6,
     numberPrecision: 2,
 
diff --git a/web/app/view/map/MapMarkerController.js b/web/app/view/map/MapMarkerController.js
index 630497a2..9c61fa61 100644
--- a/web/app/view/map/MapMarkerController.js
+++ b/web/app/view/map/MapMarkerController.js
@@ -188,6 +188,39 @@ Ext.define('Traccar.view.map.MapMarkerController', {
         }
     },
 
+    animateMarker: function (marker, geometry, course) {
+        var start, end, duration, timeout, line, updatePosition, self;
+
+        start = marker.getGeometry().getCoordinates();
+        end = geometry.getCoordinates();
+        line = new ol.geom.LineString([start, end]);
+        duration = Traccar.Style.mapAnimateMarkerDuration;
+        timeout = Traccar.Style.mapAnimateMarkerTimeout;
+        self = this;
+
+        updatePosition = function (position, marker) {
+            var coordinate, style;
+            coordinate = marker.get('line').getCoordinateAt(position / (duration / timeout));
+            style = marker.getStyle();
+            marker.setGeometry(new ol.geom.Point(coordinate));
+            if (position < duration / timeout) {
+                setTimeout(updatePosition, timeout, position + 1, marker);
+            } else {
+                if (style.getImage().angle !== marker.get('nextCourse')) {
+                    self.rotateMarker(style, marker.get('nextCourse'));
+                }
+                marker.set('animating', false);
+            }
+        };
+
+        marker.set('line', line);
+        marker.set('nextCourse', course);
+        if (!marker.get('animating')) {
+            marker.set('animating', true);
+            updatePosition(1, marker);
+        }
+    },
+
     updateLatest: function (store, data) {
         var i, position, device, deviceStore;
 
@@ -249,11 +282,7 @@ Ext.define('Traccar.view.map.MapMarkerController', {
         deviceId = position.get('deviceId');
         if (deviceId in this.latestMarkers) {
             marker = this.latestMarkers[deviceId];
-            style = marker.getStyle();
-            if (style.getImage().angle !== position.get('course')) {
-                this.rotateMarker(style, position.get('course'));
-            }
-            marker.setGeometry(geometry);
+            this.animateMarker(marker, geometry, position.get('course'));
         } else {
             marker = new ol.Feature(geometry);
             marker.set('record', device);