Totally update device marker instead of updating only image src

2 files changed, 16 insertions, 11 deletions

diff --git a/web/app/DeviceImages.js b/web/app/DeviceImages.js
index a05a8153..b31f3ed3 100644
--- a/web/app/DeviceImages.js
+++ b/web/app/DeviceImages.js
@@ -98,15 +98,8 @@ Ext.define('Traccar.DeviceImages', {
     },
 
     rotateImageIcon: function (image, angle) {
-        var svg = Traccar.DeviceImages.getImageSvg(image.fill, image.zoom, angle, image.category);
+        var svg = this.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 9fcd4939..bea1253b 100644
--- a/web/app/view/MapController.js
+++ b/web/app/view/MapController.js
@@ -103,9 +103,7 @@ Ext.define('Traccar.view.MapController', {
                 style = marker.getStyle();
                 if (style.getImage().fill !== this.getDeviceColor(device) ||
                         style.getImage().category !== device.get('category')) {
-                    Traccar.DeviceImages.changeImageColor(style.getImage(),
-                            this.getDeviceColor(device), device.get('category'));
-                    marker.changed();
+                    marker.setStyle(this.updateDeviceMarker(style, this.getDeviceColor(device), device.get('category')));
                 }
                 if (style.getText().getText() !== device.get('name')) {
                     style.getText().setText(device.get('name'));
@@ -339,6 +337,20 @@ Ext.define('Traccar.view.MapController', {
         });
     },
 
+    updateDeviceMarker: function (style, color, category) {
+        var image, text;
+        image = Traccar.DeviceImages.getImageIcon(color,
+                style.getImage().zoom,
+                style.getImage().angle,
+                category);
+        text = style.getText();
+        text.setOffsetY(-image.getSize()[1] / 2 - Traccar.Style.mapTextOffset);
+        return new ol.style.Style({
+            image: image,
+            text: text
+        });
+    },
+
     selectMarker: function (marker, center) {
         if (this.selectedMarker) {
             this.selectedMarker.setStyle(