Add current location support

1 files changed, 49 insertions, 0 deletions

diff --git a/web/app/view/map/MapMarkerController.js b/web/app/view/map/MapMarkerController.js
index 785fcc68..2ef4c3a1 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) {