Build a Live Flight Radar in a Single HTML File This article explains how to create a live flight radar using a single HTML file that requires no npm, frameworks, or backend. It uses Leaflet.js for the interactive map and a free AirLabs API to display real-time ADS-B aircraft positions, updating every 30 seconds. The complete code is under 100 lines and only requires replacing a placeholder API key to function. One HTML file. No npm, no frameworks, no backend. Open it in a browser and watch live aircraft move across an interactive map. We'll use Leaflet.js https://leafletjs.com/ for the map and a free aviation API for real-time ADS-B positions. The whole thing is under 100 lines of code, and the planes update every 30 seconds. What We're Building An interactive radar-style map that: - Shows live aircraft positions over any region you choose - Rotates plane icons to match actual heading - Color-codes planes by altitude green → yellow → red - Displays flight number, route, speed and altitude on click - Auto-refreshes every 30 seconds without reloading the page Before You Start Grab a free API key from AirLabs https://airlabs.co/ — takes 30 seconds, no credit card. Their free tier returns real-time lat/lng, heading, altitude, speed, and route data, which is everything we need for a map. The Full Code I'll show the complete file first, then walk through how it works. Create a file called radar.html , paste this in, replace YOUR API KEY , and open it in your browser: < DOCTYPE html