Show accuracy circle on the map

4 files changed, 77 insertions, 34 deletions

diff --git a/web/app/view/BaseMap.js b/web/app/view/BaseMap.js
index f329cf28..c755b6c9 100644
--- a/web/app/view/BaseMap.js
+++ b/web/app/view/BaseMap.js
@@ -122,7 +122,7 @@ Ext.define('Traccar.view.BaseMap', {
         this.map.on('click', function (e) {
             if (this.map.hasFeatureAtPixel(e.pixel, {
                 layerFilter: function (layer) {
-                    return layer.get('name') !== 'geofencesLayer';
+                    return !layer.get('name');
                 }
             })) {
                 this.map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
diff --git a/web/app/view/Map.js b/web/app/view/Map.js
index 7f109fdf..33fa8bb7 100644
--- a/web/app/view/Map.js
+++ b/web/app/view/Map.js
@@ -89,6 +89,10 @@ Ext.define('Traccar.view.Map', {
         return this.markersSource;
     },
 
+    getAccuracySource: function () {
+        return this.accuracySource;
+    },
+
     getRouteSource: function () {
         return this.routeSource;
     },
@@ -126,6 +130,12 @@ Ext.define('Traccar.view.Map', {
             source: this.routeSource
         }));
 
+        this.accuracySource = new ol.source.Vector({});
+        this.map.addLayer(new ol.layer.Vector({
+            name: 'accuracyLayer',
+            source: this.accuracySource
+        }));
+
         this.markersSource = new ol.source.Vector({});
         this.map.addLayer(new ol.layer.Vector({
             source: this.markersSource
diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js
index 66d6809a..43d86d97 100644
--- a/web/app/view/MapController.js
+++ b/web/app/view/MapController.js
@@ -86,44 +86,12 @@ Ext.define('Traccar.view.MapController', {
         this.fireEvent('togglestate', state);
     },
 
-    getGeofenceStyle: function (label, color) {
-        var fillColor, strokeColor;
-        if (color) {
-            fillColor = ol.color.asArray(color);
-            strokeColor = color;
-        } else {
-            fillColor = ol.color.asArray(Traccar.Style.mapGeofenceColor);
-            strokeColor = Traccar.Style.mapGeofenceColor;
-        }
-        fillColor[3] = Traccar.Style.mapGeofenceOverlayOpacity;
-        return new ol.style.Style({
-                fill: new ol.style.Fill({
-                    color: fillColor
-                }),
-                stroke: new ol.style.Stroke({
-                    color: strokeColor,
-                    width: Traccar.Style.mapGeofenceWidth
-                }),
-                text: new ol.style.Text({
-                    text: label,
-                    fill: new ol.style.Fill({
-                        color: Traccar.Style.mapGeofenceTextColor
-                    }),
-                    stroke: new ol.style.Stroke({
-                        color: Traccar.Style.mapTextStrokeColor,
-                        width: Traccar.Style.mapTextStrokeWidth
-                    }),
-                    font : Traccar.Style.mapTextFont
-                })
-            });
-    },
-
     showGeofences: function () {
         if (this.lookupReference('showGeofencesButton').pressed) {
             Ext.getStore('Geofences').each(function (geofence) {
                 var feature = new ol.Feature(Traccar.GeofenceConverter
                         .wktToGeometry(this.getView().getMapView(), geofence.get('area')));
-                feature.setStyle(this.getGeofenceStyle(geofence.get('name'),
+                feature.setStyle(this.getAreaStyle(geofence.get('name'),
                         geofence.get('attributes') ? geofence.get('attributes').color : null));
                 this.getView().getGeofencesSource().addFeature(feature);
                 return true;
diff --git a/web/app/view/MapMarkerController.js b/web/app/view/MapMarkerController.js
index b0147002..80a16a30 100644
--- a/web/app/view/MapMarkerController.js
+++ b/web/app/view/MapMarkerController.js
@@ -62,10 +62,46 @@ Ext.define('Traccar.view.MapMarkerController', {
     init: function () {
         this.latestMarkers = {};
         this.reportMarkers = {};
+        this.accuracyCircles = {};
         this.liveRoutes = {};
         this.liveRouteLength = Traccar.app.getAttributePreference('web.liveRouteLength', 10);
     },
 
+    getAreaStyle: function (label, color) {
+        var fillColor, strokeColor, styleConfig;
+        if (color) {
+            fillColor = ol.color.asArray(color);
+            strokeColor = color;
+        } else {
+            fillColor = ol.color.asArray(Traccar.Style.mapGeofenceColor);
+            strokeColor = Traccar.Style.mapGeofenceColor;
+        }
+        fillColor[3] = Traccar.Style.mapGeofenceOverlayOpacity;
+        styleConfig = {
+            fill: new ol.style.Fill({
+                color: fillColor
+            }),
+            stroke: new ol.style.Stroke({
+                color: strokeColor,
+                width: Traccar.Style.mapGeofenceWidth
+            })
+        };
+        if (label) {
+            styleConfig.text = new ol.style.Text({
+                text: label,
+                fill: new ol.style.Fill({
+                    color: Traccar.Style.mapGeofenceTextColor
+                }),
+                stroke: new ol.style.Stroke({
+                    color: Traccar.Style.mapTextStrokeColor,
+                    width: Traccar.Style.mapTextStrokeWidth
+                }),
+                font: Traccar.Style.mapTextFont
+            });
+        }
+        return new ol.style.Style(styleConfig);
+    },
+
     getDeviceColor: function (device) {
         switch (device.get('status')) {
             case 'online':
@@ -129,12 +165,41 @@ Ext.define('Traccar.view.MapMarkerController', {
             device = Ext.getStore('Devices').findRecord('id', position.get('deviceId'), 0, false, false, true);
 
             if (device) {
+                this.updateAccuracy(position);
                 this.updateLatestMarker(position, device);
                 this.updateLiveRoute(position);
             }
         }
     },
 
+    updateAccuracy: function (position) {
+        var center, feature, mapView, projection, pointResolution;
+        mapView = this.getView().getMapView();
+        feature = this.accuracyCircles[position.get('deviceId')];
+
+        if (position.get('accuracy')) {
+            projection = mapView.getProjection();
+            center = ol.proj.fromLonLat([position.get('longitude'), position.get('latitude')]);
+            pointResolution = ol.proj.getPointResolution(projection, mapView.getResolution(), center);
+            radius = (position.get('accuracy') / ol.proj.METERS_PER_UNIT.m) * mapView.getResolution() / pointResolution;
+
+            if (feature) {
+                feature.getGeometry().setCenter(center);
+                feature.getGeometry().setRadius(radius);
+            } else {
+                feature = new ol.Feature(new ol.geom.Circle(center, radius));
+                feature.setStyle(this.getAreaStyle(null, Traccar.Style.mapAccuracyColor));
+                this.getView().getAccuracySource().addFeature(feature);
+                this.accuracyCircles[position.get('deviceId')] = feature;
+            }
+        } else {
+            if (feature) {
+                this.getView().getAccuracySource().removeFeature(feature);
+            }
+            delete this.accuracyCircles[position.get('deviceId')];
+        }
+    },
+
     updateLatestMarker: function (position, device) {
         var geometry, deviceId, marker, style;
         geometry = new ol.geom.Point(ol.proj.fromLonLat([