The Blog

Script: Bookmarklet to add ATC radio callsigns to flightradar24

I've recently spent some time using the website flightradar24, because it has some similarities to the system I'm designing for my A-level Computing project. It crowd-sources radar data from volunteers to provide a live map of all aircraft flying in the world, where they're from, where they're going, and plenty more.

flightradar24 screenshot

In viewing this website, I've fallen down the rabbit hole of aviation enthusiasm, and in my fascination as to how the air-traffic system can actually cope with so much going on, I've found myself spending hours on YouTube channels such as VASAviation, H89SA, and Daniel Mori. From here, I've seen that on ATC, aircraft use callsigns which may differ from their airline's actual name. One of the most famous being British airways using callsign SPEEDBIRD. They also add HEAVY to the end if they are big enough to cause a lot of turbulance, and SUPER if they are specifically an A380. So the 747 in the above screenshot would have callsign 'SPEEDBIRD 9-CHARLIE-GOLF HEAVY' when read out over the radio using the NATO phonetic alphabet. I've heard that some enthusiasts are interested in knowing these callsigns while watching a site like flightradar24, as it allows them to associate it with ATC radio that they might be listening into online.

Therefore, I have created a bookmarklet which adds this functionality to the flightradar24 website!

Using fr24.js

Your best option is to enable your bookmark bar, which can be done with Ctrl+Shift+B on Google Chrome, and then drag the following 'fr24.js' link into the bookmarks bar. Then:

  • Go to flightradar24
  • Click the bookmarklet
  • Now it will show up on any plane you click!

Here's the bookmarklet link: fr24.js*

Screenshot of fr24.js in use

Because I can't consider myself the master of all that is JavaScript, the system isn't perfect, and there are a few issues I'd like to fix

  • Doesn't currently cope with private planes using their registration as callsigns (to be fixed soon)
  • Currently the database may favour some old callsigns over the correct one (not too common, can be fixed case-by-case or by finding an up-to-date database)
  • Sometimes panics or gives the wrong callsign when fr24 is being supplied an unusual or incorrect callsign

But if you're just using it for general enthusiasm, it should be fine!

The technical side

This is one of those projects that I wrote fast for personal or close-circle use, and decided others might like it. As a result, the code is occasionally barbaric.

It first makes itself a nice new row in which it will later put the callsign. Then (and here's where the barbaric code comes in), it periodically checks the information in the black box below the aircraft's picture to determine the callsign. Sometimes that appears as the only thing in the box, as the large text (this can usually be determined by seeing if the third character is a letter). However with a lot of commercial planes, it appears next to it, in the slightly smaller format.

Then the system looks up the three-digit callsign on a list about 5000-long which currently resides within the .js file. It puts that into a string.

Then it takes the rest of the callsign (everything after those first three letters) and runs through it one character at a time, replacing the letters with their phonetic equivilents. It adds this to the final string.

It then checks the turbulance rating of the aircraft, also taken from an ICAO document. The list of aircraft codes considered 'heavies' are in the .js file (I am aware that some areas call the 757 'heavy' due to it's ususual wake turbulance given it's weight, but I've not included it currently). If it see's that the code of the aircraft (which is in the table that fr24 loads) is a heavy, it adds 'HEAVY' to the final string, but it first checks to see if it is specifically an A388 (in which case it would instead add 'SUPER').

It then puts this callsign into the table.

The bookmarklet simply adds a script element to the page and references the full script with an additional query of a random number for cache-busting (Avoiding your caching as well as my Cloudflare account by forcing it to grab the latest copy from my server under the white lie that the random number it's sending makes any difference).

I'm interested in hearing your comments on this small script. I'm still writing my blog (as in, writing the code that makes my blog work) so feel free to drop me a line on [email protected] and let me know if I can credit you on any subsequent post if you have a nice idea.

Joel Russell has no official ties with and has created this script for the sake of it, and for a bit of fun.

Last post: Script: Tesselating hexagons of random shades for a background