Add satellite layer and show map on latlon values

betaflight · Dec 20, 2023 · 345651e · 345651e
1 parent 7598c0a
commit 345651e
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 17 deletions.
diff --git a/locales/en/messages.json b/locales/en/messages.json
@@ -7027,6 +7027,22 @@
         "message": "None",
         "description": "One of the options selectable for the GPS SBAS system"
     },
+    "gpsMapTypeRoadmap": {
+        "message": "Roadmap",
+        "description": "One of the options selectable for the GPS map type"
+    },
+    "gpsMapTypeSatellite": {
+        "message": "Satellite",
+        "description": "One of the options selectable for the GPS map type"
+    },
+    "gpsMapTypeHybrid": {
+        "message": "Hybrid",
+        "description": "One of the options selectable for the GPS map type"
+    },
+    "gpsMapTypeTerrain": {
+        "message": "Terrain",
+        "description": "One of the options selectable for the GPS map type"
+    },
     "dialogFileNameTitle": {
         "message": "File name"
     },

diff --git a/src/js/tabs/gps.js b/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');
 
@@ -337,28 +334,23 @@ gps.initialize = async function (callback) {
             if (navigator.onLine) {
                 $('#connect').hide();
 
-                if (FC.GPS_DATA.fix) {
-                    gpsWasFixed = true;
+                const 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);
+                    set_offline();
                 }
-            } else {
-                gpsWasFixed = false;
-                set_offline();
+
+                $('#loadmap').toggle(gpsFoundPosition);
+                $('#waiting').toggle(!gpsFoundPosition);
             }
         }
 

diff --git a/src/js/tabs/map.js b/src/js/tabs/map.js
@@ -1,7 +1,7 @@
 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 { Group as LayerGroup, Tile, Vector as LayerVector } from "ol/layer";
+import { OSM, XYZ, Vector as SourceVector } from "ol/source";
 import { Icon, Style } from "ol/style";
 import { Point } from "ol/geom";
 
@@ -24,7 +24,24 @@ export function initMap() {
         target: "map",
         layers: [
             new Tile({
-                source: new OSM(),
+                source: new OSM({
+                    url: "https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=3a5a1a6c0d4e4f8a9c5b6c6f2b3f6e5f",
+                }),
+            }),
+            new LayerGroup({
+                layers: [
+                    new Tile({
+                        source: new XYZ({
+                            attributions: [
+                                'Powered by Esri',
+                                'Source: Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community',
+                            ],
+                            attributionsCollapsible: false,
+                            url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+                            maxZoom: DEFAULT_ZOOM,
+                        }),
+                    }),
+                ],
             }),
         ],
         view: mapView,

diff --git a/src/tabs/gps.html b/src/tabs/gps.html
@@ -134,6 +134,12 @@
                         <div class="info" i18n="gpsMapMessage2"></div>
                     </div>
                     <div id="loadmap">
+                        <div class="radioboxes" id="map-type-control">
+                            <label><input type="radio" name="map-type" /><span i18n="gpsMapTypeRoadmap"></span></label>
+                            <label><input type="radio" name="map-type" /><span i18n="gpsMapTypeSatellite"></span></label>
+                            <label><input type="radio" name="map-type" /><span i18n="gpsMapTypeHybrid"></span></label>
+                            <label><input type="radio" name="map-type" /><span i18n="gpsMapTypeTerrain"></span></label>
+                        </div>
                         <div id="map" class="map"> </div>
                         <div class="controls">
                             <a href="#" id="zoom_in">+</a>