Embedding a Live ADSB Flight Tracker in Astro

Tracking Flights from Oklahoma City

I have been working with an ADSB receiver I setup at my house to track local flights and catch some of the planes flying in and out of the area. I decided to embed that data directly into this blog so visitors can view the real-time flight map.

Since this site is built with Astro, I created a component to handle the map embed.

Building the Map Component

I created a custom <AdsbMap /> component to embed the live feed from globe.adsbexchange.com. It is important to note that the data displayed on this map is pulled directly from my own local ADSB receiver, which feeds the data to the exchange before being embedded here. I used an iframe and passed the &kiosk parameter to hide the sidebar and menu buttons.

The kiosk mode sets the user interface scale to 200%. To adjust this and make the elements scale correctly within the blog layout, I added the &iconScale=1.14 and &scale=0.875 parameters. This counteracts the kiosk zoom while keeping the popup windows proportional.

I also centered the map over Oklahoma City using the lat and lon parameters.

Here is the code for the Astro component:

---
// You can pass props here if you want to change the height later
const { height = "600px" } = Astro.props;
---

<div class="adsb-container my-8 w-full overflow-hidden rounded-2xl border border-zinc-200 shadow-lg dark:border-zinc-800">
  <iframe 
    src="https://globe.adsbexchange.com/?feed=tgjJxWnpMoWO&hideSideBar&hideButtons&kiosk&iconScale=1.14&scale=0.875&lat=35.4676&lon=-97.5164&zoom=10" 
    width="100%" 
    height={height}
    style="border:0;"
    title="ADSB Flight Tracker"
    allow="fullscreen"
  ></iframe>
</div>

<style>
  .adsb-container {
    aspect-ratio: 16 / 9;
    max-height: 80vh;
  }
</style>

The real-time map is now integrated and displayed on the homepage.