3 files changed, 48 insertions, 4 deletions

diff --git a/web/app/view/map/BaseMap.js b/web/app/view/map/BaseMap.js
index 507ee7a..7813aa6 100644
--- a/web/app/view/map/BaseMap.js
+++ b/web/app/view/map/BaseMap.js
@@ -30,12 +30,13 @@ Ext.define('Traccar.view.map.BaseMap', {
     },
 
     initMap: function () {
-        var server, layer, type, bingKey, lat, lon, zoom, maxZoom, target, poiLayer, self = this;
+        var server, layer, type, bingKey, locationIqKey, lat, lon, zoom, maxZoom, target, poiLayer, self = this;
 
         server = Traccar.app.getServer();
 
         type = Traccar.app.getPreference('map', null);
         bingKey = server.get('bingKey');
+        locationIqKey = Traccar.app.getAttributePreference('locationIqKey', 'pk.0f147952a41c555a5b70614039fd148b');
 
         layer = new ol.layer.Group({
             title: Strings.mapLayer,
@@ -88,8 +89,35 @@ Ext.define('Traccar.view.map.BaseMap', {
                 new ol.layer.Tile({
                     title: Strings.mapOsm,
                     type: 'base',
-                    visible: type === 'osm' || type === 'wikimedia' || !type,
+                    visible: type === 'osm',
                     source: new ol.source.OSM({})
+                }),
+                new ol.layer.Tile({
+                    title: Strings.mapLocationIqHybrid,
+                    type: 'base',
+                    visible: type === 'locationIqHybrid',
+                    source: new ol.source.XYZ({
+                        url: 'https://{a-c}-tiles.locationiq.com/v3/hybrid/r/{z}/{x}/{y}.jpg?key=' + locationIqKey,
+                        attributions: '&copy; <a href="https://locationiq.com/">LocationIQ</a>'
+                    })
+                }),
+                new ol.layer.Tile({
+                    title: Strings.mapLocationIqEarth,
+                    type: 'base',
+                    visible: type === 'locationIqEarth',
+                    source: new ol.source.XYZ({
+                        url: 'https://{a-c}-tiles.locationiq.com/v3/earth/r/{z}/{x}/{y}.jpg?key=' + locationIqKey,
+                        attributions: '&copy; <a href="https://locationiq.com/">LocationIQ</a>'
+                    })
+                }),
+                new ol.layer.Tile({
+                    title: Strings.mapLocationIqStreets,
+                    type: 'base',
+                    visible: type === 'locationIqStreets' || type === 'wikimedia' || !type,
+                    source: new ol.source.XYZ({
+                        url: 'https://{a-c}-tiles.locationiq.com/v3/streets/r/{z}/{x}/{y}.png?key=' + locationIqKey,
+                        attributions: '&copy; <a href="https://locationiq.com/">LocationIQ</a>'
+                    })
                 })
             ]
         });
diff --git a/web/app/view/map/Map.js b/web/app/view/map/Map.js
index fbaa758..36e81de 100644
--- a/web/app/view/map/Map.js
+++ b/web/app/view/map/Map.js
@@ -66,6 +66,13 @@ Ext.define('Traccar.view.map.Map', {
             stateId: 'show-geofences-button',
             tooltip: Strings.sharedGeofences
         }, {
+            handler: 'showAccuracy',
+            reference: 'showAccuracyButton',
+            glyph: 'xf140@FontAwesome',
+            pressed: true,
+            stateId: 'show-accuracy-button',
+            tooltip: Strings.positionAccuracy
+        }, {
             handler: 'showCurrentLocation',
             glyph: 'xf124@FontAwesome',
             tooltip: Strings.mapCurrentLocation
@@ -95,6 +102,10 @@ Ext.define('Traccar.view.map.Map', {
         return this.accuracySource;
     },
 
+    getAccuracyLayer: function () {
+        return this.accuracyLayer;
+    },
+
     getRouteSource: function () {
         return this.routeSource;
     },
@@ -133,10 +144,11 @@ Ext.define('Traccar.view.map.Map', {
         }));
 
         this.accuracySource = new ol.source.Vector({});
-        this.map.addLayer(new ol.layer.Vector({
+        this.accuracyLayer = new ol.layer.Vector({
             name: 'accuracyLayer',
             source: this.accuracySource
-        }));
+        });
+        this.map.addLayer(this.accuracyLayer);
 
         this.markersSource = new ol.source.Vector({});
         this.map.addLayer(new ol.layer.Vector({
diff --git a/web/app/view/map/MapController.js b/web/app/view/map/MapController.js
index 7ba0ee3..d025b58 100644
--- a/web/app/view/map/MapController.js
+++ b/web/app/view/map/MapController.js
@@ -68,6 +68,10 @@ Ext.define('Traccar.view.map.MapController', {
         this.getView().getLiveRouteLayer().setVisible(button.pressed);
     },
 
+    showAccuracy: function (button) {
+        this.getView().getAccuracyLayer().setVisible(button.pressed);
+    },
+
     getMapState: function () {
         var zoom, center, projection;
         projection = this.getView().getMapView().getProjection();