Changed icon styles

3 files changed, 33 insertions, 21 deletions

diff --git a/web/app/DeviceImages.js b/web/app/DeviceImages.js
index 52eea1d0..c79406b0 100644
--- a/web/app/DeviceImages.js
+++ b/web/app/DeviceImages.js
@@ -39,6 +39,7 @@ Ext.define('Traccar.DeviceImages', {
         svg.getElementById(device.get('fillId')).style.fill = color;
         // Prepare rotate transformation
         rotateTransform = 'rotate(' + angle + ' ' + (width / 2) + ' ' + (height / 2) + ')';
+        svg.getElementById(device.get('rotateId')).setAttribute('transform', rotateTransform);
 
         // Adjust size and prepare scale transformation
         width *= device.get('scale');
@@ -51,9 +52,13 @@ Ext.define('Traccar.DeviceImages', {
             scaleTransform = 'scale(' + device.get('scale') + ') ';
         }
 
-        //Apply both transformation in right order
-        transform = scaleTransform + ' ' + rotateTransform;
-        svg.getElementById(device.get('rotateId')).setAttribute('transform', transform);
+        if (device.get('scaleId') !== device.get('rotateId')) {
+            svg.getElementById(device.get('scaleId')).setAttribute('transform', scaleTransform);
+        } else {
+            svg.getElementById(device.get('scaleId')).setAttribute('transform', scaleTransform + ' ' + rotateTransform);
+        }
+        //transform = scaleTransform + ' ' + rotateTransform;
+        
 
         // Set dimension attributes
         svg.documentElement.setAttribute('width', width);
diff --git a/web/app/store/DeviceImages.js b/web/app/store/DeviceImages.js
index 22a7872f..e7ad4cbc 100644
--- a/web/app/store/DeviceImages.js
+++ b/web/app/store/DeviceImages.js
@@ -17,35 +17,39 @@
  */
 Ext.define('Traccar.store.DeviceImages', {
     extend: 'Ext.data.Store',
-    fields: ['key', 'name', 'url', 'svg', 'fillId', 'rotateId', 'scale'],
+    fields: ['key', 'name', 'svg', 'fillId', 'rotateId', 'scaleId', 'scale'],
 
     data: [{
         key: 'default',
         name: Strings.categoryDefault,
         svg: document.getElementById('arrowSvg').contentDocument,
-        rotateId: 'arrow',
         fillId: 'arrow',
+        rotateId: 'arrow',
+        scaleId: 'arrow',
         scale: 1
     }, {
         key: 'car',
         name: Strings.categoryCar,
         svg: document.getElementById('carSvg').contentDocument,
-        fillId: 'path4149',
-        rotateId: 'g4207',
-        scale: 0.06,
+        fillId: 'path4148',
+        rotateId: 'path4148',
+        scaleId: 'layer2',
+        scale: 1
     }, {
         key: 'bus',
         name: Strings.categoryBus,
         svg: document.getElementById('busSvg').contentDocument,
-        fillId: 'path4713',
-        rotateId: 'layer2',
-        scale: 0.12,
+        fillId: 'path4148',
+        rotateId: 'path4148',
+        scaleId: 'layer2',
+        scale: 1
     }, {
         key: 'truck',
         name: Strings.categoryTruck,
         svg: document.getElementById('truckSvg').contentDocument,
-        fillId: 'path4718',
-        rotateId: 'layer2',
-        scale: 0.1,
+        fillId: 'path4148',
+        rotateId: 'path4148',
+        scaleId: 'layer2',
+        scale: 1
     }]
 });
\ No newline at end of file
diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js
index 829a8ea5..2f72e81c 100644
--- a/web/app/view/MapController.js
+++ b/web/app/view/MapController.js
@@ -309,14 +309,17 @@ Ext.define('Traccar.view.MapController', {
     },
 
     resizeMarker: function (style, zoom) {
-        var newStyle = new ol.style.Style({
-            image: Traccar.DeviceImages.getImageIcon(style.getImage().fill,
-                    zoom,
-                    style.getImage().angle,
-                    style.getImage().category),
-            text: style.getText()
+        var image, text;
+        image = Traccar.DeviceImages.getImageIcon(style.getImage().fill,
+                zoom,
+                style.getImage().angle,
+                style.getImage().category);
+        text = style.getText();
+        text.setOffsetY(- image.getSize()[1] / 2 - Traccar.Style.mapTextOffset);
+        return newStyle = new ol.style.Style({
+            image: image,
+            text: text
         });
-        return newStyle;
     },
     
     rotateMarker: function (style, angle) {