aboutsummaryrefslogtreecommitdiff
path: root/web/app/view/map
diff options
context:
space:
mode:
authorjcardus <joaquim.cardeira@gmail.com>2019-07-17 06:32:42 +0200
committerAnton Tananaev <anton.tananaev@gmail.com>2019-07-16 21:32:42 -0700
commit34fd688c0c9bde351824de56bec83ad4583daf7a (patch)
treecdf35b65d09b7c45fbf4796122186c4f8f953c21 /web/app/view/map
parent37e28a7569d38f5aa2b1a18cf188b969347717b0 (diff)
downloadtrackermap-web-34fd688c0c9bde351824de56bec83ad4583daf7a.tar.gz
trackermap-web-34fd688c0c9bde351824de56bec83ad4583daf7a.tar.bz2
trackermap-web-34fd688c0c9bde351824de56bec83ad4583daf7a.zip
Animate marker on updateLatest (#748)
Diffstat (limited to 'web/app/view/map')
-rw-r--r--web/app/view/map/MapMarkerController.js39
1 files changed, 34 insertions, 5 deletions
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);