diff --git a/predict/css/pred.css b/predict/css/pred.css index fdd4c9e..2973fce 100644 --- a/predict/css/pred.css +++ b/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; diff --git a/predict/images/balloon-sm.png b/predict/images/balloon-sm.png new file mode 100644 index 0000000..a75e18c Binary files /dev/null and b/predict/images/balloon-sm.png differ diff --git a/predict/images/marker-sm-black.png b/predict/images/marker-sm-black.png new file mode 100644 index 0000000..34f4e0e Binary files /dev/null and b/predict/images/marker-sm-black.png differ diff --git a/predict/images/target-1-sm.png b/predict/images/target-1-sm.png new file mode 100644 index 0000000..7418dce Binary files /dev/null and b/predict/images/target-1-sm.png differ diff --git a/predict/images/target-8-sm.png b/predict/images/target-8-sm.png new file mode 100644 index 0000000..c8bb701 Binary files /dev/null and b/predict/images/target-8-sm.png differ diff --git a/predict/index.php b/predict/index.php index 034055c..cdf153d 100644 --- a/predict/index.php +++ b/predict/index.php @@ -25,9 +25,11 @@ var current_uuid = ' 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:
" + 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() {

Scenario Information

- +Lat: Lon:
Show Debug
| Hide Launch Card
@@ -124,7 +142,7 @@ function initialize() { - Latitude: + Latitude: Set with map diff --git a/predict/js/pred.js b/predict/js/pred.js index 7aa6d14..a51534c 100644 --- a/predict/js/pred.js +++ b/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; }