Improve map screen UX: toggle button, title fix, configurable data overlay

src/GoogleMap.qml

@@ -6,7 +6,6 @@ import Qt.labs.settings 1.0
 import QtWebView 1.1
 
 ColumnLayout {
-    signal popupclose()
     id: column1
     spacing: 10
     anchors.fill: parent
@@ -25,19 +24,6 @@ ColumnLayout {
         }
     }
 
-    Button {
-        id: closeButton
-        height: 50
-        width: parent.width
-        text: "Close"
-        Layout.alignment: Qt.AlignCenter | Qt.AlignVCenter
-        onClicked: {
-            popupclose();
-        }
-        anchors {
-            bottom: parent.bottom
-        }
-    }
      Component.onCompleted: {
          headerToolbar.visible = true;
      }

src/inner_templates/googlemaps/maps.htm

@@ -92,6 +92,51 @@
     let lastBikeHeight = 0
     let firstTime = 0
 
+    function isTrueSetting(value) {
+        return value === true || value === 'true' || value === 1 || value === '1';
+    }
+
+    let mapMetricSettings = {
+        speed: true, cadence: true, heart: true, calories: true, odometer: true,
+        watt: true, elapsed: true, inclination: true, resistance: true, altitude: true, elevation: true
+    };
+
+    function loadMapMetricSettings() {
+        // Reuse the same enable/disable switches as the main Tiles settings,
+        // instead of introducing separate settings for the map's data box.
+        let settingKeys = ['tile_speed_enabled', 'tile_cadence_enabled', 'tile_heart_enabled',
+            'tile_calories_enabled', 'tile_odometer_enabled', 'tile_watt_enabled',
+            'tile_elapsed_enabled', 'tile_inclination_enabled', 'tile_resistance_enabled',
+            'tile_elevation_enabled'];
+        let el = new MainWSQueueElement({
+            msg: 'getsettings',
+            content: { keys: settingKeys }
+        }, function(msg) {
+            if (msg.msg === 'R_getsettings') {
+                return msg.content;
+            }
+            return null;
+        }, 15000, 3);
+        el.enqueue().then(function(content) {
+            if (!content) return;
+            mapMetricSettings.speed = isTrueSetting(content['tile_speed_enabled']);
+            mapMetricSettings.cadence = isTrueSetting(content['tile_cadence_enabled']);
+            mapMetricSettings.heart = isTrueSetting(content['tile_heart_enabled']);
+            mapMetricSettings.calories = isTrueSetting(content['tile_calories_enabled']);
+            mapMetricSettings.odometer = isTrueSetting(content['tile_odometer_enabled']);
+            mapMetricSettings.watt = isTrueSetting(content['tile_watt_enabled']);
+            mapMetricSettings.elapsed = isTrueSetting(content['tile_elapsed_enabled']);
+            mapMetricSettings.inclination = isTrueSetting(content['tile_inclination_enabled']);
+            mapMetricSettings.resistance = isTrueSetting(content['tile_resistance_enabled']);
+            // No dedicated "altitude" tile exists; tie it to the elevation tile switch.
+            mapMetricSettings.altitude = isTrueSetting(content['tile_elevation_enabled']);
+            mapMetricSettings.elevation = isTrueSetting(content['tile_elevation_enabled']);
+        }).catch(function(err) {
+            console.error('Error is ' + err);
+        });
+    }
+    loadMapMetricSettings();
+
     function a() {
     onWorkout = false;
     let el = new MainWSQueueElement({
@@ -153,7 +198,19 @@
 																}
 				}
 
-            $('#metricsText').html("🏃Speed: " + speed.toFixed(2) + "<br>🚴Cadence:" + cadence.toFixed(0) + "<br>💓Heart:"+ hr.toFixed(0) + "<br>🔥Calories:"+ calories.toFixed(1) + "<br>📏Odometer:"+ odometer.toFixed(2) + "<br>⚡Watt:"+ watt.toFixed(0) + "<br>⏲️Elapsed:"+ elapsed_h.toString().padStart(2, "0") + ":" + elapsed_m.toString().padStart(2, "0") + ":"+ elapsed_s.toString().padStart(2, "0") + "<br>📐Inclination:"+ inclination.toFixed(1) + "<br>🧲Resistance:"+ resistance.toFixed(0) + "<br>✈️Altitude:"+ altitude.toFixed(1) + "<br>⛰️Elevation:"+ elevation.toFixed(2));
+            let metricsLines = [];
+            if (mapMetricSettings.speed) metricsLines.push("🏃Speed: " + speed.toFixed(2));
+            if (mapMetricSettings.cadence) metricsLines.push("🚴Cadence:" + cadence.toFixed(0));
+            if (mapMetricSettings.heart) metricsLines.push("💓Heart:" + hr.toFixed(0));
+            if (mapMetricSettings.calories) metricsLines.push("🔥Calories:" + calories.toFixed(1));
+            if (mapMetricSettings.odometer) metricsLines.push("📏Odometer:" + odometer.toFixed(2));
+            if (mapMetricSettings.watt) metricsLines.push("⚡Watt:" + watt.toFixed(0));
+            if (mapMetricSettings.elapsed) metricsLines.push("⏲️Elapsed:" + elapsed_h.toString().padStart(2, "0") + ":" + elapsed_m.toString().padStart(2, "0") + ":" + elapsed_s.toString().padStart(2, "0"));
+            if (mapMetricSettings.inclination) metricsLines.push("📐Inclination:" + inclination.toFixed(1));
+            if (mapMetricSettings.resistance) metricsLines.push("🧲Resistance:" + resistance.toFixed(0));
+            if (mapMetricSettings.altitude) metricsLines.push("✈️Altitude:" + altitude.toFixed(1));
+            if (mapMetricSettings.elevation) metricsLines.push("⛰️Elevation:" + elevation.toFixed(2));
+            $('#metricsText').html(metricsLines.join("<br>"));
 		  }
 		  return null;
 		}, 15000, 3);

src/main.qml

@@ -1098,6 +1098,11 @@ ApplicationWindow {
 
         ToolButton {
             function loadMaps() {
+                if(stackView.currentItem === googleMapUI.item) {
+                    console.log("map is already open, closing it");
+                    stackView.pop();
+                    return;
+                }
                 if(rootItem.currentCoordinateValid) {
                     console.log("coordinate is valid for map");
                     if(googleMapUI.status === Loader.Ready)
@@ -1114,7 +1119,7 @@ ApplicationWindow {
             onClicked: { loadMaps(); }
             anchors.right: toolButtonChart.left
             visible: rootItem.mapsVisible
-        }      
+        }
 
         ToolButton {
             function loadVideo() {
@@ -1160,7 +1165,13 @@ ApplicationWindow {
 
         Label {
             text: stackView.currentItem.title
-            anchors.centerIn: parent
+            anchors.left: toolButton.right
+            anchors.right: toolButtonAutoResistance.left
+            anchors.leftMargin: 8
+            anchors.rightMargin: 8
+            anchors.verticalCenter: parent.verticalCenter
+            horizontalAlignment: Text.AlignHCenter
+            elide: Text.ElideRight
         }
     }
 

src/settings.qml

@@ -14663,6 +14663,14 @@ import AndroidStatusBar 1.0
                         Layout.fillWidth: true
                         onClicked: settings.gpx_loop = checked
                     }
+
+                    Label {
+                        text: qsTr("The metrics shown in the map's data box follow the same on/off switches as the Tiles settings.")
+                        Layout.topMargin: 10
+                        Layout.fillWidth: true
+                        wrapMode: Text.WordWrap
+                        font.italic: true
+                    }
                 }
             }