- Split updateLatest function

- Remove liveRoute markers
- Use one lineString

1 files changed, 59 insertions, 61 deletions

diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js
index 36092cad..b2dcd75d 100644
--- a/web/app/view/MapController.js
+++ b/web/app/view/MapController.js
@@ -145,8 +145,7 @@ Ext.define('Traccar.view.MapController', {
     },
 
     updateLatest: function (store, data) {
-        var i, position, geometry, device, deviceId, marker, style,
-                liveMarker, liveStyle, liveLine, lastLiveCoordinates;
+        var i, position, device;
 
         if (!Ext.isArray(data)) {
             data = [data];
@@ -154,72 +153,71 @@ Ext.define('Traccar.view.MapController', {
 
         for (i = 0; i < data.length; i++) {
             position = data[i];
-            deviceId = position.get('deviceId');
-            device = Ext.getStore('Devices').findRecord('id', deviceId, 0, false, false, true);
+            device = Ext.getStore('Devices').findRecord('id', position.get('deviceId'), 0, false, false, true);
 
             if (device) {
-                geometry = new ol.geom.Point(ol.proj.fromLonLat([
-                    position.get('longitude'),
-                    position.get('latitude')
-                ]));
-
-                if (deviceId in this.latestMarkers) {
-                    marker = this.latestMarkers[deviceId];
-                    marker.setGeometry(geometry);
-                } else {
-                    marker = new ol.Feature(geometry);
-                    marker.set('record', device);
-                    this.latestMarkers[deviceId] = marker;
-                    this.getView().getLatestSource().addFeature(marker);
-
-                    style = this.getLatestMarker(this.getDeviceColor(device));
-                    style.getText().setText(device.get('name'));
-                    marker.setStyle(style);
-                }
-
-                marker.getStyle().getImage().setRotation(position.get('course') * Math.PI / 180);
-
-                if (marker === this.selectedMarker && this.followSelected()) {
-                    this.getView().getMapView().setCenter(marker.getGeometry().getCoordinates());
-                }
-
-                if (deviceId in this.liveRoutes) {
-                    lastLiveCoordinates = this.liveRoutes[deviceId][this.liveRoutes[deviceId].length - 1].getGeometry().getCoordinates();
-                    if (lastLiveCoordinates[0] === geometry.getCoordinates()[0] &&
-                            lastLiveCoordinates[1] === geometry.getCoordinates()[1]) {
-                        continue;
-                    }
-                    if (this.liveRoutes[deviceId].length >= this.liveRouteLength * 2) {
-                        this.getView().getLiveRouteSource().removeFeature(this.liveRoutes[deviceId].shift());
-                        this.getView().getLiveRouteSource().removeFeature(this.liveRoutes[deviceId].shift());
-                    }
-                    liveLine = new ol.Feature({
-                        geometry: new ol.geom.LineString([
-                            lastLiveCoordinates,
-                            ol.proj.fromLonLat([
-                                position.get('longitude'),
-                                position.get('latitude')
-                            ])
-                        ])
-                    });
-                    liveLine.setStyle(this.getRouteStyle(position.get('deviceId')));
-                    this.liveRoutes[deviceId].push(liveLine);
-                    this.getView().getLiveRouteSource().addFeature(liveLine);
-                } else {
-                    this.liveRoutes[deviceId] = [];
-                }
-
-                liveMarker = new ol.Feature(geometry);
+                this.updateLatestMarker(position, device);
+                this.updateLiveRoute(position);
+            }
+        }
+    },
 
-                this.liveRoutes[deviceId].push(liveMarker);
-                this.getView().getLiveRouteSource().addFeature(liveMarker);
+    updateLatestMarker: function (position, device) {
+        var geometry, deviceId, marker, style;
+        geometry = new ol.geom.Point(ol.proj.fromLonLat([
+            position.get('longitude'),
+            position.get('latitude')
+        ]));
+        deviceId = position.get('deviceId');
+        if (deviceId in this.latestMarkers) {
+            marker = this.latestMarkers[deviceId];
+            marker.setGeometry(geometry);
+        } else {
+            marker = new ol.Feature(geometry);
+            marker.set('record', device);
+            this.latestMarkers[deviceId] = marker;
+            this.getView().getLatestSource().addFeature(marker);
+
+            style = this.getLatestMarker(this.getDeviceColor(device));
+            style.getText().setText(device.get('name'));
+            marker.setStyle(style);
+        }
 
-                liveStyle = this.getReportMarker(position.get('deviceId'));
-                liveStyle.getImage().setRotation(position.get('course') * Math.PI / 180);
+        marker.getStyle().getImage().setRotation(position.get('course') * Math.PI / 180);
 
-                liveMarker.setStyle(liveStyle);
+        if (marker === this.selectedMarker && this.followSelected()) {
+            this.getView().getMapView().setCenter(marker.getGeometry().getCoordinates());
+        }
+    },
 
+    updateLiveRoute: function (position) {
+        var deviceId, liveLine, liveCoordinates, lastLiveCoordinates, newCoordinates;
+        deviceId = position.get('deviceId');
+        if (deviceId in this.liveRoutes) {
+            liveCoordinates = this.liveRoutes[deviceId].getGeometry().getCoordinates();
+            lastLiveCoordinates = liveCoordinates[liveCoordinates.length - 1];
+            newCoordinates = ol.proj.fromLonLat([position.get('longitude'), position.get('latitude')]);
+            if (lastLiveCoordinates[0] === newCoordinates[0] &&
+                    lastLiveCoordinates[1] === newCoordinates[1]) {
+                return;
+            }
+            if (liveCoordinates.length >= this.liveRouteLength) {
+                liveCoordinates.shift();
             }
+            liveCoordinates.push(newCoordinates);
+            this.liveRoutes[deviceId].getGeometry().setCoordinates(liveCoordinates);
+        } else {
+            liveLine = new ol.Feature({
+                geometry: new ol.geom.LineString([
+                    ol.proj.fromLonLat([
+                        position.get('longitude'),
+                        position.get('latitude')
+                    ])
+                ])
+            });
+            liveLine.setStyle(this.getRouteStyle(position.get('deviceId')));
+            this.liveRoutes[deviceId] = liveLine;
+            this.getView().getLiveRouteSource().addFeature(liveLine);
         }
     },