Added option to draw measurement circles around site

Options:
SiteCircles = true;
SiteCirclesDistances = new Array(100,150,200);

Circles are only shown if 'SiteShow' is true. SiteCirclesDistances is array of numbers. Distances are in NM or km depending 'Metric'-settings.

	modified:   public_html/config.js
	modified:   public_html/script.js

public_html/config.js

@@ -7,7 +7,7 @@
 
 // -- Output Settings -------------------------------------
 // Show metric values
-Metric = false; // true|false 
+Metric = false; // true or false
 
 // -- Map settings ----------------------------------------
 // The Latitude and Longitude in decimal format
@@ -27,3 +27,6 @@ SiteShow    = false; // true or false
 SiteLat     = 45.0;
 SiteLon     = 9.0;
 
+SiteCircles = true; // true or false (Only shown if SiteShow is true)
+SiteCirclesDistances = new Array(100,150,200); // In nautical miles or km (depending settings value 'Metric')
+

public_html/script.js

@@ -146,9 +146,10 @@ function initialize() {
 	GoogleMap.mapTypes.set("dark_map", styledMap);
 	
 	// Add home marker if requested
-	if (SiteShow) {
+	if (SiteShow && (typeof SiteLat !==  'undefined' || typeof SiteLon !==  'undefined')) {
 	    var siteMarker  = new google.maps.LatLng(SiteLat, SiteLon);
-	    var markerImage = new google.maps.MarkerImage('http://maps.google.com/mapfiles/kml/pal4/icon57.png',
+	    var markerImage = new google.maps.MarkerImage(
+	        'http://maps.google.com/mapfiles/kml/pal4/icon57.png',
             new google.maps.Size(32, 32),   // Image size
             new google.maps.Point(0, 0),    // Origin point of image
             new google.maps.Point(16, 16)); // Position where marker should point 
@@ -158,6 +159,12 @@ function initialize() {
           icon: markerImage,
           title: 'My Radar Site'
         });
+        
+        if (SiteCircles) {
+            for (var i=0;i<SiteCirclesDistances.length;i++) {
+              drawCircle(marker, SiteCirclesDistances[i]); // in meters
+            }
+        }
 	}
 
 	// Did our crafty user need some setup?
@@ -212,9 +219,11 @@ function refreshSelected() {
 	
 	// Flight header line including squawk if needed
 	if (selected && selected.flight == "") {
-	    html += '<tr><td colspan="' + columns + '" id="selectedinfotitle"><b>N/A (' + selected.icao + ')</b>';
+	    html += '<tr><td colspan="' + columns + '" id="selectedinfotitle"><b>N/A (' +
+	        selected.icao + ')</b>';
 	} else if (selected && selected.flight != "") {
-	    html += '<tr><td colspan="' + columns + '" id="selectedinfotitle"><b>' + selected.flight + '</b>';
+	    html += '<tr><td colspan="' + columns + '" id="selectedinfotitle"><b>' +
+	        selected.flight + '</b>';
 	} else {
 	    html += '<tr><td colspan="' + columns + '" id="selectedinfotitle"><b>DUMP1090</b>';
 	}
@@ -355,12 +364,18 @@ function refreshTableInfo() {
 	html += '<thead style="background-color: #BBBBBB; cursor: pointer;">';
 	html += '<td onclick="setASC_DESC(\'0\');sortTable(\'tableinfo\',\'0\');">ICAO</td>';
 	html += '<td onclick="setASC_DESC(\'1\');sortTable(\'tableinfo\',\'1\');">Flight</td>';
-	html += '<td onclick="setASC_DESC(\'2\');sortTable(\'tableinfo\',\'2\');" align="right">Squawk</td>';
+	html += '<td onclick="setASC_DESC(\'2\');sortTable(\'tableinfo\',\'2\');" ' +
-	html += '<td onclick="setASC_DESC(\'3\');sortTable(\'tableinfo\',\'3\');" align="right">Altitude</td>';
+	    'align="right">Squawk</td>';
-	html += '<td onclick="setASC_DESC(\'4\');sortTable(\'tableinfo\',\'4\');" align="right">Speed</td>';
+	html += '<td onclick="setASC_DESC(\'3\');sortTable(\'tableinfo\',\'3\');" ' +
-	html += '<td onclick="setASC_DESC(\'5\');sortTable(\'tableinfo\',\'5\');" align="right">Track</td>';
+	    'align="right">Altitude</td>';
-	html += '<td onclick="setASC_DESC(\'6\');sortTable(\'tableinfo\',\'6\');" align="right">Msgs</td>';
+	html += '<td onclick="setASC_DESC(\'4\');sortTable(\'tableinfo\',\'4\');" ' +
-	html += '<td onclick="setASC_DESC(\'7\');sortTable(\'tableinfo\',\'7\');" align="right">Seen</td></thead><tbody>';
+	    'align="right">Speed</td>';
+	html += '<td onclick="setASC_DESC(\'5\');sortTable(\'tableinfo\',\'5\');" ' +
+	    'align="right">Track</td>';
+	html += '<td onclick="setASC_DESC(\'6\');sortTable(\'tableinfo\',\'6\');" ' +
+	    'align="right">Msgs</td>';
+	html += '<td onclick="setASC_DESC(\'7\');sortTable(\'tableinfo\',\'7\');" ' +
+	    'align="right">Seen</td></thead><tbody>';
 	for (var tablep in Planes) {
 		var tableplane = Planes[tablep]
 		if (!tableplane.reapable) {
@@ -526,3 +541,29 @@ function selectPlaneByHex(hex) {
     refreshSelected();
     refreshTableInfo();
 }
+
+function drawCircle(marker, distance) {
+    if (typeof distance === 'undefined') {
+        return false;
+        
+        if (!(!isNaN(parseFloat(distance)) && isFinite(distance)) || distance < 0) {
+            return false;
+        }
+    }
+    
+    distance *= 1000.0;
+    if (!Metric) {
+        distance *= 1.852;
+    }
+    
+    // Add circle overlay and bind to marker
+    var circle = new google.maps.Circle({
+      map: GoogleMap,
+      radius: distance, // In meters
+      fillOpacity: 0.0,
+      strokeWeight: 1,
+      strokeOpacity: 0.3
+    });
+    circle.bindTo('center', marker, 'position');
+}
+