Merge pull request #798 from LucaGiovannesi/master

Fixed GPS map zoom issue

_locales/en/messages.json

@@ -3180,5 +3180,8 @@
     },
     "mc_airmode_threshold_help": {
         "message": "Defines airmode THROTTLE activation threshold when mc_airmode_type THROTTLE_THRESHOLD is used"
+    },
+    "gps_map_center": {
+        "message": "Center"
     }
 }

src/css/tabs/gps.css

@@ -50,6 +50,24 @@
     float: left;
 }
 
+.map-button {
+  z-index:1;
+  position: absolute;
+  background-color: #37A8DB;
+  color: white;
+  padding: 5px;
+  left: 10px;
+  bottom: 10px;
+  border-style: solid;
+  border-width: 2px;
+  border-color: #E4E4E4;
+  border-radius: 2px;
+  opacity: 0.8;
+}
+.map-button:hover {
+  opacity: 1;
+}
+
 .tab-gps #loadmap .controls {
     width: 100%;
     float: left;
@@ -99,6 +117,7 @@
     height: 400px;
     width: 100%;
     float: left;
+    position: relative;
 }
 
 /*noinspection ALL*/

tabs/gps.html

@@ -91,10 +91,12 @@
                     <div class="spacer_box_title" data-i18n="gpsMapHead"></div>
                 </div>
                 <div id="loadmap">
-                    <div id="gps-map"></div>
+                    <div id="gps-map">
+                      <button class="map-button" id="center_button" data-i18n="gps_map_center"></button>
+                    </div>
                 </div>
         </div>
 
     </div>
 </div>
-</div>
+</div>

tabs/gps.js

@@ -27,7 +27,7 @@ TABS.gps.initialize = function (callback) {
             center: ol.proj.fromLonLat([0, 0]),
             zoom: 15
         });
-        
+
         let mapLayer;
 
         if (globalSettings.mapProviderType == 'bing') {
@@ -40,11 +40,18 @@ TABS.gps.initialize = function (callback) {
         	mapLayer = new ol.source.TileWMS({
         		url: globalSettings.proxyURL,
                 params: {'LAYERS':globalSettings.proxyLayer}
-             })               
+             })
         } else {
             mapLayer = new ol.source.OSM();
         }
 
+        $("#center_button").click(function(){
+          let lat = GPS_DATA.lat / 10000000;
+          let lon = GPS_DATA.lon / 10000000;
+          let center = ol.proj.fromLonLat([lon, lat]);
+          mapView.setCenter(center);
+        });
+
         mapHandler = new ol.Map({
             target: document.getElementById('gps-map'),
             layers: [
@@ -82,7 +89,7 @@ TABS.gps.initialize = function (callback) {
             } else if (GPS_DATA.fix >= 1) {
                 gpsFixType = chrome.i18n.getMessage('gpsFix2D');
             }
-            
+
             $('.GPS_info td.fix').html(gpsFixType);
             $('.GPS_info td.alt').text(GPS_DATA.alt + ' m');
             $('.GPS_info td.lat').text(lat.toFixed(4) + ' deg');
@@ -107,6 +114,8 @@ TABS.gps.initialize = function (callback) {
             //Update map
             if (GPS_DATA.fix >= 2) {
 
+                let center = ol.proj.fromLonLat([lon, lat]);
+
                 if (!cursorInitialized) {
                     cursorInitialized = true;
 
@@ -118,29 +127,30 @@ TABS.gps.initialize = function (callback) {
                             src: '../images/icons/cf_icon_position.png'
                         }))
                     });
-            
+
                     let currentPositionLayer;
                     iconGeometry = new ol.geom.Point(ol.proj.fromLonLat([0, 0]));
                     iconFeature = new ol.Feature({
                         geometry: iconGeometry
                     });
-            
+
                     iconFeature.setStyle(iconStyle);
-            
+
                     let vectorSource = new ol.source.Vector({
                         features: [iconFeature]
                     });
                     currentPositionLayer = new ol.layer.Vector({
                         source: vectorSource
                     });
-            
+
                     mapHandler.addLayer(currentPositionLayer);
+                    
+                    mapView.setCenter(center);
+                    mapView.setZoom(14);
                 }
 
-                let center = ol.proj.fromLonLat([lon, lat]);
-                mapView.setCenter(center);
-                mapView.setZoom(14);
                 iconGeometry.setCoordinates(center);
+
             }
         }
 
@@ -169,4 +179,4 @@ TABS.gps.initialize = function (callback) {
 
 TABS.gps.cleanup = function (callback) {
     if (callback) callback();
-};
+};