Add current location support

4 files changed, 58 insertions, 0 deletions

diff --git a/web/app/view/map/BaseMap.js b/web/app/view/map/BaseMap.js
index 403df94..42ea43a 100644
--- a/web/app/view/map/BaseMap.js
+++ b/web/app/view/map/BaseMap.js
@@ -217,6 +217,10 @@ Ext.define('Traccar.view.map.BaseMap', {
                 self.fireEvent('deselectfeature');
             }
         });
+
+        this.map.once('postrender', function (event) {
+            self.fireEvent('mapready');
+        });
     },
 
     listeners: {
diff --git a/web/app/view/map/Map.js b/web/app/view/map/Map.js
index e906e6c..fbaa758 100644
--- a/web/app/view/map/Map.js
+++ b/web/app/view/map/Map.js
@@ -66,6 +66,10 @@ Ext.define('Traccar.view.map.Map', {
             stateId: 'show-geofences-button',
             tooltip: Strings.sharedGeofences
         }, {
+            handler: 'showCurrentLocation',
+            glyph: 'xf124@FontAwesome',
+            tooltip: Strings.mapCurrentLocation
+        }, {
             handler: 'showLiveRoutes',
             reference: 'showLiveRoutes',
             glyph: 'xf1b0@FontAwesome',
diff --git a/web/app/view/map/MapMarkerController.js b/web/app/view/map/MapMarkerController.js
index 785fcc6..2ef4c3a 100644
--- a/web/app/view/map/MapMarkerController.js
+++ b/web/app/view/map/MapMarkerController.js
@@ -66,6 +66,7 @@ Ext.define('Traccar.view.map.MapMarkerController', {
             },
             component: {
                 '#': {
+                    mapready: 'initGeolocation',
                     selectfeature: 'selectFeature',
                     deselectfeature: 'deselectFeature'
                 }
@@ -82,6 +83,54 @@ Ext.define('Traccar.view.map.MapMarkerController', {
         this.selectZoom = Traccar.app.getAttributePreference('web.selectZoom', 0);
     },
 
+    initGeolocation: function () {
+        var geolocation, accuracyFeature, positionFeature;
+
+        geolocation = new ol.Geolocation({
+            trackingOptions: {
+                enableHighAccuracy: true
+            },
+            projection: this.getView().getMapView().getProjection()
+        });
+
+        geolocation.on('error', function (error) {
+            Traccar.app.showError(error.message);
+        });
+
+        accuracyFeature = new ol.Feature();
+        geolocation.on('change:accuracyGeometry', function () {
+            accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());
+        });
+
+        positionFeature = new ol.Feature();
+        positionFeature.setStyle(new ol.style.Style({
+            image: new ol.style.Circle({
+                radius: 6,
+                fill: new ol.style.Fill({
+                    color: '#3399CC',
+                }),
+                stroke: new ol.style.Stroke({
+                    color: '#fff',
+                    width: 2,
+                })
+            })
+        }));
+
+        geolocation.on('change:position', function () {
+            var coordinates = geolocation.getPosition();
+            positionFeature.setGeometry(coordinates ? new ol.geom.Point(coordinates) : null);
+        });
+
+        this.getView().getAccuracySource().addFeature(accuracyFeature);
+        this.getView().getMarkersSource().addFeature(positionFeature);
+
+        this.geolocation = geolocation;
+    },
+
+    showCurrentLocation: function (view) {
+        this.geolocation.setTracking(view.pressed);
+    },
+
     getAreaStyle: function (label, color) {
         var fillColor, strokeColor, styleConfig;
         if (color) {
diff --git a/web/l10n/en.json b/web/l10n/en.json
index 2724863..617a7e9 100644
--- a/web/l10n/en.json
+++ b/web/l10n/en.json
@@ -265,6 +265,7 @@
     "mapShapeCircle": "Circle",
     "mapShapePolyline": "Polyline",
     "mapLiveRoutes": "Live Routes",
+    "mapCurrentLocation": "Current Location",
     "mapPoiLayer": "POI Layer",
     "stateTitle": "State",
     "stateName": "Attribute",