1 files changed, 33 insertions, 17 deletions

diff --git a/web/app/view/MapMarkerController.js b/web/app/view/MapMarkerController.js
index bf3a2c0d..fa380e76 100644
--- a/web/app/view/MapMarkerController.js
+++ b/web/app/view/MapMarkerController.js
@@ -32,6 +32,9 @@ Ext.define('Traccar.view.MapMarkerController', {
                 '*': {
                     selectdevice: 'selectDevice',
                     selectreport: 'selectReport'
+                },
+                'devices': {
+                    deselectfeature: 'deselectDevice'
                 }
             },
             store: {
@@ -41,9 +44,9 @@ Ext.define('Traccar.view.MapMarkerController', {
                     remove: 'removeDevice'
                 },
                 '#VisibleDevices': {
-                    add: 'updateVisibleDevice',
-                    update: 'updateVisibleDevice',
-                    remove: 'updateVisibleDevice',
+                    add: 'updateVisibleDevices',
+                    update: 'updateVisibleDevices',
+                    remove: 'updateVisibleDevices',
                     refresh: 'filterDevices'
                 },
                 '#LatestPositions': {
@@ -180,14 +183,14 @@ Ext.define('Traccar.view.MapMarkerController', {
             device = Ext.getStore('Devices').getById(position.get('deviceId'));
 
             if (device) {
-                this.updateAccuracy(position);
+                this.updateAccuracy(position, device);
                 this.updateLatestMarker(position, device);
-                this.updateLiveRoute(position);
+                this.updateLiveRoute(position, device);
             }
         }
     },
 
-    updateAccuracy: function (position) {
+    updateAccuracy: function (position, device) {
         var center, radius, feature, mapView, projection, pointResolution;
         mapView = this.getView().getMapView();
         feature = this.accuracyCircles[position.get('deviceId')];
@@ -206,6 +209,9 @@ Ext.define('Traccar.view.MapMarkerController', {
                 feature.setStyle(this.getAreaStyle(null, Traccar.Style.mapAccuracyColor));
                 feature.setId(position.get('deviceId'));
                 this.accuracyCircles[position.get('deviceId')] = feature;
+                if (this.isDeviceVisible(device)) {
+                    this.getView().getAccuracySource().addFeature(feature);
+                }
             }
         } else {
             if (feature && this.getView().getAccuracySource().getFeatureById(feature.getId())) {
@@ -240,7 +246,9 @@ Ext.define('Traccar.view.MapMarkerController', {
             marker.setStyle(style);
             marker.setId(device.get('id'));
             this.latestMarkers[deviceId] = marker;
-            this.checkDeviceVisibility(device);
+            if (this.isDeviceVisible(device)) {
+                this.getView().getMarkersSource().addFeature(marker);
+            }
         }
 
         if (marker === this.selectedMarker && this.lookupReference('deviceFollowButton').pressed) {
@@ -248,7 +256,7 @@ Ext.define('Traccar.view.MapMarkerController', {
         }
     },
 
-    updateLiveRoute: function (position) {
+    updateLiveRoute: function (position, device) {
         var deviceId, liveLine, liveCoordinates, lastLiveCoordinates, newCoordinates;
         deviceId = position.get('deviceId');
         if (deviceId in this.liveRoutes) {
@@ -276,6 +284,9 @@ Ext.define('Traccar.view.MapMarkerController', {
             liveLine.setStyle(this.getRouteStyle(deviceId));
             liveLine.setId(position.get('deviceId'));
             this.liveRoutes[deviceId] = liveLine;
+            if (this.isDeviceVisible(device)) {
+                this.getView().getMarkersSource().addFeature(liveLine);
+            }
         }
     },
 
@@ -468,10 +479,14 @@ Ext.define('Traccar.view.MapMarkerController', {
     },
 
     deselectFeature: function () {
-        this.selectMarker(null, false);
+        this.deselectDevice();
         this.fireEvent('deselectfeature');
     },
 
+    deselectDevice: function () {
+        this.selectMarker(null, false);
+    },
+
     zoomToAllPositions: function (data) {
         var i, point, minx, miny, maxx, maxy;
         for (i = 0; i < data.length; i++) {
@@ -496,7 +511,7 @@ Ext.define('Traccar.view.MapMarkerController', {
         }
     },
 
-    updateVisibleDevice: function (store, data) {
+    updateVisibleDevices: function (store, data) {
         var i, device;
 
         if (!Ext.isArray(data)) {
@@ -506,18 +521,22 @@ Ext.define('Traccar.view.MapMarkerController', {
         for (i = 0; i < data.length; i++) {
             device = data[i];
             if (device.get('id') in this.latestMarkers) {
-                this.checkDeviceVisibility(device);
+                this.updateDeviceVisibility(device);
             }
         }
     },
 
-    checkDeviceVisibility: function (device) {
+    isDeviceVisible: function (device) {
+        return Ext.getStore('VisibleDevices').contains(device);
+    },
+
+    updateDeviceVisibility: function (device) {
         var deviceId, accuracy, liveLine, marker;
         deviceId = device.get('id');
         marker = this.latestMarkers[deviceId];
         accuracy = this.accuracyCircles[deviceId];
         liveLine = this.liveRoutes[deviceId];
-        if (Ext.getStore('VisibleDevices').contains(device)) {
+        if (this.isDeviceVisible(device)) {
             if (marker && !this.getView().getMarkersSource().getFeatureById(marker.getId())) {
                 this.getView().getMarkersSource().addFeature(marker);
             }
@@ -531,9 +550,6 @@ Ext.define('Traccar.view.MapMarkerController', {
             if (marker && this.getView().getMarkersSource().getFeatureById(marker.getId())) {
                 this.getView().getMarkersSource().removeFeature(marker);
             }
-            if (this.selectedMarker && marker && marker.getId() === this.selectedMarker.getId()) {
-                this.deselectFeature();
-            }
             if (accuracy && this.getView().getAccuracySource().getFeatureById(accuracy.getId())) {
                 this.getView().getAccuracySource().removeFeature(accuracy);
             }
@@ -544,6 +560,6 @@ Ext.define('Traccar.view.MapMarkerController', {
     },
 
     filterDevices: function (store) {
-        Ext.getStore('Devices').each(this.checkDeviceVisibility, this, false);
+        Ext.getStore('Devices').each(this.updateDeviceVisibility, this, false);
     }
 });