Allow map layer selection

2 files changed, 22 insertions, 4 deletions

diff --git a/web/app/store/MapTypes.js b/web/app/store/MapTypes.js
index 09636e3a0..ef63fd92b 100644
--- a/web/app/store/MapTypes.js
+++ b/web/app/store/MapTypes.js
@@ -19,6 +19,7 @@ Ext.define('Traccar.store.MapTypes', {
     fields: ['key', 'name'],
     data : [
         {'key': 'osm', 'name': strings.map_osm},
-        {'key': 'bing', 'name': strings.map_bing}
+        {'key': 'bingRoad', 'name': strings.map_bing_road},
+        {'key': 'bingAerial', 'name': strings.map_bing_aerial}
     ]
 });
diff --git a/web/app/view/map/Map.js b/web/app/view/map/Map.js
index bf1f1328b..b4fa8338f 100644
--- a/web/app/view/map/Map.js
+++ b/web/app/view/map/Map.js
@@ -30,9 +30,26 @@ Ext.define('Traccar.view.map.Map', {
     listeners: {
         afterrender: function() {
 
-            var layer = new ol.layer.Tile({ source: new ol.source.OSM({
-            })});
-            
+            var layer;
+            var mapLayer = Traccar.getApplication().getUser().get('map') || Traccar.getApplication().getServer().get('map');
+
+            var bindKey = 'AseEs0DLJhLlTNoxbNXu7DGsnnH4UoWuGue7-irwKkE3fffaClwc9q_Mr6AyHY8F';
+
+            if (mapLayer === 'bingRoad') {
+                var layer = new ol.layer.Tile({ source: new ol.source.BingMaps({
+                    key: bindKey,
+                    imagerySet: 'Road'
+                })});
+            } else if (mapLayer === 'bingAerial') {
+                var layer = new ol.layer.Tile({ source: new ol.source.BingMaps({
+                    key: bindKey,
+                    imagerySet: 'Aerial'
+                })});
+            } else {
+                layer = new ol.layer.Tile({ source: new ol.source.OSM({
+                })});
+            }
+
             this.vectorSource = new ol.source.Vector({});
             var vectorLayer = new ol.layer.Vector({
                 source: this.vectorSource