Click to set launch location, auto pan to new, new icons

predict/css/pred.css

@@ -11,7 +11,10 @@ body {
 a { text-decoration: underline; color: #333; cursor: pointer; }
 
 /* The whoppping map in the centre */
-#map_canvas { width: 100%; height: 100%; }
+#map_canvas {
+    width: 100%;
+    height: 100%;
+}
 
 #status_message{
     position: absolute;

predict/index.php

@@ -25,9 +25,11 @@ var current_uuid = '<?php echo ( isset($_GET['uuid'])? $_GET['uuid'] : "0" ); ?>
 
 var map;
 var map_items = [];
-var launch_img = "images/marker-sm-red.png";
-var land_img = "images/marker-sm-red.png";
+var launch_img = "images/target-1-sm.png";
+var land_img = "images/target-8-sm.png";
 var burst_img = "images/pop-marker.png";
+var clickListener;
+var clickMarker;
 
 function initialize() {
     // make the map and set center
@@ -59,6 +61,20 @@ function initialize() {
             }
         }
     });
+    // activate the "Set with Map" link
+    $("#setWithClick").click(function() {
+        setLatLonByClick(true);
+    });
+    // attach onchange handlers to the lat/long boxes
+    $("#lat").change(function() {
+        plotClick();
+    });
+    $("#lon").change(function() {
+        plotClick();
+    });
+    $("#site").change(function() {
+        plotClick();
+    });
     $("#input_form").draggable({containment: '#map_canvas'});
     if ( current_uuid != '0' ) {
         appendDebug("Got an old UUID to plot:<br>" + current_uuid);
@@ -78,6 +94,8 @@ function initialize() {
         toggleWindow("input_form", "showHideForm", "Show Launch Card",
             "Hide Launch Card");
     });
+    // plot the initial launch location
+    plotClick();
 }
 
 
@@ -103,7 +121,7 @@ function initialize() {
 
 <div id="scenario_info" class="box">
 <h1>Scenario Information</h1>
-<span id="from_launch_lat">
+<span id="cursor_info">Lat: <span id="cursor_lat"></span> Lon: <span id="cursor_lon"></span></span><br />
 <a><span id="showHideDebug">Show Debug</span></a></span> | 
 <a><span id="showHideForm">Hide Launch Card</span></a></span>
 </div>
@@ -124,7 +142,7 @@ function initialize() {
 			</select>
 		</td>
 	<tr>
-		<td>Latitude:</td>
+		<td>Latitude: <a id="setWithClick">Set with map</a></td>
 		<td><input id="lat" type="text" name="lat" value="52.2135" onKeyDown="SetSiteOther()"></td>
 	</tr>
     <tr>

predict/js/pred.js

@@ -122,6 +122,10 @@ function parseCSV(lines) {
     var path = [];
     var max_height = -10; //just any -ve number
     var max_point = null;
+    var launch_lat;
+    var launch_lon;
+    var land_lat;
+    var land_lon;
     var launch_pt;
     var land_pt;
         $.each(lines, function(idx, line) {
@@ -129,15 +133,15 @@ function parseCSV(lines) {
             if(entry.length >= 4) { // check valid entry length
                 var point = new google.maps.LatLng( parseFloat(entry[1]), parseFloat(entry[2]) );
                 if ( idx == 0 ) { // get the launch lat/long for marker
-                    var launch_lat = entry[1];
-                    var launch_lon = entry[2];
+                    launch_lat = entry[1];
+                    launch_lon = entry[2];
                     launch_pt = point;
                 }
 
                 // set on every iteration, last valid entry
                 // gives landing position
-                var land_lat = entry[1];
-                var land_lon = entry[2];
+                land_lat = entry[1];
+                land_lon = entry[2];
                 land_pt = point;
                 
                 if(parseFloat(entry[3]) > max_height) {
@@ -168,14 +172,14 @@ function parseCSV(lines) {
         position: launch_pt,
         map: map,
         icon: launch_icon,
-        title: 'Balloon launch'
+        title: 'Balloon launch ('+launch_lat+', '+launch_lon+')'
     });
 
     var land_marker = new google.maps.Marker({
         position: land_pt,
         map:map,
         icon: land_icon,
-        title: 'Predicted Landing'
+        title: 'Predicted Landing ('+land_lat+', '+land_lon+')'
     });
 
     var path_polyline = new google.maps.Polyline({
@@ -207,6 +211,49 @@ function parseCSV(lines) {
 
 }
 
+function plotClick() {
+    // clear the old marker
+    clearMapItems();
+    // get the new values from the form
+    click_lat = parseFloat($("#lat").val());
+    click_lon = parseFloat($("#lon").val());
+    var click_pt = new google.maps.LatLng(click_lat, click_lon);
+    clickMarker = new google.maps.Marker({
+        position: click_pt,
+        map: map,
+        icon: 'images/target-1-sm.png',
+        title: 'Currently selected launch location ('+click_lat+', '+click_lon+')'
+    });
+    map_items.push(clickMarker);
+    map.panTo(click_pt);
+    map.setZoom(8);
+}
+    
+
+function setFormLatLon(GLatLng) {
+    $("#lat").val(GLatLng.lat().toFixed(4));
+    $("#lon").val(GLatLng.lng().toFixed(4));
+    // remove the event handler so another click doesn't register
+    setLatLonByClick(false);
+    // change the dropdown to read "other"
+    SetSiteOther();
+    // plot the new marker for launch location
+    plotClick();
+}
+
+function setLatLonByClick(state) {
+    if ( state == true ) {
+        clickListener = google.maps.event.addListener(map, 'click', function(event) {
+            setFormLatLon(event.latLng);
+        });
+    } else if ( state == false ) {
+        google.maps.event.removeListener(clickListener);
+    } else {
+        appendDebug("Unrecognised state for setLatLonByClick");
+    }
+
+}
+
 function enableMap(map, state) {
     if ( state != false && state != true) {
         appendDebug("Unrecognised map state");
@@ -299,8 +346,6 @@ function UpdateLaunchSite(id) {
 
 function SetSiteOther() {
         optOther = document.getElementById("other");
-        //cmbSite = document.getElementById("site");
-        //cmbSite.selectedIndex = 1;
         optOther.selected = true;
 }