Copy predicted landing lat/lng to clipboard on marker click.

static/js/balloon.js

@@ -61,9 +61,16 @@ function add_new_balloon(data){
     // Landing position marker
     // Only add if there is data to show
     if (data.pred_landing.length == 3){
+        var _landing_text = callsign + " Landing " + data.pred_landing[0].toFixed(5) + ", " + data.pred_landing[1].toFixed(5);
         balloon_positions[callsign].pred_marker = L.marker(data.pred_landing,{title:callsign + " Landing", icon: balloonLandingIcons[balloon_positions[callsign].colour]})
-            .bindTooltip(callsign + " Landing",{permanent:false,direction:'right'})
+            .bindTooltip(_landing_text,{permanent:false,direction:'right'})
             .addTo(map);
+        // Add listener to copy prediction coords to clipboard.
+        // This is also duplicated in prediction.js, until I rearrange things...
+        balloon_positions[callsign].pred_marker.on('click', function(e) {
+            var _landing_pos_text = e.latlng.lat.toFixed(5) + ", " + e.latlng.lng.toFixed(5);
+            textToClipboard(_landing_pos_text);
+        });
     } else{
         balloon_positions[callsign].pred_marker = null;
     }

static/js/predictions.js

@@ -18,14 +18,21 @@ function handlePrediction(data){
     }
 
     // Add the landing marker if it doesnt exist.
+    var _landing_text = _callsign + " Landing " + data.pred_landing[0].toFixed(5) + ", " + data.pred_landing[1].toFixed(5);
     if (balloon_positions[_callsign].pred_marker == null){
         balloon_positions[_callsign].pred_marker = L.marker(data.pred_landing,{title:_callsign + " Landing", icon: balloonLandingIcons[balloon_positions[_callsign].colour]})
-            .bindTooltip(_callsign + " Landing",{permanent:false,direction:'right'});
+            .bindTooltip(_landing_text ,{permanent:false,direction:'right'});
         if (balloon_positions[_callsign].visible == true){
             balloon_positions[_callsign].pred_marker.addTo(map);
+            // Add listener to copy prediction coords to clipboard.
+            balloon_positions[_callsign].pred_marker.on('click', function(e) {
+                var _landing_pos_text = e.latlng.lat.toFixed(5) + ", " + e.latlng.lng.toFixed(5);
+                textToClipboard(_landing_pos_text);
+            });
         }
     }else{
         balloon_positions[_callsign].pred_marker.setLatLng(data.pred_landing);
+        balloon_positions[_callsign].pred_marker.setTooltipContent(_landing_text);
     }
     if(data.burst.length == 3){
         // There is burst data!

static/js/utils.js

@@ -136,4 +136,15 @@ function calculate_lookangles(a, b) {
         'range': distance,
         'bearing': str_bearing
     };
+}
+
+function textToClipboard(text) {
+    // Copy a string to the user's clipboard.
+    // From here: https://stackoverflow.com/questions/33855641/copy-output-of-a-javascript-variable-to-the-clipboard
+    var dummy = document.createElement("textarea");
+    document.body.appendChild(dummy);
+    dummy.value = text;
+    dummy.select();
+    document.execCommand("copy");
+    document.body.removeChild(dummy);
 }

templates/index.html

@@ -27,7 +27,6 @@
     <script src="{{ url_for('static', filename='js/leaflet-sidebar.min.js') }}"></script>
     <script src="{{ url_for('static', filename='js/Leaflet.Control.Custom.js') }}"></script>
     <script src="{{ url_for('static', filename='js/Leaflet.PolylineMeasure.js') }}"></script>
-    <script src="{{ url_for('static', filename='js/leaflet-routing-machine.min.js') }}"></script>
     <script src="{{ url_for('static', filename='js/easy-button.js') }}"></script>
 
     <script src="{{ url_for('static', filename='js/tabulator.min.js') }}"></script>