Implement toggle checkbox to show/hide aircraft labels

This commit is contained in:
eric1tran 2021-02-22 17:37:00 +00:00
parent 45e13b20ba
commit e111303b1e
2 changed files with 46 additions and 19 deletions

View File

@ -451,7 +451,7 @@ PlaneObject.prototype.updateIcon = function() {
//var transparentBorderWidth = (32 / baseMarker.scale / scaleFactor).toFixed(1); //var transparentBorderWidth = (32 / baseMarker.scale / scaleFactor).toFixed(1);
var svgKey = col + '!' + outline + '!' + baseMarker.svg + '!' + add_stroke + "!" + scaleFactor; var svgKey = col + '!' + outline + '!' + baseMarker.svg + '!' + add_stroke + "!" + scaleFactor;
var styleKey = opacity + '!' + rotation; var styleKey = opacity + '!' + rotation + '!' + AircraftLabels;
if (this.markerStyle === null || this.markerIcon === null || this.markerSvgKey != svgKey) { if (this.markerStyle === null || this.markerIcon === null || this.markerSvgKey != svgKey) {
//console.log(this.icao + " new icon and style " + this.markerSvgKey + " -> " + svgKey); //console.log(this.icao + " new icon and style " + this.markerSvgKey + " -> " + svgKey);
@ -470,21 +470,25 @@ PlaneObject.prototype.updateIcon = function() {
this.markerIcon = icon; this.markerIcon = icon;
var labelFill = new ol.style.Fill({color: 'white' }); if (AircraftLabels) {
var labelStrokeNarrow = new ol.style.Stroke({color: 'black', width: 5}); this.markerStyle = new ol.style.Style({
image: this.markerIcon,
text: new ol.style.Text({
text: this.flight,
fill: new ol.style.Fill({color: 'white' }),
stroke: new ol.style.Stroke({color: 'black', width: 5}),
textAlign: 'left',
textBaseline: "top",
offsetX: 20,
font: '12px sans-serif'
})
});
} else {
this.markerStyle = new ol.style.Style({
image: this.markerIcon
});
};
this.markerStyle = new ol.style.Style({
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.markerStaticIcon = null;
this.markerStaticStyle = new ol.style.Style({}); this.markerStaticStyle = new ol.style.Style({});
@ -504,6 +508,26 @@ PlaneObject.prototype.updateIcon = function() {
if (this.staticIcon) { if (this.staticIcon) {
this.staticIcon.setOpacity(opacity); this.staticIcon.setOpacity(opacity);
} }
if (AircraftLabels) {
this.markerStyle = new ol.style.Style({
image: this.markerIcon,
text: new ol.style.Text({
text: this.flight,
fill: new ol.style.Fill({color: 'white' }),
stroke: new ol.style.Stroke({color: 'black', width: 5}),
textAlign: 'left',
textBaseline: "top",
offsetX: 20,
font: '12px sans-serif'
})
});
} else {
this.markerStyle = new ol.style.Style({
image: this.markerIcon
});
};
this.marker.setStyle(this.markerStyle);
this.markerStyleKey = styleKey; this.markerStyleKey = styleKey;
} }

View File

@ -57,6 +57,8 @@ var ActiveFilterCount = 0;
var altitude_slider = null; var altitude_slider = null;
var speed_slider = null; var speed_slider = null;
var AircraftLabels = false;
// piaware vs flightfeeder // piaware vs flightfeeder
var isFlightFeeder = false; var isFlightFeeder = false;
@ -1822,15 +1824,16 @@ function toggleAircraftLabels(switchToggle) {
} }
if (showAircraftLabels === 'deselected') { if (showAircraftLabels === 'deselected') {
// hide aircraft labels // hide aircraft labels
AircraftLabels = false;
$('#aircraft_label_checkbox').removeClass('settingsCheckboxChecked'); $('#aircraft_label_checkbox').removeClass('settingsCheckboxChecked');
} else { } else {
// show aicraft labels // show aicraft labels
//sortByDataSource(); AircraftLabels = true;
$('#aircraft_label_checkbox').addClass('settingsCheckboxChecked'); $('#aircraft_label_checkbox').addClass('settingsCheckboxChecked');
} }
localStorage.setItem('showAircraftLabels', showAircraftLabels); localStorage.setItem('showAircraftLabels', showAircraftLabels);
} }
function toggleAllPlanes(switchToggle) { function toggleAllPlanes(switchToggle) {