diff --git a/public_html/config.js b/public_html/config.js
index b9be157..da7a756 100644
--- a/public_html/config.js
+++ b/public_html/config.js
@@ -97,6 +97,9 @@ OutlineMlatColor = '#4040FF';
SiteCircles = true; // true to show circles (only shown if the center marker is shown)
// In miles, nautical miles, or km (depending settings value 'DisplayUnits')
SiteCirclesDistances = new Array(100,150,200);
+DefaultSiteCirclesCount = 3;
+DefaultSiteCirclesBaseDistance = 100;
+DefaultSiteCirclesInterval = 50;
// Controls page title, righthand pane when nothing is selected
PageName = "PiAware SkyAware";
diff --git a/public_html/index.html b/public_html/index.html
index 2c5aad8..d5c5712 100644
--- a/public_html/index.html
+++ b/public_html/index.html
@@ -150,6 +150,26 @@
Group by Data Type
+
diff --git a/public_html/script.js b/public_html/script.js
index 6c506ba..28b6172 100644
--- a/public_html/script.js
+++ b/public_html/script.js
@@ -24,7 +24,7 @@ var SpecialSquawks = {
};
// Get current map settings
-var CenterLat, CenterLon, ZoomLvl, MapType;
+var CenterLat, CenterLon, ZoomLvl, MapType, SiteCirclesCount, SiteCirclesBaseDistance, SiteCirclesInterval;
var Dump1090Version = "unknown version";
var RefreshInterval = 1000;
@@ -263,6 +263,7 @@ function initialize() {
// Set initial element visibility
$("#show_map_button").hide();
+ $("#range_ring_column").hide();
setColumnVisibility();
// Initialize other controls
@@ -720,7 +721,32 @@ function initialize_map() {
var feature = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat(SitePosition)));
feature.setStyle(markerStyle);
StaticFeatures.push(feature);
-
+
+ $('#range_ring_column').show();
+
+ setRangeRings();
+
+ $('#range_rings_button').click(onSetRangeRings);
+ $("#range_ring_form").validate({
+ errorPlacement: function(error, element) {
+ return true;
+ },
+ rules: {
+ ringCount: {
+ number: true,
+ min: 0
+ },
+ baseRing: {
+ number: true,
+ min: 0
+ },
+ ringInterval: {
+ number: true,
+ min: 0
+ }
+ }
+ });
+
if (SiteCircles) {
createSiteCircleFeatures();
}
@@ -807,8 +833,8 @@ function createSiteCircleFeatures() {
conversionFactor = 1609.0;
}
- for (var i=0; i < SiteCirclesDistances.length; ++i) {
- var distance = SiteCirclesDistances[i] * conversionFactor;
+ for (var i=0; i < SiteCirclesCount; ++i) {
+ var distance = (SiteCirclesBaseDistance + (SiteCirclesInterval * i)) * conversionFactor;
var circle = make_geodesic_circle(SitePosition, distance, 360);
circle.transform('EPSG:4326', 'EPSG:3857');
var feature = new ol.Feature(circle);
@@ -1531,6 +1557,13 @@ function resetMap() {
localStorage['CenterLon'] = CenterLon = DefaultCenterLon;
localStorage['ZoomLvl'] = ZoomLvl = DefaultZoomLvl;
+ // Reset to default range rings
+ localStorage['SiteCirclesCount'] = SiteCirclesCount = DefaultSiteCirclesCount;
+ localStorage['SiteCirclesBaseDistance'] = SiteCirclesBaseDistance = DefaultSiteCirclesBaseDistance;
+ localStorage['SiteCirclesInterval'] = SiteCirclesInterval = DefaultSiteCirclesInterval;
+ setRangeRings();
+ createSiteCircleFeatures();
+
// Set and refresh
OLMap.getView().setZoom(ZoomLvl);
OLMap.getView().setCenter(ol.proj.fromLonLat([CenterLon, CenterLat]));
@@ -1933,3 +1966,27 @@ function updatePiAwareOrFlightFeeder() {
}
refreshPageTitle();
}
+
+// Set range ring globals and populate form values
+function setRangeRings() {
+ SiteCirclesCount = Number(localStorage['SiteCirclesCount']) || DefaultSiteCirclesCount;
+ SiteCirclesBaseDistance = Number(localStorage['SiteCirclesBaseDistance']) || DefaultSiteCirclesBaseDistance;
+ SiteCirclesInterval = Number(localStorage['SiteCirclesInterval']) || DefaultSiteCirclesInterval;
+
+ // Populate text fields with current values
+ $('#range_ring_count').val(SiteCirclesCount);
+ $('#range_ring_base').val(SiteCirclesBaseDistance);
+ $('#range_ring_interval').val(SiteCirclesInterval);
+}
+
+// redraw range rings with form values
+function onSetRangeRings() {
+ // Save state to localStorage
+ localStorage.setItem('SiteCirclesCount', parseFloat($("#range_ring_count").val().trim()));
+ localStorage.setItem('SiteCirclesBaseDistance', parseFloat($("#range_ring_base").val().trim()));
+ localStorage.setItem('SiteCirclesInterval', parseFloat($("#range_ring_interval").val().trim()));
+
+ setRangeRings();
+
+ createSiteCircleFeatures();
+}
diff --git a/public_html/style.css b/public_html/style.css
index 6f3e020..feaad14 100644
--- a/public_html/style.css
+++ b/public_html/style.css
@@ -260,6 +260,21 @@ div#loader { z-index: 99; position: absolute; left: 0; top: 0; bottom: 0; right:
width: 50px;
}
+.rangeRingsInput {
+ width: 30px;
+ float: right;
+}
+
+.rangeOptions {
+ width: 170px;
+ padding-top: 8px;
+ text-indent: 10px;
+}
+
+.set_range_rings_button {
+ padding-top: 8px;
+}
+
select.error, textarea.error, input.error {
color: #FF0000;
}