aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--web/app/Style.js3
-rw-r--r--web/app/view/map/MapMarkerController.js39
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);