aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2021-06-20 19:21:47 -0700
committerAnton Tananaev <anton.tananaev@gmail.com>2021-06-20 19:21:47 -0700
commit98fc2d0749055a132f7e00cbae4333ee83f3eb9b (patch)
treed4ac75f31a043aef018a4051a236e611c0e24d78
parentb35be5a9e84ce453ad18dccc839aa5bb879dc266 (diff)
downloadtrackermap-web-98fc2d0749055a132f7e00cbae4333ee83f3eb9b.tar.gz
trackermap-web-98fc2d0749055a132f7e00cbae4333ee83f3eb9b.tar.bz2
trackermap-web-98fc2d0749055a132f7e00cbae4333ee83f3eb9b.zip
Add current location support
-rw-r--r--web/app/view/map/BaseMap.js4
-rw-r--r--web/app/view/map/Map.js4
-rw-r--r--web/app/view/map/MapMarkerController.js49
-rw-r--r--web/l10n/en.json1
4 files changed, 58 insertions, 0 deletions
diff --git a/web/app/view/map/BaseMap.js b/web/app/view/map/BaseMap.js
index 403df946..42ea43a1 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 e906e6c4..fbaa7587 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 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) {
diff --git a/web/l10n/en.json b/web/l10n/en.json
index 2724863a..617a7e95 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",