Add satellite layer and show map on latlon values (betaflight#3685)

* Add satellite layer and show map on latlon values

* Use controls

* Hide all layers initially except OSM

* Remove debug location

* Add some layer tag and update switching

* Remove debug

* Remove layerGroup

* Remove commented code

* Remove maxzoom

* Remove bloat and increase default zoom level

* Use buttons instead of anchors

* Remove class

* Remove unused messages

Author: haslinghuis

locales/en/messages.json

@@ -2802,10 +2802,6 @@
     "gpsMapHead": {
         "message": "Current GPS location"
     },
-    "gpsMapHeadHelp": {
-        "message": "Show GPS location on the map. Use mouse scroll button to zoom in and out.<br>The location icon shows the north direction when the magnetometer is in use",
-        "description": "Help text for gpsHeadMap"
-    },
     "gpsMapMessage1": {
         "message": "Please check your internet connection"
     },

src/css/tabs/gps.less

@@ -168,13 +168,11 @@
 			border-bottom-left-radius: 3px;
 			border-bottom-right-radius: 3px;
 			background-color: #D1D1D1;
-			a {
+			button {
 				background-color: white;
 				border-radius: 4px;
 				border: 1px var(--subtleAccent) solid;
 				color: grey;
-				height: 10px;
-				width: 10px;
 				text-align: center;
 				font-size: 20px;
 				line-height: 10px;

src/js/tabs/gps.js

@@ -79,9 +79,6 @@ gps.initialize = async function (callback) {
             MSP.send_message(MSPCodes.MSP_RAW_IMU, false, false, update_ui);
         }
 
-        // To not flicker the divs while the fix is unstable
-        let gpsWasFixed = false;
-
         // GPS Configuration
         const features_e = $('.tab-gps .features');
 
@@ -334,32 +331,30 @@ gps.initialize = async function (callback) {
                 }
             }
 
+            let gpsFoundPosition = false;
+
             if (navigator.onLine) {
                 $('#connect').hide();
 
-                if (FC.GPS_DATA.fix) {
-                    gpsWasFixed = true;
+                gpsFoundPosition = !!(lon && lat);
 
+                if (gpsFoundPosition) {
                     (hasMag ? iconStyleMag : iconStyleGPS)
                         .getImage()
                         .setRotation(imuHeadingRadians);
                     iconFeature.setStyle(hasMag ? iconStyleMag : iconStyleGPS);
                     const center = fromLonLat([lon, lat]);
                     mapView.setCenter(center);
                     iconGeometry.setCoordinates(center);
-
-                    $('#loadmap').show();
-                    $('#waiting').hide();
-                } else if (!gpsWasFixed) {
-                    $('#loadmap').hide();
-                    $('#waiting').show();
                 } else {
                     iconFeature.setStyle(iconStyleNoFix);
                 }
             } else {
-                gpsWasFixed = false;
                 set_offline();
             }
+
+            $('#loadmap').toggle(gpsFoundPosition);
+            $('#waiting').toggle(!gpsFoundPosition);
         }
 
         // enable data pulling

src/js/tabs/map.js

@@ -1,11 +1,11 @@
 import { View, Map, Feature } from "ol";
 import { fromLonLat } from "ol/proj";
 import { Tile, Vector as LayerVector } from "ol/layer";
-import { OSM, Vector as SourceVector } from "ol/source";
+import { OSM, XYZ, Vector as SourceVector } from "ol/source";
 import { Icon, Style } from "ol/style";
 import { Point } from "ol/geom";
 
-const DEFAULT_ZOOM = 16,
+const DEFAULT_ZOOM = 17,
     DEFAULT_LON = 0,
     DEFAULT_LAT = 0,
     ICON_IMAGE_GPS = "/images/icons/cf_icon_position.png",
@@ -20,12 +20,28 @@ export function initMap() {
         zoom: DEFAULT_ZOOM,
     });
 
+    const osmLayer = new Tile({
+        source: new OSM(),
+    });
+
+    const googleSatLayer = new Tile({
+        source: new XYZ({
+            url: 'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
+        }),
+    });
+
+    const googleHybridLayer = new Tile({
+        source: new XYZ({
+            url: 'https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}',
+        }),
+    });
+
     const map = new Map({
         target: "map",
         layers: [
-            new Tile({
-                source: new OSM(),
-            }),
+            osmLayer,
+            googleSatLayer,
+            googleHybridLayer,
         ],
         view: mapView,
         controls: [],
@@ -82,6 +98,34 @@ export function initMap() {
 
     map.addLayer(currentPositionLayer);
 
+    // Start with Satellite layer
+    osmLayer.setVisible(false);
+    googleHybridLayer.setVisible(false);
+
+    $('#Hybrid').on('click', function () {
+        if (!googleHybridLayer.isVisible()) {
+            osmLayer.setVisible(false);
+            googleSatLayer.setVisible(false);
+            googleHybridLayer.setVisible(true);
+        }
+    });
+
+    $('#Satellite').on('click', function () {
+        if (!googleSatLayer.isVisible()) {
+            osmLayer.setVisible(false);
+            googleSatLayer.setVisible(true);
+            googleHybridLayer.setVisible(false);
+        }
+    });
+
+    $('#Street').on('click', function () {
+        if (!osmLayer.isVisible()) {
+            osmLayer.setVisible(true);
+            googleSatLayer.setVisible(false);
+            googleHybridLayer.setVisible(false);
+        }
+    });
+
     return {
         mapView,
         iconStyleMag,

src/tabs/gps.html

@@ -125,7 +125,6 @@
                 <div class="gui_box grey gps_map">
                     <div class="gui_box_titlebar" style="margin-bottom: 0px;">
                         <div class="spacer_box_title" i18n="gpsMapHead"></div>
-                        <div class="helpicon cf_tip" i18n_title="gpsMapHeadHelp"></div>
                     </div>
                     <div id="connect" i18n="gpsMapMessage1">
                         <div class="default_btn" style="width:50px; margin-left:auto; margin-right:auto; float:none;"><a id="check">retry</a></div>
@@ -135,9 +134,13 @@
                     </div>
                     <div id="loadmap">
                         <div id="map" class="map"> </div>
+
                         <div class="controls">
-                            <a href="#" id="zoom_in">+</a>
-                            <a href="#" id="zoom_out">–</a>
+                            <button id="Hybrid">H</button>
+                            <button id="Satellite">S</button>
+                            <button id="Street">R</button>
+                            <button id="zoom_in">+</button>
+                            <button id="zoom_out">–</button>
                         </div>
                     </div>
                 </div>