When use magnetometer, add North symbol to GPS position icon (#3484)

* Add North when use magnetometer

* Update src/js/tabs/map.js

Co-authored-by: Mark Haslinghuis <mark@numloq.nl>

---------

Co-authored-by: Mark Haslinghuis <mark@numloq.nl>

locales/en/messages.json

@@ -2707,6 +2707,10 @@
     "gpsFixFalse": {
         "message": "False"
     },
+    "gpsPositionUnit": {
+        "message": "deg",
+        "description": "Unit for GPS position."
+    },
     "gpsAltitude": {
         "message": "Altitude:"
     },

package.json

@@ -40,6 +40,7 @@
           "/js/libraries/openlayers/ol.css",
           "/js/libraries/openlayers/ol.js",
           "/images/icons/cf_icon_position.png",
+          "/images/icons/cf_icon_position_mag.png",
           "/images/icons/cf_icon_position_nofix.png"
         ]
       }

src/js/tabs/gps.js

@@ -193,10 +193,11 @@ gps.initialize = async function (callback) {
             $('.GPS_info span.colorToggle').text(FC.GPS_DATA.fix ? i18n.getMessage('gpsFixTrue') : i18n.getMessage('gpsFixFalse'));
             $('.GPS_info span.colorToggle').toggleClass('ready', FC.GPS_DATA.fix != 0);
 
+            const gspUnitText = i18n.getMessage('gpsPositionUnit');
             $('.GPS_info td.alt').text(`${alt} m`);
-            $('.GPS_info td.lat a').prop('href', url).text(`${lat.toFixed(4)} deg`);
+            $('.GPS_info td.lat a').prop('href', url).text(`${lat.toFixed(4)} ${gspUnitText}`);
-            $('.GPS_info td.lon a').prop('href', url).text(`${lon.toFixed(4)} deg`);
+            $('.GPS_info td.lon a').prop('href', url).text(`${lon.toFixed(4)} ${gspUnitText}`);
-            $('.GPS_info td.heading').text(`${headingDeg.toFixed(4)} deg`);
+            $('.GPS_info td.heading').text(`${headingDeg.toFixed(4)} ${gspUnitText}`);
             $('.GPS_info td.speed').text(`${FC.GPS_DATA.speed} cm/s`);
             $('.GPS_info td.sats').text(FC.GPS_DATA.numSat);
             $('.GPS_info td.distToHome').text(`${FC.GPS_DATA.distanceToHome} m`);
@@ -279,15 +280,16 @@ gps.initialize = async function (callback) {
                 $('#connect').hide();
 
                 if (FC.GPS_DATA.fix) {
-                   gpsWasFixed = true;
+                    gpsWasFixed = true;
+                    message.action = hasMag ? 'centerMag' : 'center';
                     if (!!frame.contentWindow) {
-                        frame.contentWindow.postMessage(message, '*');
+                      frame.contentWindow.postMessage(message, '*');
                     }
-                   $('#loadmap').show();
+                    $('#loadmap').show();
-                   $('#waiting').hide();
+                    $('#waiting').hide();
                 } else if (!gpsWasFixed) {
-                   $('#loadmap').hide();
+                    $('#loadmap').hide();
-                   $('#waiting').show();
+                    $('#waiting').show();
                 } else {
                     message.action = 'nofix';
                     if (!!frame.contentWindow) {

src/js/tabs/map.js

@@ -1,13 +1,16 @@
+
 const DEFAULT_ZOOM = 16,
       DEFAULT_LON = 0,
       DEFAULT_LAT = 0,
-      ICON_IMAGE = '/images/icons/cf_icon_position.png',
+      ICON_IMAGE_GPS = '/images/icons/cf_icon_position.png',
+      ICON_IMAGE_MAG = '/images/icons/cf_icon_position_mag.png',
       ICON_IMAGE_NOFIX = '/images/icons/cf_icon_position_nofix.png';
 
 let iconGeometry,
     map,
     mapView,
-    iconStyle,
+    iconStyleGPS,
+    iconStyleMag,
     iconStyleNoFix,
     iconFeature;
 
@@ -33,11 +36,18 @@ function initializeMap() {
         controls: [],
       });
 
-    const icon = new ol.style.Icon(({
+      const iconGPS = new ol.style.Icon(({
         anchor: [0.5, 1],
         opacity: 1,
         scale: 0.5,
-        src: ICON_IMAGE,
+        src: ICON_IMAGE_GPS,
+    }));
+
+    const iconMag = new ol.style.Icon(({
+        anchor: [0.5, 1],
+        opacity: 1,
+        scale: 0.5,
+        src: ICON_IMAGE_MAG,
     }));
 
     const iconNoFix = new ol.style.Icon(({
@@ -47,8 +57,12 @@ function initializeMap() {
         src: ICON_IMAGE_NOFIX,
     }));
 
-    iconStyle = new ol.style.Style({
+    iconStyleGPS = new ol.style.Style({
-        image: icon,
+        image: iconGPS,
+    });
+
+    iconStyleMag = new ol.style.Style({
+        image: iconMag,
     });
 
     iconStyleNoFix = new ol.style.Style({
@@ -60,7 +74,7 @@ function initializeMap() {
         geometry: iconGeometry,
     });
 
-    iconFeature.setStyle(iconStyle);
+    iconFeature.setStyle(iconStyleGPS);
 
     const vectorSource = new ol.source.Vector({
         features: [iconFeature],
@@ -87,6 +101,8 @@ function processMapEvents(e) {
                 break;
 
             case 'center':
+            case 'centerMag':
+                const iconStyle = e.data.action == 'centerMag' ? iconStyleMag : iconStyleGPS;
                 iconFeature.setStyle(iconStyle);
                 const center = ol.proj.fromLonLat([e.data.lon, e.data.lat]);
                 mapView.setCenter(center);

src/js/tabs/setup.js

@@ -432,9 +432,10 @@ setup.initialize = function (callback) {
             gpsFix_e.text(FC.GPS_DATA.fix ? i18n.getMessage('gpsFixTrue') : i18n.getMessage('gpsFixFalse'));
             gpsFix_e.toggleClass('ready', FC.GPS_DATA.fix != 0);
 
+            const gspUnitText = i18n.getMessage('gpsPositionUnit');
             gpsSats_e.text(FC.GPS_DATA.numSat);
-            gpsLat_e.text(`${(FC.GPS_DATA.lat / 10000000).toFixed(4)} deg`);
+            gpsLat_e.text(`${(FC.GPS_DATA.lat / 10000000).toFixed(4)} ${gspUnitText}`);
-            gpsLon_e.text(`${(FC.GPS_DATA.lon / 10000000).toFixed(4)} deg`);
+            gpsLon_e.text(`${(FC.GPS_DATA.lon / 10000000).toFixed(4)} ${gspUnitText}`);
         }
 
         function get_fast_data() {