The OpFlag request always returns an image sized (or resized) to 85x20, however if you specify a 20x16 size on the img tag then it should get resized back to its original 20x16:
Code: Select all
<script type="text/javascript">
if(VRS && VRS.globalDispatch && VRS.serverConfig) {
VRS.globalDispatch.hook(VRS.globalEvent.bootstrapCreated, function(bootStrap) {
if(VRS.renderPropertyHandlers) {
// Overwrite the standard operator flag renderer with a custom one.
// THIS MIGHT NEED TO BE MODIFIED WHEN NEW VERSIONS OF VRS ARE RELEASED
VRS.renderPropertyHandlers[VRS.RenderProperty.Country] = new VRS.RenderPropertyHandler({
property: VRS.RenderProperty.Country,
surfaces: VRS.RenderSurface.List + VRS.RenderSurface.DetailHead + VRS.RenderSurface.InfoWindow,
headingKey: 'ListCountry',
labelKey: 'Country',
sortableField: VRS.AircraftListSortableField.Country,
headingAlignment: VRS.Alignment.Centre,
suppressLabelCallback: function() { return true; },
fixedWidth: function() { return '20px'; },
hasChangedCallback: function(aircraft) { return aircraft.country.chg; },
renderCallback: function(aircraft) { return customFormatCountryFlagImageHtml(aircraft); },
tooltipChangedCallback: function(aircraft) { return aircraft.country.chg; },
tooltipCallback: function(aircraft) { return aircraft.country.val; }
});
}
});
}
function customFormatCountryFlagImageHtml(aircraft)
{
var codeToUse = '';
codeToUse = customPipeSeparatedCode(codeToUse, aircraft.manufacturer.val);
codeToUse = customPipeSeparatedCode(codeToUse, aircraft.country.val);
var result = '<img src="images/File-' + encodeURIComponent(codeToUse);
if(VRS.browserHelper.isHighDpi()) result += '/HiDpi';
result += '/OpFlag.png" width="20px" height="16px" />';
return result;
}
function customPipeSeparatedCode(text, code)
{
var result = text;
if(code && code.length) {
if(result.length) result += '|';
result += code;
}
return result;
}
</script>
You might have an issue with using the operator flag folder for your country flags, you run the risk of there being a clash between operator ICAOs and three letter country names. If you put the country flags into a separate folder then you could form up the URL in JavaScript for fetches from that folder.
To do this you would need to create a folder called Web somewhere and set that as the site root in the custom content plugin.
Under the Web folder create a folder called
images and within that create a folder called
country. Copy your country flags into the country folder. Make sure that the names are the same as the country names that VRS uses.
Then replace the customFormatCountryFlagImageHtml function in your script with this:
Code: Select all
function customFormatCountryFlagImageHtml(aircraft)
{
var result = '';
if(aircraft.country.val) {
var codeToUse = aircraft.country.val;
result = '<img src="images/web-country/Wdth-20/Hght-16';
if(VRS.browserHelper.isHighDpi()) result += '/HiDpi';
result += '/' + encodeURIComponent(codeToUse) + '.bmp" width="20px" height="16px" />';
}
return result;
}
