Merge pull request #53 from NightHawk32/gps

Map is now zoomable via buttons and map shows on satfix and updates the marker position

manifest.json

@@ -19,8 +19,7 @@
     },
 
     "sandbox": {
-    "pages": [
-      "tabs/map.html"]
+    "pages": ["tabs/map.html"]
     },
          
         "permissions": [

tabs/gps.html

@@ -159,8 +159,11 @@
                 </div>
             </div>
                 <div id="loadmap">
-                    <iframe src="tabs/map.html"></iframe>
-                    <div class="controls"><a href="#" id="">+</a><a href="#" id="">–</a></div>
+                    <iframe src="tabs/map.html" id="map"></iframe>
+                    <div class="controls">
+                          <a href="#" id="zoom_in">+</a>
+                          <a href="#" id="zoom_out">–</a>
+                    </div>
                 </div>
         </div>
 

tabs/gps.js

@@ -14,9 +14,21 @@ TABS.gps.initialize = function (callback) {
     }
 
     MSP.send_message(MSP_codes.MSP_STATUS, false, false, load_html);
-
+    
+    function set_online(){
+        $('#connect').hide();
+        $('#waiting').show();
+        $('#loadmap').show();
+    }
+    
+    function set_offline(){
+        $('#connect').show();
+        $('#waiting').hide();
+        $('#loadmap').hide();
+    }
+    
     function process_html() {
-        // translate to user-selected language
+        // translate to user-selected languageconsole.log('Online');
         localize();
 
         function get_raw_gps_data() {
@@ -54,13 +66,29 @@ TABS.gps.initialize = function (callback) {
                 $('td', row).eq(1).text(GPS_DATA.quality[i]);
                 $('td', row).eq(2).find('progress').val(GPS_DATA.cno[i]);
             }
+            
+            var message = {
+                action: 'center',
+                lat: lat,
+                lon: lon,
+            };
+
+            var frame = document.getElementById('map');
+            if(lat != 0 && lon != 0){
+                frame.contentWindow.postMessage(message, '*');
+                $('#waiting').hide();
+                $('#loadmap').show();
+            }else{
+                $('#loadmap').hide();
+                $('#waiting').show();
+            }
         }
 
         // enable data pulling
         GUI.interval_add('gps_pull', function gps_update() {
             // avoid usage of the GPS commands until a GPS sensor is detected for targets that are compiled without GPS support.
             if (!have_sensor(CONFIG.activeSensors, 'gps')) {
-                return;
+                //return;
             }
             
             get_raw_gps_data();
@@ -72,37 +100,42 @@ TABS.gps.initialize = function (callback) {
         }, 250, true);
 
 
-//check for internet connection on load
-if (navigator.onLine) {
-  console.log('Online');
-  $('#connect').hide();
-  $('#waiting').show();
-  $('#loadmap').show();
+        //check for internet connection on load
+        if (navigator.onLine) {
+            console.log('Online');
+            set_online();
+        } else {
+            console.log('Offline');
+            set_offline();
+        }
 
-} else {
-  console.log('Offline');
-  $('#connect').show();
-  $('#waiting').hide();
-  $('#loadmap').hide();
+        $("#check").on('click',function(){
+            if (navigator.onLine) {
+                console.log('Online');
+                set_online();
+            } else {
+                console.log('Offline');
+                set_offline();
+            }
+        });
 
-}
+        var frame = document.getElementById('map');
 
-$("#check").on('click',function(){
-if (navigator.onLine) {
-  console.log('Online');
-  $('#connect').hide();
-  $('#waiting').show();
-  $('#loadmap').show();
-
-} else {
-  console.log('Offline');
-  $('#connect').show();
-  $('#waiting').hide();
-  $('#loadmap').hide();
-
-  }
- });
- 
+        $('#zoom_in').click(function() {
+            console.log('zoom in');
+            var message = {
+                action: 'zoom_in',
+            };
+            frame.contentWindow.postMessage(message, '*');
+        });
+        
+        $('#zoom_out').click(function() {
+            console.log('zoom out');
+            var message = {
+                action: 'zoom_out'
+            };
+            frame.contentWindow.postMessage(message, '*');
+        });
  
         GUI.content_ready(callback);
     }

tabs/map.html

@@ -12,6 +12,31 @@
       }
     </style>
     <script>
+
+     window.addEventListener('message', function (e) {
+       var mainWindow = e.source;
+       var result = '';
+       try {
+         switch(e.data.action){
+            case 'zoom_in':
+              var zoom = map.getZoom();
+              zoom++;
+              map.setZoom(zoom);
+              break;
+              
+            case 'zoom_out':
+              var zoom = map.getZoom();
+              zoom--;
+              map.setZoom(zoom);
+              break;
+            case 'center':
+              map.setCenter(new google.maps.LatLng(e.data.lat, e.data.lon));
+         }
+       } catch (e) {
+         console.log('message error');
+       }
+     });
+     
   function loadMapScript() {
       var script = document.createElement('script');
       script.type = 'text/javascript';
@@ -23,9 +48,10 @@ window.onload = loadMapScript;
 
 var map;
 function initialize() {
+
   var mapOptions = {
     zoom: 17,
-    zoomControl: true,
+    zoomControl: false,
     streetViewControl: false,
  // mapTypeId: google.maps.MapTypeId.SATELLITE,
     center: {lat: 53.570645, lng: 10.001362}
@@ -57,6 +83,12 @@ var marker = new google.maps.Marker({
   google.maps.event.addListener(marker, 'click', function() {
     infowindow.open(map, marker);
   });
+  
+  window.addEventListener('message', function(e) {
+
+    var data = e.data;
+    var origin = e.origin;
+});
 }
   // sandbox docs1: https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/sandbox
   // sandbox docs1: https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/sandboxed-content