Display Flight Radar Plots on Your Website With WordPress Shortcode or PHP

Flightradar24 is a flight tracking service that provides the web with real-time location information on thousands of commercial and recreational aircraft. Flight Radar receives its data primarily by ADSB and FAA radar , but their database is supplemented by data supplied by an army of volunteers that upload ADSB data (from their own receivers) to Flight Radar’s servers.

The process of including a map embedded within an iframe on your own website is exceedingly simple. The following embed URL is used:

<iframe src="http://www.flightradar24.com/simple_index.php?lat=49.9&lon=12.3&z=8" width="100%" height="100%"></iframe>


Why Create a Plugin?

We created a plugin only to simplify the (already simply) process of embedding a plot. The iframe URL that embeds the plot requires knowledge of a location’s latitude and longitude – something that’d scare many people away. Add to that the complexity of altering other options and we quickly justified a little work. Of course, we have bigger plans that’ll see us integrate other types of information from other data providers, so this is really just a start.

How to Use the Flight Radar WordPress Plugin

Usage is easy. Once downloaded and activated, the means in which you’ll get a plot embedded within your post or page is as follows:

[sc][flightradar code=”syd”][/sc] or [sc][flightradar code=”yssy”][/sc]

Note that either the IATA code of SYD or the ICAO code of YSSY can be used. When the shortcode is processed, a request is made to our Airports API. The latitude and longitude for the requested location is stored locally so no further requests are made to our API for that specific location.

The resulting default rendering looks like this:

[flightradar code=”syd”]

You’ll note a significant amount of branding on the embedded data; this is unavoidable. In fact, using the FlightRadar24 service requires that you provide attribution back to their website .

Available Shortcode Options

Available shortcode attributes are as follows:

code : 3-letter IATA or 4-letter ICAO airport code.
lat : Latitude (if known)
lng : Longitude (if known)
zoom : Zoom level, Defaults to 8.
width : Width of the rendered plot. Defaults to 100% of your post/page container.
height : Height of the rendered plot. Defaults to 350 pixels.
align : Alignment of the plot. Defaults to ‘center’.

For example, you could alter the plot size and zoom level with the shortcode of:

[sc][flightradar code=”yssy” zoom=”12″ height=”550″][/sc]

Flight Airports API

The Airports API will return various details relating to an airport – including the latitude and longitude required for the FlightRadar24 embed URL. Note: Usage of the API from outside of the Flight Radar plugin is not permitted (without asking, of course). We’ve had a few people build apps around our APIs without permission.

It’s always best to make a request using an ICAO code rather than the limiting IATA data. IATA data is more relevant to ports that accommodate RPT and therefore agent ticketing services… meaning that they represent only a small percentage of available ports. If you know the latitude and longitude for an airport, no request is made to the API. Remember, a request to the API is made only the first time you query a particular airport; data is then stored locally for future retrieval.

The older XML API will shortly be retired.

Google Maps JavaScript API

Google have recently changed the way maps render on a page. A Google Maps (JavaScript) API key is required with your server IP registered as a restriction. Register one here .

Display Flight Radar Plots on Your Website With WordPress Shortcode or PHP

Register your API Key at https://console.developers.google.com/

Note that we’ve listed our server IP address as a key restriction.

Basic Version

The advantages of shortcode can’t be overstated: they’re awesome. If you plan on ever embedding the FlightRadar24 data on your website, you would be wise to use shortcodes so that they can all be adjusted or amended in the future – globally.

If you’re not one for plugins, but you still keep a custom functions file, you can copy and paste the following code and use it in a manner similar to that as described above, with the exception that it won’t query the API (so you won’t be able to use airport codes). It’s designed for brevity.

	Display Flight Radar Plots on Your Website With WordPress Shortcode or PHP

function beliefmedia_flightradar_sc($atts, $content=null) {

  $atts = shortcode_atts(array(
   'lat' => '-33.94',
   'lng' => '151.16',
   'zoom' => '8',
   'width' => '100%',
   'height' => '500',
   'align' => 'center' 

 return '<p><div style="text-align:' . $atts['align'] . '"><iframe src="http://www.flightradar24.com/simple_index.php?lat=' . $atts['lat'] . '&lon=' . $atts['lng'] . '&z=' . $atts['zoom'] . '" width="' . $atts['width'] . '" height="' . $atts['height'] . '"></iframe></div></p>';
add_shortcode('flightradar', 'beliefmedia_flightradar_sc');


Shortcodes should always be used for repetitive tasks. If there’s a change to FlightRadar24 options in the future of if they offer additional display options, the changes can be made globally. If we chose to change radar provider in the future, include additional data, or cater to any changes a provider might make – all of which is likely – no alteration would be made on any page where we’ve already embedded data.

PHP Function

Used outside of WordPress, the following may be used.

	Display Flight Radar Plots on Your Website With WordPress Shortcode or PHP
	Set width and height to 100% for full page radar plot

function beliefmedia_flightradar($args) {

  $atts = array(
   'lat' => '-33.94',
   'lng' => '151.16',
   'zoom' => '8',
   'width' => '600',
   'height' => '500',
   'align' => 'center' 

 /* Merge $args with $atts */
 $atts = (empty($args)) ? $atts : array_merge($atts, $args);

 return '<p><div style="text-align:' . $atts['align'] . '"><iframe src="http://www.flightradar24.com/simple_index.php?lat=' . $atts['lat'] . '&lon=' . $atts['lng'] . '&z=' . $atts['zoom'] . '" width="' . $atts['width'] . '" height="' . $atts['height'] . '"></iframe></div></p>';

/* Usage */
echo beliefmedia_flightradar();

To have a plot fill your entire screen, set width and height to 100%.


A couple of individuals have copied virtually all our code and created plugin without any attribution. The API, in particular, cannot be used (outside of the plugin) without permission.


[bmplugin name=”flight-radar”]

[download shortcode=”135″ php=”136″]

Like this article?

Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on Linkdin
Share on pinterest
Share on Pinterest

Leave a comment