Add settings pop up box

public_html/index.html

@@ -199,6 +199,47 @@
 				</div>
 			</div>
 
+			<div id="settings_infoblock">
+				<div class="settingsColumn">
+					<div class="infoBlockTitleText">Overlay Toggles</div>
+					<div class="settingsOptionContainer">
+						<div class="settingsCheckbox" id="nexrad_checkbox"></div>
+						<div class="settingsText">NEXRAD Weather</div>
+					</div>
+					<div class="settingsOptionContainer">
+						<div class="settingsCheckbox" id="sitepos_checkbox"></div>
+						<div class="settingsText">Site Position &amp; Range Rings</div>
+					</div>
+					<div class="settingsOptionContainer">
+						<div class="settingsCheckbox" id="actrail_checkbox"></div>
+						<div class="settingsText">Selected Aircraft Trail</div>
+					</div>
+					<div class="settingsOptionContainer">
+						<div class="settingsCheckbox" id="acpositions_checkbox"></div>
+						<div class="settingsText">Aircraft Positions</div>
+					</div>
+				</div>
+				<div class="settingsColumn">
+					<div class="infoBlockTitleText">View Toggles</div>
+					<div class="settingsOptionContainer">
+						<div class="settingsCheckbox"></div>
+						<div class="settingsText">Blocked MLAT Flights</div>
+					</div>
+					<div class="settingsOptionContainer">
+						<div class="settingsCheckbox"></div>
+						<div class="settingsText">Ground Vehicles</div>
+					</div>
+					<div class="settingsOptionContainer">
+						<div class="settingsCheckbox" id="selectall_checkbox"></div>
+						<div class="settingsText">All Aircraft Trails</div>
+					</div>
+					<div class="settingsOptionContainer">
+						<div class="settingsCheckbox" id="grouptype_checkbox"></div>
+						<div class="settingsText">Group by Data Type</div>
+					</div>
+				</div>
+			</div>
+
 			<div id="map_container">
 				<div id="map_canvas"></div>
                                 <div id="toggle_sidebar_control" class="ol-unselectable ol-control">

public_html/script.js

@@ -47,6 +47,8 @@ var MessageRate = 0;
 
 var NBSP='\u00a0';
 
+var layers;
+
 function processReceiverUpdate(data) {
 	// Loop through all the planes in the data packet
         var now = data.now;
@@ -237,6 +239,27 @@ function initialize() {
         });
         $("#altitude_filter_reset_button").click(onResetAltitudeFilter);
 
+        $('#settingsCog').on('click', function() {
+        	$('#settings_infoblock').toggle();
+        });
+
+        $('#grouptype_checkbox').on('click', function() {
+        	if ($('#grouptype_checkbox').hasClass('settingsCheckboxChecked')) {
+        		sortByICAO();
+        	} else {
+        		sortByDataSource();
+        	}
+        	
+        });
+
+        $('#selectall_checkbox').on('click', function() {
+        	if ($('#selectall_checkbox').hasClass('settingsCheckboxChecked')) {
+        		deselectAllPlanes();
+        	} else {
+        		selectAllPlanes();
+        	}
+        })
+
         // Force map to redraw if sidebar container is resized - use a timer to debounce
         var mapResizeTimeout;
         $("#sidebar_container").on("resize", function() {
@@ -416,7 +439,7 @@ function initialize_map() {
 
         // Initialize OL3
 
-        var layers = createBaseLayers();
+        layers = createBaseLayers();
 
         var iconsLayer = new ol.layer.Vector({
                 name: 'ac_positions',
@@ -578,6 +601,14 @@ function initialize_map() {
 
     })
 
+    // handle the layer settings pane checkboxes
+	OLMap.once('postrender', function(e) {
+		toggleLayer('#nexrad_checkbox', 'nexrad');
+		toggleLayer('#sitepos_checkbox', 'site_pos');
+		toggleLayer('#actrail_checkbox', 'ac_trail');
+		toggleLayer('#acpositions_checkbox', 'ac_positions');
+	});
+
 	// Add home marker if requested
 	if (SitePosition) {
                 var markerStyle = new ol.style.Style({
@@ -1054,6 +1085,11 @@ function resortTable() {
 }
 
 function sortBy(id,sc,se) {
+		if (id !== 'data_source') {
+			$('#grouptype_checkbox').removeClass('settingsCheckboxChecked');
+		} else {
+			$('#grouptype_checkbox').addClass('settingsCheckboxChecked');
+		}
         if (id === sortId) {
                 sortAscending = !sortAscending;
                 PlanesOrdered.reverse(); // this correctly flips the order of rows that compare equal
@@ -1150,6 +1186,8 @@ function selectAllPlanes() {
 		}
 	}
 
+	$('#selectall_checkbox').addClass('settingsCheckboxChecked');
+
 	refreshSelected();
 	refreshHighlighted();
 }
@@ -1181,6 +1219,7 @@ function deselectAllPlanes() {
 		Planes[key].updateMarker();
 		$(Planes[key].tr).removeClass("selected");
 	}
+	$('#selectall_checkbox').removeClass('settingsCheckboxChecked');
 	SelectedPlane = null;
 	SelectedAllPlanes = false;
 	refreshSelected();
@@ -1475,3 +1514,31 @@ function getAirframesModeSLink(code) {
 
     return "";   
 }
+
+
+// takes in an elemnt jQuery path and the OL3 layer name and toggles the visibility based on clicking it
+function toggleLayer(element, layer) {
+	// set initial checked status
+	ol.control.LayerSwitcher.forEachRecursive(layers, function(lyr) { 
+		if (lyr.get('name') === layer && lyr.getVisible()) {
+			$(element).addClass('settingsCheckboxChecked');
+		}
+	});
+	$(element).on('click', function() {
+		var visible = false;
+		if ($(element).hasClass('settingsCheckboxChecked')) {
+			visible = true;
+		}
+		ol.control.LayerSwitcher.forEachRecursive(layers, function(lyr) { 
+			if (lyr.get('name') === layer) {
+				if (visible) {
+					lyr.setVisible(false);
+					$(element).removeClass('settingsCheckboxChecked');
+				} else {
+					lyr.setVisible(true);
+					$(element).addClass('settingsCheckboxChecked');
+				}
+			}
+		});
+	});
+}

public_html/style.css

@@ -51,8 +51,6 @@ html, body {
     border: none;
 }
 
-
-
 #toggle_sidebar_button.show_sidebar {
     background-image: url("images/table-icon.png");
     background-image: 
@@ -599,16 +597,12 @@ select.error, textarea.error, input.error {
 }
 
 .legendBox {
-    /*margin-top: 5px;*/
     width: 15px;
     height: 15px;
-    /*line-height: 15px*/
     border: 1px solid #efefef;
-    /*display: inline-block;*/
     border-radius: 4px;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
-    /*margin-left: auto;*/
 }
 
 #adsbLegendBox {
@@ -633,4 +627,44 @@ select.error, textarea.error, input.error {
     display: inline-block;
     padding-right: 20px;
     padding-left: 5px;
+}
+
+#settings_infoblock {
+    position: absolute;
+    right: 40px;
+    top: 60px;
+    width: 390px;
+    min-height: 80px;
+    background: #ffffff;
+    box-shadow: 4px 4px 10px #444444;
+    padding: 20px;
+    z-index: 9999;
+    display: none;
+}
+
+.settingsColumn {
+    display: table-cell;
+}
+
+.settingsOptionContainer {
+    display: table;
+}
+
+.settingsCheckbox {
+    width: 20px;
+    height: 11px;
+    background-image: url('images/box-empty.png');
+    background-repeat: no-repeat;
+    background-position: center;
+    display: table-cell;
+    cursor: pointer;
+}
+
+.settingsCheckboxChecked {
+    background-image: url('images/box-checked.png') !important;
+}
+
+.settingsText {
+    line-height: 20px;
+    display: table-cell;
 }