FlightAware Discussions

Add Terrain Limit Rings To Skyaware Map


STEP -1: Include Terrain Limit Ring in your map at IP-of-PI/skyaware/


1.1 - First generate heywhatsthat.com panorama for your location.

To do this, follow the steps in first post of the following thread:

What is the Maximum Range I can Get?

1.2 - Once your panorama is generated, look near the top left of your newly created panorama page. See screenshot below.

You will see URL of your panorama there. The URL will be:
where XXXXXXXX is the ID for your panorama.

Copy-Paste your heywhatsthat panorama ID in Notepad and save it.



1.3 - Use following command to download the generated panorama’s JSON file to your RPi

The above command will save it as upintheair.json in the folder /usr/share/skyaware/html (replace XXXXXXXX in the command below by your panorama’s ID).

sudo wget -O /usr/share/skyaware/html/upintheair.json "http://www.heywhatsthat.com/api/upintheair.json?id=XXXXXXXX&refraction=0.25&alts=12192"  

To keep map un-cluttered, I have used only 1 ring in the wget command above, i.e. the 12192 meters (40,000 feet) ring.

1.4 - Reload your browser (Ctrl+F5). Clear browser cache if necessary (Ctrl+Shift+Delete)


STEP-2 (OPTIONAL): Change Terrain Ring from solid-black line to dashed-blue line.

(This will make Terrain Rings distinct from Range Circles).


2.1 - Make a backup copy of file script.js. This is important, as it will enable you to revert if you make a mistake or damage the file during editing.

cd /usr/share/skyaware/html/   
sudo cp script.js script.js.bak    

# To make sure that copy has been made, give following command
ls script*   

# The above command should list following files
script.js  script.js.bak

2.2 - Open file script.js for editing

sudo nano /usr/share/skyaware/html/script.js   

2.3 - Press Ctrl+W and type:

var ringStyle

then press Enter key. The cursor will jump to line starting with var ringStyle

2.4 - Change

color: '#000000'
color: '#0000ff'

2.5 - Add a new line:



Please see below for steps 2.4 & 2.5:


                var ringStyle = new ol.style.Style({
                        fill: null,
                        stroke: new ol.style.Stroke({ 
                                // change color from #000000 to #0000ff as below
                                color: '#0000ff',
                                // add line below for dashed terrain ring
                                width: 1

2.6 - Save file (Ctrl+O) and close it (Ctrl+X)

2.7 - Reload browser (Ctrl+F5)



To keep map un-cluttered, in the wget command above, I have used only 1 ring at 40,000 feet (12192 meters).

You can create as many rings as you want by adding elevations (in meters) at the end of URL given in the wget command above after &alts=, separated by commas.

10,000 ft = 3048 m
20,000 ft = 6096 m
25,000 ft = 7620 m
30,000 ft = 9144 m
40,000 ft = 12192 m

Hence if you want to add:

  • Two rings, one at 10,000 feet (3048 m) and other at 40,000 feet (12192 m), the string at the end of wget URL will become &alts=3048,12192

  • All the 5 elevation rings noted above, the string at the end of wget URL will become &alts=3048,6096,7620,9144,12192

Use altitude in meters in the wget URL above.
Do NOT use feet.


This is so freaking cool! Thanks for sharing this AND doing such a great job with the instructions!!!