Make coordinates clickable everywhere (projecthorus#338)

Author: argilo

js/app.js

@@ -445,6 +445,25 @@ var format_time_friendly = function(start, end) {
     }
 };
 
+var format_coordinates = function(lat, lon, name) {
+    var coords_text;
+    var ua =  navigator.userAgent.toLowerCase();
+  
+    // determine how to link the coordinates to a native app, if on a mobile device
+    if(ua.indexOf('iphone') > -1) {
+        coords_text = '<a href="maps://?q='+lat+','+lon+'">' +
+                      roundNumber(lat, 5) + ', ' + roundNumber(lon, 5) +'</a>';
+    } else if(ua.indexOf('android') > -1) {
+        coords_text = '<a href="geo:'+lat+','+lon+'?q='+lat+','+lon+'('+name+')">' +
+                      roundNumber(lat, 5) + ', ' + roundNumber(lon, 5) +'</a>';
+    } else {
+        coords_text = '<a href="https://www.google.com/maps/search/?api=1&query='+lat+','+lon+'" target="_blank" rel="noopener noreferrer">' +
+            roundNumber(lat, 5) + ', ' + roundNumber(lon, 5) +'</a>';
+    }
+
+    return coords_text;
+};
+
 // runs every second
 var updateTime = function(date) {
     // update timebox
@@ -553,12 +572,6 @@ $(window).ready(function() {
         $("#main").removeClass("drag");
     });
 
-    // confirm dialog when launchnig a native map app with coordinates
-    //$('#main').on('click', '#launch_mapapp', function() {
-    //    var answer = confirm("Launch your maps app?");
-    //    return answer;
-    //});
-
     // follow vehicle by clicking on data
     $('#main').on('click', '.row .data', function() {
         var e = $(this).parent();

js/station.js

@@ -179,7 +179,7 @@ function drawHistorical (data, station) {
         html = "<div style='line-height:16px;position:relative;'>";
         html += "<div>"+serial+" <span style=''>("+time+")</span></div>";
         html += "<hr style='margin:5px 0px'>";
-        html += "<div><b>Last Position:&nbsp;</b>"+roundNumber(landing.lat, 5) + ',&nbsp;' + roundNumber(landing.lon, 5)+"</div>";
+        html += "<div><b>Last Position:&nbsp;</b>"+format_coordinates(landing.lat, landing.lon, serial)+"</div>";
 
         var imp = offline.get('opt_imperial');
         var text_alt = Number((imp) ? Math.floor(3.2808399 * parseInt(landing.alt)) : parseInt(landing.alt)).toLocaleString("us");

js/tracker.js

@@ -1799,23 +1799,7 @@ function updateVehicleInfo(vcallsign, newPosition) {
           hrate_text = imp ? (vehicle.horizontal_rate * 196.850394).toFixed(1) + ' ft/min' : vehicle.horizontal_rate.toFixed(1) + ' m/s';
   }
 
-  var coords_text;
-  var ua =  navigator.userAgent.toLowerCase();
-
-  // determine how to link the vehicle coordinates to a native app, if on a mobile device
-  if(ua.indexOf('iphone') > -1) {
-      coords_text = '<a id="launch_mapapp" href="maps://?q='+newPosition.gps_lat+','+newPosition.gps_lon+'">' +
-                    roundNumber(newPosition.gps_lat, 5) + ', ' + roundNumber(newPosition.gps_lon, 5) +'</a>' +
-                    ' <i class="icon-location"></i>';
-  } else if(ua.indexOf('android') > -1) {
-      coords_text = '<a id="launch_mapapp" href="geo:'+newPosition.gps_lat+','+newPosition.gps_lon+'?q='+newPosition.gps_lat+','+newPosition.gps_lon+'('+vcallsign+')">' +
-                    roundNumber(newPosition.gps_lat, 5) + ', ' + roundNumber(newPosition.gps_lon, 5) +'</a>' +
-                    ' <i class="icon-location"></i>';
-  } else {
-      coords_text = '<a id="launch_mapapp" href="https://www.google.com/maps/search/?api=1&query='+newPosition.gps_lat+','+newPosition.gps_lon+'" target="_blank" rel="noopener noreferrer">' +
-          roundNumber(newPosition.gps_lat, 5) + ', ' + roundNumber(newPosition.gps_lon, 5) +'</a>' +
-          ' <i class="icon-location"></i>';
-  }
+  var coords_text = format_coordinates(newPosition.gps_lat, newPosition.gps_lon, vcallsign) + ' <i class="icon-location"></i>';
 
   // format altitude strings
   var text_alt      = Number((imp) ? Math.floor(3.2808399 * parseInt(newPosition.gps_alt)) : parseInt(newPosition.gps_alt)).toLocaleString("us");
@@ -2722,7 +2706,7 @@ function mapInfoBox_handle_path_old(vehicle, id) {
                     html = "<div style='line-height:16px;position:relative;'>";
                     html += "<div>"+data.serial+" <span style=''>("+data.datetime+")</span></div>";
                     html += "<hr style='margin:5px 0px'>";
-                    html += "<div style='margin-bottom:5px;'><b><i class='icon-location'></i>&nbsp;</b>"+roundNumber(data.lat, 5) + ',&nbsp;' + roundNumber(data.lon, 5)+"</div>";
+                    html += "<div style='margin-bottom:5px;'><b><i class='icon-location'></i>&nbsp;</b>"+format_coordinates(data.lat, data.lon, data.serial)+"</div>";
 
                     var imp = offline.get('opt_imperial');
                     var text_alt = Number((imp) ? Math.floor(3.2808399 * parseInt(data.alt)) : parseInt(data.alt)).toLocaleString("us");
@@ -2797,7 +2781,7 @@ function mapInfoBox_handle_path_new(data, vehicle, date) {
     html = "<div style='line-height:16px;position:relative;'>";
     html += "<div>"+data.serial+" <span style=''>("+date+")</span></div>";
     html += "<hr style='margin:5px 0px'>";
-    html += "<div style='margin-bottom:5px;'><b><i class='icon-location'></i>&nbsp;</b>"+roundNumber(data.lat, 5) + ',&nbsp;' + roundNumber(data.lon, 5)+"</div>";
+    html += "<div style='margin-bottom:5px;'><b><i class='icon-location'></i>&nbsp;</b>"+format_coordinates(data.lat, data.lon, data.serial)+"</div>";
 
     var imp = offline.get('opt_imperial');
     var text_alt = Number((imp) ? Math.floor(3.2808399 * parseInt(data.alt)) : parseInt(data.alt)).toLocaleString("us");
@@ -2931,20 +2915,7 @@ function mapInfoBox_handle_prediction(event) {
         altitude = Math.round(data.alt) + " m";
     }
 
-    var coords_text;
-    var ua =  navigator.userAgent.toLowerCase();
-
-    // determine how to link the vehicle coordinates to a native app, if on a mobile device
-    if(ua.indexOf('iphone') > -1) {
-        coords_text = '<a href="maps://?q='+data.lat+','+data.lon+'">' +
-                      roundNumber(data.lat, 5) + ', ' + roundNumber(data.lon, 5) + '</a>';
-    } else if(ua.indexOf('android') > -1) {
-        coords_text = '<a href="geo:'+data.lat+','+data.lon+'?q='+data.lat+','+data.lon+'(Prediction)">' +
-                      roundNumber(data.lat, 5) + ', ' + roundNumber(data.lon, 5) +'</a>';
-    } else {
-        coords_text = '<a href="https://www.google.com/maps/search/?api=1&query='+data.lat+','+data.lon+'" target="_blank" rel="noopener noreferrer">' +
-            roundNumber(data.lat, 5) + ', ' + roundNumber(data.lon, 5) +'</a>';
-    }
+    var coords_text = format_coordinates(data.lat, data.lon, "Prediction");
 
     mapInfoBox.setContent("<pre>" +
                         formatDate(new Date(parseInt(data.time) * 1000), true) + "\n\n" +
@@ -4665,7 +4636,7 @@ function updateRecoveryMarker(recovery) {
       html = "<div style='line-height:16px;position:relative;'>";
       html += "<div><b>"+recovery.serial+(recovery.recovered ? " Recovered" : " Not Recovered")+"</b></div>";
       html += "<hr style='margin:5px 0px'>";
-      html += "<div style='margin-bottom:5px;'><b><i class='icon-location'></i>&nbsp;</b>"+roundNumber(recovery.lat, 5) + ',&nbsp;' + roundNumber(recovery.lon, 5)+"</div>";
+      html += "<div style='margin-bottom:5px;'><b><i class='icon-location'></i>&nbsp;</b>"+format_coordinates(recovery.lat, recovery.lon, recovery.serial)+"</div>";
 
       var imp = offline.get('opt_imperial');
       var text_alt      = Number((imp) ? Math.floor(3.2808399 * parseInt(recovery.alt)) : parseInt(recovery.alt)).toLocaleString("us");
@@ -4777,7 +4748,7 @@ function updateRecoveryPane(r){
 
             html += "<div style='line-height:16px;position:relative;'>";
             html += "<div><b><u>"+r[i].serial+(r[i].recovered ? " Recovered by " : " Not Recovered by ")+r[i].recovered_by+"</u></b></div>";
-            html += "<div style='margin-bottom:5px;'><b><button style='margin-bottom:0px;' onclick='panToRecovery(\"" + r[i].serial + "\")'><i class='icon-location'></i></button>&nbsp;</b>"+roundNumber(lat, 5) + ',&nbsp;' + roundNumber(lon, 5)+"</div>";
+            html += "<div style='margin-bottom:5px;'><b><button style='margin-bottom:0px;' onclick='panToRecovery(\"" + r[i].serial + "\")'><i class='icon-location'></i></button>&nbsp;</b>"+format_coordinates(lat, lon, r[i].serial)+"</div>";
 
             var imp = offline.get('opt_imperial');
             var text_alt      = Number((imp) ? Math.floor(3.2808399 * parseInt(alt)) : parseInt(alt)).toLocaleString("us");