Merge pull request #315 from Abyss777/fix_icon_blinking

Fix icon blinking

2 files changed, 12 insertions, 4 deletions

diff --git a/web/app/DeviceImages.js b/web/app/DeviceImages.js
index 1e63cf29..96f00980 100644
--- a/web/app/DeviceImages.js
+++ b/web/app/DeviceImages.js
@@ -73,6 +73,7 @@ Ext.define('Traccar.DeviceImages', {
             imgSize: [width, height],
             src: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(new XMLSerializer().serializeToString(svg.documentElement))
         });
+        image.load();
         image.fill = color;
         image.zoom = zoom;
         image.angle = angle;
diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js
index c981fabc..c29c4900 100644
--- a/web/app/view/MapController.js
+++ b/web/app/view/MapController.js
@@ -98,7 +98,7 @@ Ext.define('Traccar.view.MapController', {
     },
 
     updateDevice: function (store, data) {
-        var i, device, deviceId, marker;
+        var i, device, deviceId, marker, style;
 
         if (!Ext.isArray(data)) {
             data = [data];
@@ -110,8 +110,12 @@ Ext.define('Traccar.view.MapController', {
 
             if (deviceId in this.latestMarkers) {
                 marker = this.latestMarkers[deviceId];
-                marker.setStyle(
-                    this.changeMarkerColor(marker.getStyle(), this.getDeviceColor(device), device.get('category')));
+                style = marker.getStyle();
+                if (style.getImage().fill !== this.getDeviceColor(device) ||
+                        style.getImage().category !== device.get('category')) {
+                    marker.setStyle(
+                        this.changeMarkerColor(style, this.getDeviceColor(device), device.get('category')));
+                }
             }
         }
     },
@@ -151,8 +155,11 @@ Ext.define('Traccar.view.MapController', {
         deviceId = position.get('deviceId');
         if (deviceId in this.latestMarkers) {
             marker = this.latestMarkers[deviceId];
+            style = marker.getStyle();
+            if (style.getImage().angle !== position.get('course')) {
+                marker.setStyle(this.rotateMarker(marker.getStyle(), position.get('course')));
+            }
             marker.setGeometry(geometry);
-            marker.setStyle(this.rotateMarker(marker.getStyle(), position.get('course')));
         } else {
             marker = new ol.Feature(geometry);
             marker.set('record', device);