Add aircraft labels on icons and a non-functional checkbox to toggle the labels

public_html/index.html

@@ -152,6 +152,10 @@
 						<div class="settingsCheckbox" id="grouptype_checkbox"></div>
 						<div class="settingsText">Group by Data Type</div>
 					</div>
+					<div class="settingsOptionContainer">
+						<div class="settingsCheckbox" id="aircraft_label_checkbox"></div>
+						<div class="settingsText">Show Aircraft Labels</div>
+					</div>
 				</div>
 				<div id="range_ring_column" class="settingsOptionContainer">
 					<div class="infoBlockTitleText">Range Rings</div>

public_html/planeObject.js

@@ -75,6 +75,7 @@ function PlaneObject(icao) {
         this.markerStaticIcon = null;
         this.markerStyleKey = null;
         this.markerSvgKey = null;
+        this.markerLabel = null;
         this.filter = {};
 
         // start from a computed registration, let the DB override it
@@ -468,8 +469,21 @@ PlaneObject.prototype.updateIcon = function() {
                 });
 
                 this.markerIcon = icon;
+
+                var labelFill = new ol.style.Fill({color: 'white' });
+                var labelStrokeNarrow = new ol.style.Stroke({color: 'black', width: 5});
+
                 this.markerStyle = new ol.style.Style({
-                        image: this.markerIcon
+                        image: this.markerIcon,
+                        text: new ol.style.Text({
+                                text: this.flight,
+                                fill: labelFill,
+                                stroke: labelStrokeNarrow,
+                                textAlign: 'left',
+                                textBaseline: "top",
+                                offsetX: 20,
+                                font: '12px sans-serif'
+                            })
                 });
                 this.markerStaticIcon = null;
                 this.markerStaticStyle = new ol.style.Style({});

public_html/script.js

@@ -344,8 +344,12 @@ function initialize() {
         });
 
         $('#grouptype_checkbox').on('click', function() {
-		toggleGroupByDataType(true);
+                toggleGroupByDataType(true);
-	});
+        });
+
+        $('#aircraft_label_checkbox').on('click', function() {
+                toggleAircraftLabels(true);
+        });
 
         $('#altitude_checkbox').on('click', function() {
         	toggleAltitudeChart(true);
@@ -416,6 +420,7 @@ function initialize() {
         toggleAltitudeChart(false);
         toggleAllPlanes(false);
         toggleGroupByDataType(false);
+        toggleAircraftLabels(false);
         toggleAllColumns(false);
         toggleADSBAircraft(false);
         toggleMLATAircraft(false);
@@ -1806,6 +1811,28 @@ function toggleGroupByDataType(switchToggle) {
 	localStorage.setItem('groupByDataType', groupByDataType);
 }
 
+function toggleAircraftLabels(switchToggle) {
+	if (typeof localStorage['showAircraftLabels'] === 'undefined') {
+		localStorage.setItem('showAircraftLabels', 'deselected');
+	}
+
+	var showAircraftLabels = localStorage.getItem('showAircraftLabels');
+	if (switchToggle === true) {
+		showAircraftLabels = (showAircraftLabels === 'deselected') ? 'selected' : 'deselected';
+	}
+
+	if (showAircraftLabels === 'deselected') {
+                // hide aircraft labels
+		$('#aircraft_label_checkbox').removeClass('settingsCheckboxChecked');
+	} else {
+                // show aicraft labels
+		//sortByDataSource();
+		$('#aircraft_label_checkbox').addClass('settingsCheckboxChecked');
+	}
+
+	localStorage.setItem('showAircraftLabels', showAircraftLabels);
+}
+
 function toggleAllPlanes(switchToggle) {
 	if (typeof localStorage['allPlanesSelection'] === 'undefined') {
 		localStorage.setItem('allPlanesSelection','deselected');