Merge pull request #316 from Abyss777/fix_icon_blinking

Remove marker style recreation on marker rotate and color change

2 files changed, 23 insertions, 27 deletions

diff --git a/web/app/DeviceImages.js b/web/app/DeviceImages.js
index 96f00980..d976a2b3 100644
--- a/web/app/DeviceImages.js
+++ b/web/app/DeviceImages.js
@@ -62,6 +62,11 @@ Ext.define('Traccar.DeviceImages', {
         return svg;
     },
 
+    formatSrc: function (svg) {
+        return 'data:image/svg+xml;charset=utf-8,' +
+                encodeURIComponent(new XMLSerializer().serializeToString(svg.documentElement));
+    },
+
     getImageIcon: function (color, zoom, angle, category) {
         var image, svg, width, height;
 
@@ -71,14 +76,26 @@ Ext.define('Traccar.DeviceImages', {
 
         image =  new ol.style.Icon({
             imgSize: [width, height],
-            src: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(new XMLSerializer().serializeToString(svg.documentElement))
+            src: this.formatSrc(svg)
         });
-        image.load();
         image.fill = color;
         image.zoom = zoom;
         image.angle = angle;
         image.category = category;
 
         return image;
+    },
+
+    rotateImageIcon: function (image, angle) {
+        var svg = Traccar.DeviceImages.getImageSvg(image.fill, image.zoom, angle, image.category);
+        image.getImage().src = this.formatSrc(svg);
+        image.angle = angle;
+    },
+
+    changeImageColor: function (image, color, category) {
+        var svg = Traccar.DeviceImages.getImageSvg(color, image.zoom, image.angle, category);
+        image.getImage().src = this.formatSrc(svg);
+        image.fill = color;
+        image.category = category;
     }
 });
diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js
index c29c4900..13d3c8bd 100644
--- a/web/app/view/MapController.js
+++ b/web/app/view/MapController.js
@@ -86,17 +86,6 @@ Ext.define('Traccar.view.MapController', {
         }
     },
 
-    changeMarkerColor: function (style, color, category) {
-        var newStyle = new ol.style.Style({
-            image: Traccar.DeviceImages.getImageIcon(color,
-                    style.getImage().zoom,
-                    style.getImage().angle,
-                    category),
-            text: style.getText()
-        });
-        return newStyle;
-    },
-
     updateDevice: function (store, data) {
         var i, device, deviceId, marker, style;
 
@@ -113,8 +102,9 @@ Ext.define('Traccar.view.MapController', {
                 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')));
+                    Traccar.DeviceImages.changeImageColor(style.getImage(),
+                            this.getDeviceColor(device), device.get('category'));
+                    marker.changed();
                 }
             }
         }
@@ -157,7 +147,7 @@ Ext.define('Traccar.view.MapController', {
             marker = this.latestMarkers[deviceId];
             style = marker.getStyle();
             if (style.getImage().angle !== position.get('course')) {
-                marker.setStyle(this.rotateMarker(marker.getStyle(), position.get('course')));
+                Traccar.DeviceImages.rotateImageIcon(style.getImage(), position.get('course'));
             }
             marker.setGeometry(geometry);
         } else {
@@ -329,17 +319,6 @@ Ext.define('Traccar.view.MapController', {
         });
     },
 
-    rotateMarker: function (style, angle) {
-        var newStyle = new ol.style.Style({
-            image: Traccar.DeviceImages.getImageIcon(style.getImage().fill,
-                    style.getImage().zoom,
-                    angle,
-                    style.getImage().category),
-            text: style.getText()
-        });
-        return newStyle;
-    },
-
     selectMarker: function (marker, center) {
         if (this.selectedMarker) {
             this.selectedMarker.setStyle(