feat: allow map API key configuration (#765)

Author: raphaelscholle

README.md

@@ -87,6 +87,12 @@ cd build
 qmake ..
 ```
 
+### Map API Key
+
+Some map providers such as Mapbox require an API key. The map widget now
+includes a **Map API key** field in its settings menu where you can paste
+your key so those providers can load correctly.
+
 ## Contributing
 
 **Thanks to all the people who have contributed !**

qml/ui/elements/AppSettings.qml

@@ -338,6 +338,7 @@ Settings {
     property bool show_gpio: false
     property int selected_map_provider: 0
     property int selected_map_variant: 0
+    property string map_api_key: ""
 
     property bool show_vibration: false
 

qml/ui/widgets/map/MapWidget.qml

@@ -22,13 +22,11 @@ MapWidgetForm {
     property variant map
 
     Component.onCompleted: {
-        // TODO: Figure out how we can get better (terrain) maps
-        if(false){
-            pluginModel.append({
-                                   "name": "mapboxgl",
-                                   "description": "MapboxGL"
-                               })
-        }
+        // Add additional map providers
+        pluginModel.append({
+                               "name": "mapboxgl",
+                               "description": "MapboxGL"
+                           })
         // Consti10: This way we need a restart of QOpenHD when the map is enabled, but we
         // save some performance in case the map is not enabled
         if(settings.show_map){
@@ -64,13 +62,17 @@ MapWidgetForm {
     function createMap(parent, provider) {
         console.log("createMap(" + provider + ")");
         var plugin
+        var pluginParameters = ""
+        if (provider === "mapboxgl") {
+            pluginParameters = 'PluginParameter { name: "mapbox.access_token"; value: "' + settings.map_api_key + '" }'
+        } else if (provider === "osm") {
+            pluginParameters = 'PluginParameter { name: "osm.mapping.custom.host"; value: "https://tile.openstreetmap.org/" }'
+        }
         plugin = Qt.createQmlObject(`
                                     import QtLocation 5.15
                                     Plugin {
                                     name: "` + provider + `"
-                                    PluginParameter {
-                                    name: "osm.mapping.custom.host";
-                                    value: "https://tile.openstreetmap.org/" }
+                                    ` + pluginParameters + `
                                     }
                                     `, mapWidget);
         console.log("Using plugin: " + plugin.name);

qml/ui/widgets/map/MapWidgetForm.ui.qml

@@ -32,6 +32,7 @@ BaseWidget {
     property alias widgetInnerMap: widgetInnerMap
     property alias sidebar_wrapper: sidebar_wrapper
     property alias pluginModel: pluginModel
+    property alias apiKeyField: apiKeyField
 
     defaultAlignment: 1
     defaultXOffset: 12
@@ -535,6 +536,16 @@ BaseWidget {
 
                     }
 
+                    TextField {
+                        id: apiKeyField
+                        height: 48
+                        width: parent.width
+                        placeholderText: qsTr("Map API key")
+                        text: settings.map_api_key
+                        visible: pluginModel.get(providerDropdown.currentIndex).name === "mapboxgl"
+                        onEditingFinished: settings.map_api_key = text
+                    }
+
                     ComboBox {
                         id: variantDropdown
                         height: 48