How VRS displays aircraft icons

Want to post something that doesn't quite fit into the other forums? This is the place for that.
Post Reply
Posts: 36
Joined: Fri Feb 19, 2016 11:58 pm

How VRS displays aircraft icons

Post by WeKnowMC » Tue May 23, 2017 5:59 pm

I am trying to edit ProHill's flight database setup ( to allow for the map page to display aircraft icons (in the exact same way VRS does) instead of the standard google map api arrows in the tracked log map. If you are unfamiliar with the setup, I am basically trying to implement the SVGs from VRS as a symbol on a google maps polyine. So far, I have added the ability to display aircraft icons on the google map polyine, which is working fine.

The problem is that I am failing to work out how VRS knows which aircraft icon to serve for each aircraft. Judging by the existing aircraft icon names, I understand that model code specific names (e.g. TypeA380) is specifically for an A380, the same for TypeA340 and TypeGLID etc. However, the TypeGLFx icon doesn't seem to follow the same rules as this as I have seen many other jets with the TypeGLFx icon in VRS that don't start with GLF (e.g. FA20, C550 etc.). Are there exceptions to this icon? Is there possibly a list of model codes that VRS will serve the TypeGLFx icon to when the aircraft's model code matches?

Posts: 2249
Joined: Fri Feb 17, 2012 3:20 am

Re: How VRS displays aircraft icons

Post by agw » Fri Jun 09, 2017 12:12 am

VRS sets up an array of AircraftMarker objects in AircraftPlotter.ts (which gets compiled down to JavaScript) - at time of writing the list starts at line 227 here: ... Plotter.ts

When it wants to choose an aircraft icon it works its way through the list passing the aircraft object to a function called matches() on each AircraftMarker object. The first aircraft marker that returns true is the one that gets used. The rest of the chosen AircraftMarker object describes the marker.

The last entry in the list has a matches() function that always returns true, and that describes the generic aircraft marker.

Most matches() methods are along the lines that you've described, they just compare type codes. The one for Type-GLFx.png is a bit more complicated, it returns true if:

1. The engine type is "Jet" and either
2a. The wake turbulence category is "Light" or
2b. The wake turbulence category is "Medium" and the engine placement is "Aft Mounted".

Users can add their own custom markers to VRS by shifting their own AircraftMarker objects to the beginning of the array that VRS constructs when the site starts up.

Posts: 30
Joined: Sun Jul 16, 2017 10:01 pm

Re: How VRS displays aircraft icons

Post by MK2wx » Mon Aug 21, 2017 9:54 am

I'd really appreciate some time taken to allow VRS to know how to show glider types correctly. They are beautiful to see and watch, but not so much when they are represented by a generic icon. ;)

They do seem to be a somewhat special case as there really are so many variants, and all valid as far as I can discover. I'd guess that GLID is almost in the minority by now too.

I've tired and failed with custom etc, and so have others. It's too technical for some of us who really are just end users. I've even downloaded work from others where they have offered it, installed the plugin and still not had it work. I've followed whatever instructions exist and I could find, but apparently those are sadly not sufficient for a good outcome to date.

It's all a bit frustrating really.

Posts: 16
Joined: Sat Mar 30, 2013 7:14 pm

Re: How VRS displays aircraft icons

Post by shish0r » Thu May 28, 2020 11:12 pm


I've been trying to use the method below to add in some custom markers but it doesn't seem to do anything. Is this the current best way to add custom markers? My method has been:

Install latest preview V3 VRS (3.0.0 Beta 29/03/2020 21:04:43)
Install Custom Content plugin
Enable Custom Content plugin
Provide custom site root structure which includes custom markers in <custom web root>/images/markers/
Provide alternative aircraftPlotter.ts file in <custom web root>/script/vrs/ directory with the following example addition (note I have delibaratley assigned a CH47 image to type B738 to generate a few more markers on the display for testing):

Code: Select all

	new VRS.AircraftMarker({
            normalFileName:     'CH47.png',
            selectedFileName:   'CH47-Selected.png',
            embeddedSvg:        EmbeddedSvgs.Marker_TypeCH47,
            size:               { width: 40, height: 40},
            matches:            function(aircraft) { return aircraft.modelIcao.val === 'B738'; }
I have also made sure to put this in the list of marker types towards the top (it is just after the Helicopter one). Then restarted the server and loaded a fresh copy of the web-site in my browser (to clear any caching).

I am running VRS under Mono4 on a Debian Linux build.

I also tried the method listed in ... =805#p4019 which managed to change the markers, but then the text displayed below the aircraft changed from being transparent to appearing in a gray box, hence I tried the other method you seem to suggest below to see if that was any better (I also note this thread is more recent than the other one and wondered if this was a more up to date way to add custom markers).



Posts: 16
Joined: Sat Mar 30, 2013 7:14 pm

Re: How VRS displays aircraft icons

Post by shish0r » Fri May 29, 2020 1:58 pm

So I've been thinking a bit more and looking around and must confess I'm not a coding expert so apologies if this is alla bit confused.

With respect to my last message, I presume then that the inject method is the best way to modify the contents of aircraftPlotter.ts so effectivley both methods I listed achieve the same result (if done correctly).

I presume the issue with aircraft text having to be rendered in a gray box is due to using .png graphics for the aircraft markers, rather than SVG graphics? If so, is the best way to have custom markers with nicely rendered text to avoid using the .png files and use SVG images instead (.png markers still remain important for browsers that can't render SVG as a back-up)? From what I can see this would mean injecting those into /script/VRS/embeddedSvgs.ts (this is where I can see the other SVG items from the standard web-site)? If thats correct, how would this best be done? Also, what did you use to generate the SVG xml content? I have found several different SVG graphics tools but they all produce slightly different output and it would be great to use as close as possible as method as used in the original site (maximum chance of working and minimum chance of secondary issues).

Has anybody else done this, or are all customer markers being done using image files rather than SVG rendering?

Hope that all makes sense and thanks in advance for any help.


Posts: 16
Joined: Sat Mar 30, 2013 7:14 pm

Re: How VRS displays aircraft icons

Post by shish0r » Sun May 31, 2020 10:36 pm

So replying to my own post here again. I have now worked out how to do this and am happily creating custom embeded SVG files for VRS which is working well. :D

For anybody that is interested I will happily share what I have so far, which includes the following custom SVG's:

Eurofighter Typhoon
BAE Hawk
CH-47 Chinook

And I intend to do several more, including:

EH101/Merlin (to represent large Helicopters)
Hawker Hunter (for generic Fast jet)
Global Express


Posts: 22
Joined: Wed Nov 23, 2016 6:22 pm
Location: JO01ou

Re: How VRS displays aircraft icons

Post by Feek » Wed Jun 03, 2020 3:40 pm

shish0r wrote:
Sun May 31, 2020 10:36 pm
For anybody that is interested I will happily share what I have so far, which includes the following custom SVG's
Oh yes please.

Posts: 16
Joined: Sat Mar 30, 2013 7:14 pm

Re: How VRS displays aircraft icons

Post by shish0r » Wed Jun 03, 2020 11:07 pm

I've done the first batch I intended to do which now includes:

Spitfire - currently just set to "SPIT" and "HURR" ICAO types (used to represent warbirds, will add more types to this later)
F35 - set to "F35" and "VF35" ICAO types
Eurofighter Typhoon - set to "EUFI" ICAO type
Microlight/Ultralight - set to "ULAC" ICAO type
CH47 - set to "H47" ICAO type
Hawk - set to "HAWK" ICAO type
A400M - set to "A400" ICAO type
Global Express - set to "GLEX" ICAO type
C17 - set to "C17" ICAO type
EH101 - set to "EH101" and "S61" ICAO types (used to represent larger helicopters)
V22 - set to "V22" ICAO type
Autogyro - set to "MT", "CDUS", "CLON" and "MM16" ICAO types
E3 - set to "E3" ICAO type
F16 - set to "F16" ICAO type
T6 - set to "T6", "PC21" and "PC12" ICAO types (used to represent single engine turboprops)

You will need to install the custom content plug-in and set this up in accordance with the linked post earlier about how to over-ride markers with custom ones.

Additional ICAO types can be added to the each marker with relative ease, see line 151 as an example.

Note my coding skills are a bit limited so it might not be as neat as it possibly could be (I currently have two high level if statements to define the embeded markers and then separatley to assign them to ICAO types which is no doubt unnecessary) but it seems to work nicely for me. :D

I'll probably add some more in at some point in the future.

Feedback welcome. As these are based on 'real' scale images some of the engines/rotors aren't as prononced as in the markers Andrew provides with the base program, but I have tried to scale and adapt them to match as close as possible the style Andrew used so they don't look odd. Of all of them the Autogyro is probably the least appealing so I may re-do that in the future. I'm also happy to do the odd request, but be reasonable, at the scale the images are there is no point having different markers for a Cessna 152 vs. a Cessna 172. ;)

I hope it is of use.

Now, if anybody knows how to set the fill colour using aircraft properties (e.g. isInteresting, isMilitary, ICAO operator code) then I'd love to know....


Posts: 16
Joined: Sat Mar 30, 2013 7:14 pm

Re: How VRS displays aircraft icons

Post by shish0r » Thu Jun 04, 2020 9:14 am

Several updates to the file today to correct ICAO codes and add in the Hunter marker. For future changes refer to GitHub.


Post Reply