{"slug": "build-a-live-flight-radar-in-a-single-html-file", "title": "Build a Live Flight Radar in a Single HTML File", "summary": "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.", "body_md": "One HTML file. No npm, no frameworks, no backend. Open it in a browser and watch live aircraft move across an interactive map.\n\nWe'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.\n\n## What We're Building\n\nAn interactive radar-style map that:\n\n- Shows live aircraft positions over any region you choose\n- Rotates plane icons to match actual heading\n- Color-codes planes by altitude (green → yellow → red)\n- Displays flight number, route, speed and altitude on click\n- Auto-refreshes every 30 seconds without reloading the page\n\n## Before You Start\n\nGrab 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.\n\n## The Full Code\n\nI'll show the complete file first, then walk through how it works. Create a file called `radar.html`\n\n, paste this in, replace `YOUR_API_KEY`\n\n, and open it in your browser:\n\n```\n\n\n\n\nLive Flight Radar\n\n\n\n\n\n\n
\n\n\n\n\n\n```\n\nThat's the entire thing. Let's break it down.\n\n## How It Works\n\n### The Map\n\nWe initialize Leaflet with CARTO's dark basemap — it gives that clean radar aesthetic, and it's free. The map centers automatically on whatever bounding box you configure.\n\n``` js\nconst BBOX = [44, 2, 52, 20]; // south-lat, west-lng, north-lat, east-lng\n```\n\nChange this to any region you want:\n\n-\n**USA (lower 48)**:`[24, -125, 50, -66]`\n\n-\n**Southeast Asia**:`[-10, 95, 25, 145]`\n\n-\n**UK + Ireland**:`[49, -11, 60, 2]`\n\n-\n**Middle East**:`[12, 32, 42, 62]`\n\n-\n**Your city**: grab coordinates from Google Maps, add ±2 degrees\n\n### The API Call\n\nOne `fetch()`\n\nto the AirLabs `/flights`\n\nendpoint with a bounding box filter:\n\n``` js\nconst url = `https://airlabs.co/api/v9/flights`\n + `?api_key=${API_KEY}`\n + `&bbox=${BBOX.join(\",\")}`\n + `&_fields=hex,flag,lat,lng,dir,alt,speed,flight_iata,dep_iata,arr_iata,aircraft_icao`;\n```\n\nThe `_fields`\n\nparameter limits the response to only what we need — keeps it fast. A typical European bounding box returns 500–1500 flights depending on time of day.\n\n### Plane Icons\n\nEach plane is a Leaflet `DivIcon`\n\n— a rotated ✈ character. The `dir`\n\nfield from the API gives heading in degrees, so we apply a CSS `rotate()`\n\ntransform. Color is based on altitude:\n\n| Altitude | Color | Meaning |\n|---|---|---|\n| < 3,000m | 🟢 Green | Climbing or descending |\n| 3,000–8,000m | 🟡 Yellow | Mid-altitude |\n| > 8,000m | 🔴 Red | Cruising altitude |\n\n### Auto-Refresh\n\nA simple `setInterval`\n\ncounts down from 30 seconds. When it hits zero, it calls `fetchFlights()`\n\nagain — clears old markers, fetches new positions, plots them. The HUD in the top-left shows the flight count, last update time, and countdown to next refresh.\n\nNo WebSockets, no server, no state management. Just clear and redraw.\n\n## Customization Ideas\n\n**Filter by airline** — add `&airline_iata=UA`\n\nto the URL to show only United Airlines flights. Great for monitoring a specific carrier.\n\n**Departure board** — swap `/flights`\n\nfor `/schedules?dep_iata=JFK`\n\nto build a live airport departure board. Returns gate, terminal, delay, and status.\n\n**Draw flight paths** — when user clicks a plane, fetch the route with `/routes?dep_iata=${dep}&arr_iata=${arr}`\n\nand draw a great-circle arc between the airports using Leaflet's polyline.\n\n**Add airports** — fetch `/airports?_fields=iata_code,name,lat,lng`\n\nand plot them as circles on the map. Now your radar has reference points.\n\n**Mobile PWA** — wrap this HTML in a simple service worker and add a manifest. You've got a progressive web app that works offline (minus the live data) and installs on your home screen.\n\n## Deployment\n\nThis is a single HTML file with zero dependencies (Leaflet loads from CDN). You can:\n\n-\n**GitHub Pages**— push`radar.html`\n\nas`index.html`\n\n, enable Pages, done -\n**Netlify / Vercel**— drag and drop the file -\n**Literally any web server**— it's static HTML\n\nOne caveat: the API key is visible in client-side code. For a personal project or portfolio demo, this is fine — just use the free tier key and don't worry about it. For production, proxy the request through a small serverless function (Cloudflare Workers or Vercel Edge work great for this).\n\nThe entire project is 93 lines of HTML/CSS/JS. No build step, no `node_modules`\n\n, no dependencies to update. Just a file that shows you where every plane in the sky is, right now.", "url": "https://wpnews.pro/news/build-a-live-flight-radar-in-a-single-html-file", "canonical_source": "https://dev.to/sergeysta/build-a-live-flight-radar-in-a-single-html-file-p9p", "published_at": "2026-05-22 21:35:43+00:00", "updated_at": "2026-05-22 22:02:09.095605+00:00", "lang": "en", "topics": ["developer-tools", "data", "products"], "entities": ["Leaflet.js", "AirLabs", "ADS-B"], "alternates": {"html": "https://wpnews.pro/news/build-a-live-flight-radar-in-a-single-html-file", "markdown": "https://wpnews.pro/news/build-a-live-flight-radar-in-a-single-html-file.md", "text": "https://wpnews.pro/news/build-a-live-flight-radar-in-a-single-html-file.txt", "jsonld": "https://wpnews.pro/news/build-a-live-flight-radar-in-a-single-html-file.jsonld"}}