Map provider choice on mission planner page

5 files changed, 84 insertions, 4 deletions

diff --git a/main.js b/main.js
index 57f2d40f..2e5ed087 100644
--- a/main.js
+++ b/main.js
@@ -11,10 +11,28 @@ googleAnalyticsService.getConfig().addCallback(function (config) {
 
 chrome.storage = chrome.storage || {};
 
+let globalSettings = {
+    mapProviderType: null,
+    mapApiKey: null
+};
+
 $(document).ready(function () {
     // translate to user-selected language
     localize();
 
+    chrome.storage.local.get('map_provider_type', function (result) {
+        if (typeof result.map_provider_type === 'undefined') {
+            result.map_provider_type = 'osm';
+        }
+        globalSettings.mapProviderType = result.map_provider_type;
+    });
+    chrome.storage.local.get('map_api_key', function (result) {
+        if (typeof result.map_api_key === 'undefined') {
+            result.map_api_key = '';
+        }
+        globalSettings.mapApiKey = result.map_api_key;
+    });
+
     // alternative - window.navigator.appVersion.match(/Chrome\/([0-9.]*)/)[1];
     GUI.log('Running - OS: <strong>' + GUI.operating_system + '</strong>, ' +
         'Chrome: <strong>' + window.navigator.appVersion.replace(/.*Chrome\/([0-9.]*).*/, "$1") + '</strong>, ' +
@@ -282,6 +300,22 @@ $(document).ready(function () {
                     googleAnalyticsConfig.setTrackingPermitted(check);
                 });
 
+                $('#map-provider-type').val(globalSettings.mapProviderType);
+                $('#map-api-key').val(globalSettings.mapApiKey);
+                
+                $('#map-provider-type').change(function () {
+                    chrome.storage.local.set({
+                        'map_provider_type': $(this).val()
+                    });
+                    globalSettings.mapProviderType = $(this).val();
+                });
+                $('#map-api-key').change(function () {
+                    chrome.storage.local.set({
+                        'map_api_key': $(this).val()
+                    });
+                    globalSettings.mapApiKey = $(this).val();
+                });
+
                 function close_and_cleanup(e) {
                     if (e.type == 'click' && !$.contains($('div#options-window')[0], e.target) || e.type == 'keyup' && e.keyCode == 27) {
                         $(document).unbind('click keyup', close_and_cleanup);
diff --git a/manifest.json b/manifest.json
index 58932b4e..70e9ff48 100644
--- a/manifest.json
+++ b/manifest.json
@@ -22,12 +22,13 @@
     "pages": ["tabs/map.html"]
     },
          
-        "permissions": [
+    "permissions": [
         "https://www.google-analytics.com/",
         "https://maps.googleapis.com/*",    
         "https://*.github.com/",
         "https://*.githubusercontent.com/",
         "https://*.amazonaws.com/",
+        "https://dev.virtualearth.net/",
         "serial",
         "usb",
         "storage",
diff --git a/tabs/map.html b/tabs/map.html
index b2af6cf4..b1637d55 100644
--- a/tabs/map.html
+++ b/tabs/map.html
@@ -4,7 +4,6 @@
     <title>Asynchronous Loading</title>
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
     <meta charset="utf-8">
-
     <link type="text/css" rel="stylesheet" href="../build/map.css" media="all"/>
     <script type="text/javascript" src="../build/map.js"></script>
 
@@ -43,11 +42,34 @@
             zoom: 15
         });
 
+        let globalSettings = {
+            mapProviderType: null,
+            mapApiKey: null
+        };
+
+        chrome.storage.local.get('map_provider_type', function (result) {
+            if (typeof result.map_provider_type === 'undefined') {
+                result.map_provider_type = 'osm';
+            }
+            globalSettings.mapProviderType = result.map_provider_type;
+        });
+        chrome.storage.local.get('map_api_key', function (result) {
+            if (typeof result.map_api_key === 'undefined') {
+                result.map_api_key = '';
+            }
+            globalSettings.mapApiKey = result.map_api_key;
+        });
+        console.log(globalSettings);
         var mapHandler = new ol.Map({
             target: 'map-canvas',
             layers: [
                 new ol.layer.Tile({
-                    source: new ol.source.OSM()
+                    // source: new ol.source.OSM()
+                    source: new ol.source.BingMaps({
+                        key: globalSettings.mapApiKey,
+                        imagerySet: 'AerialWithLabels',
+                        maxZoom: 19
+                    })
                 })
             ],
             view: mapView
diff --git a/tabs/mission_control.js b/tabs/mission_control.js
index 0a7c6aaf..3aa965bb 100644
--- a/tabs/mission_control.js
+++ b/tabs/mission_control.js
@@ -318,6 +318,18 @@ TABS.mission_control.initialize = function (callback) {
         var lat = GPS_DATA.lat / 10000000;
         var lon = GPS_DATA.lon / 10000000;
 
+        let mapLayer;
+
+        if (globalSettings.mapProviderType == 'bing') {
+            mapLayer = new ol.source.BingMaps({
+                key: globalSettings.mapApiKey,
+                imagerySet: 'AerialWithLabels',
+                maxZoom: 19
+            });
+        } else {
+            mapLayer = new ol.source.OSM();
+        }
+
         map = new ol.Map({
             controls: ol.control.defaults({
                 attributionOptions: {
@@ -329,7 +341,7 @@ TABS.mission_control.initialize = function (callback) {
             interactions: ol.interaction.defaults().extend([new app.Drag()]),
             layers: [
                 new ol.layer.Tile({
-                    source: new ol.source.OSM()
+                    source: mapLayer
                 })
             ],
             target: document.getElementById('missionMap'),
diff --git a/tabs/options.html b/tabs/options.html
index bf5d9d93..4a6bcf7d 100644
--- a/tabs/options.html
+++ b/tabs/options.html
@@ -4,3 +4,14 @@
 <div class="statistics">
     <label><input type="checkbox" /><span i18n="options_improve_configurator"></span></label>
 </div>
+<div>
+    <label for="map-provider-type">Map Provider</label>
+    <select id="map-provider-type">
+        <option value="osm">OpenStreetMap</option>
+        <option value="bing">Bing Maps</option>
+    </select>
+</div>
+<div>
+    <label for="map-api-key">Map API key</label>
+    <input type="password" id="map-api-key" style="border: solid 1px black"/>
+</div>