- Move arrow to file

- Change stroke width
- Fix label offset

4 files changed, 7 insertions, 9 deletions

diff --git a/web/app/DeviceImages.js b/web/app/DeviceImages.js
index ade88bd9..52eea1d0 100644
--- a/web/app/DeviceImages.js
+++ b/web/app/DeviceImages.js
@@ -62,7 +62,7 @@ Ext.define('Traccar.DeviceImages', {
    
         image =  new ol.style.Icon({
             imgSize: [width, height], // Workaround for IE
-            src: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent((new XMLSerializer()).serializeToString(svg.documentElement))
+            src: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(new XMLSerializer().serializeToString(svg.documentElement))
         });
         image.fill = color;
         image.zoom = zoom;
diff --git a/web/app/Style.js b/web/app/Style.js
index 2353a218..4fe5afd7 100644
--- a/web/app/Style.js
+++ b/web/app/Style.js
@@ -52,7 +52,7 @@ Ext.define('Traccar.Style', {
     mapTextColor: 'rgba(50, 50, 50, 1.0)',
     mapTextStrokeColor: 'rgba(255, 255, 255, 1.0)',
     mapTextStrokeWidth: 2,
-    mapTextOffset: 10,
+    mapTextOffset: 2,
     mapTextFont: 'bold 12px sans-serif',
 
     mapColorOnline: 'rgba(77, 250, 144, 1.0)',
diff --git a/web/app/store/DeviceImages.js b/web/app/store/DeviceImages.js
index 968f90c4..57745f1c 100644
--- a/web/app/store/DeviceImages.js
+++ b/web/app/store/DeviceImages.js
@@ -22,10 +22,7 @@ Ext.define('Traccar.store.DeviceImages', {
     data: [{
         key: 'default',
         name: Strings.categoryDefault,
-        svg: (new DOMParser())
-                .parseFromString('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="26" height="26">'
-                + '<polygon id="arrow" points="13,4 19,22 13,19 7,22" '
-                + 'style="fill:#008000;stroke:#000000;stroke-width:2px;" transform="" /></svg>', "image/svg+xml"),
+        url: 'images/arrow.svg',
         rotateId: 'arrow',
         fillId: 'arrow',
         scale: 1
@@ -60,7 +57,7 @@ Ext.define('Traccar.store.DeviceImages', {
                     url: device.url,
                     scope: device,
                     success: function (response) {
-                        this.svg = (new DOMParser()).parseFromString(response.responseText, "image/svg+xml");
+                        this.svg = new DOMParser().parseFromString(response.responseText, "image/svg+xml");
                     }
                 });
             }
diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js
index 7875e94d..829a8ea5 100644
--- a/web/app/view/MapController.js
+++ b/web/app/view/MapController.js
@@ -278,8 +278,9 @@ Ext.define('Traccar.view.MapController', {
     },
 
     getMarkerStyle: function (zoom, color, angle, category) {
+        var image = Traccar.DeviceImages.getImageIcon(color, zoom, angle, category);
         return new ol.style.Style({
-            image: Traccar.DeviceImages.getImageIcon(color, zoom, angle, category),
+            image: image,
             text: new ol.style.Text({
                 textBaseline: 'bottom',
                 fill: new ol.style.Fill({
@@ -289,7 +290,7 @@ Ext.define('Traccar.view.MapController', {
                     color: Traccar.Style.mapTextStrokeColor,
                     width: Traccar.Style.mapTextStrokeWidth
                 }),
-                offsetY: -Traccar.Style.mapTextOffset,
+                offsetY: - image.getSize()[1] / 2 - Traccar.Style.mapTextOffset,
                 font : Traccar.Style.mapTextFont
             })
         });