Leaflet Flight Radar Map

blocklogistics

Real-time commercial and cargo aviation radar on free OpenStreetMap/Esri tiles — no API key — with curved flight paths, callsigns, and flight telemetry.

Installation

$pnpm dlx uipkge-ng@latest add leaflet-flight-radar-map

$npx uipkge-ng@latest add leaflet-flight-radar-map

$yarn dlx uipkge-ng@latest add leaflet-flight-radar-map

$bunx uipkge-ng@latest add leaflet-flight-radar-map

Manifest:https://uipkge.dev/r/angular/leaflet-flight-radar-map.jsonInstalls to:src/app/components/blocks/leaflet-flight-radar-map/

Variants

Loading interactive previews…

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

Flight

interface Flight {
  id: string
  callsign: string
  airline: string
  origin: string
  destination: string
  originCoords: LngLat
  destinationCoords: LngLat
  coords: LngLat
  heading: number
  altitude: number
  speed: number
  aircraft: string
  status: 'Cruising' | 'Ascending' | 'Descending'
}

Includes

badge button card leaflet-map

Files installed (2)

src/app/components/blocks/leaflet-flight-radar-map/leaflet-flight-radar-map.component.ts9.9 kB

// Real-time commercial and cargo aviation radar on free OpenStreetMap/Esri tiles — no
// API key — with curved flight paths, callsigns, and flight telemetry. Port of the React block 1:1.
import { ChangeDetectionStrategy, Component, Input, ViewChild, signal } from '@angular/core'
import { cn } from '@/lib/utils'
import { UiBadgeComponent } from '@/ui/badge/badge.component'
import { UiButtonComponent } from '@/ui/button/button.component'
import {
  UiCardComponent,
  UiCardContentComponent,
  UiCardDescriptionComponent,
  UiCardHeaderComponent,
  UiCardTitleComponent,
} from '@/ui/card/card.component'
import {
  UiLeafletMapComponent,
  UiLeafletMarkerComponent,
  UiLeafletPolylineComponent,
} from '@/ui/leaflet-map/leaflet-map.component'

export type LngLat = [number, number]

export interface Flight {
  id: string
  callsign: string
  airline: string
  origin: string
  destination: string
  originCoords: LngLat
  destinationCoords: LngLat
  coords: LngLat
  heading: number
  altitude: number
  speed: number
  aircraft: string
  status: 'Cruising' | 'Ascending' | 'Descending'
}

export const DEFAULT_FLIGHTS: Flight[] = [
  {
    id: 'f-101',
    callsign: 'UAL482',
    airline: 'United Airlines',
    origin: 'SFO',
    destination: 'ORD',
    originCoords: [-122.379, 37.6213],
    destinationCoords: [-87.9073, 41.9742],
    coords: [-112.0, 39.5],
    heading: 78,
    altitude: 34000,
    speed: 520,
    aircraft: 'B787-9',
    status: 'Cruising',
  },
  {
    id: 'f-102',
    callsign: 'DAL1209',
    airline: 'Delta Air Lines',
    origin: 'LAX',
    destination: 'JFK',
    originCoords: [-118.4085, 33.9416],
    destinationCoords: [-73.7781, 40.6413],
    coords: [-104.5, 36.2],
    heading: 72,
    altitude: 38000,
    speed: 545,
    aircraft: 'A350-900',
    status: 'Cruising',
  },
  {
    id: 'f-103',
    callsign: 'AAL89',
    airline: 'American Airlines',
    origin: 'DFW',
    destination: 'SEA',
    originCoords: [-97.0403, 32.8998],
    destinationCoords: [-122.3088, 47.4502],
    coords: [-107.2, 42.1],
    heading: 325,
    altitude: 29000,
    speed: 480,
    aircraft: 'B737-MAX8',
    status: 'Cruising',
  },
  {
    id: 'f-104',
    callsign: 'FDX14',
    airline: 'FedEx Express',
    origin: 'MEM',
    destination: 'OAK',
    originCoords: [-89.9767, 35.0424],
    destinationCoords: [-122.2208, 37.7126],
    coords: [-115.8, 38.0],
    heading: 285,
    altitude: 22000,
    speed: 440,
    aircraft: 'B777-F',
    status: 'Descending',
  },
]

// CONUS center — a stable reference so the map's center input never re-fires.
const US_CENTER: LngLat = [-95.7129, 37.0902]

/** Quadratic-bezier arc between two [lng, lat] points — a perpendicular lift
 *  on the control point gives the route its radar-style curve. */
export function arcPath(from: LngLat, to: LngLat, segments = 32): LngLat[] {
  const midX = (from[0] + to[0]) / 2
  const midY = (from[1] + to[1]) / 2
  const dx = to[0] - from[0]
  const dy = to[1] - from[1]
  const ctrlX = midX - dy * 0.12
  const ctrlY = midY + dx * 0.12
  const points: LngLat[] = []
  for (let i = 0; i <= segments; i++) {
    const t = i / segments
    const a = (1 - t) * (1 - t)
    const b = 2 * (1 - t) * t
    const c = t * t
    points.push([a * from[0] + b * ctrlX + c * to[0], a * from[1] + b * ctrlY + c * to[1]])
  }
  return points
}

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-leaflet-flight-radar-map, [ui-leaflet-flight-radar-map]',
  standalone: true,
  imports: [
    UiBadgeComponent,
    UiButtonComponent,
    UiCardComponent,
    UiCardContentComponent,
    UiCardDescriptionComponent,
    UiCardHeaderComponent,
    UiCardTitleComponent,
    UiLeafletMapComponent,
    UiLeafletMarkerComponent,
    UiLeafletPolylineComponent,
  ],
  host: {
    'data-slot': 'leaflet-flight-radar-map',
    '[class]': 'hostClass',
  },
  template: `
    <div class="border-border bg-card relative h-[480px] overflow-hidden rounded-xl border">
      <ui-leaflet-map variant="dark" [center]="usCenter" [zoom]="4" class="h-full w-full">
        <!-- Planned route arcs (dashed) -->
        @for (f of flights; track f.id + '-route') {
          <ui-leaflet-polyline
            [lngLatPath]="routeArc(f)"
            [color]="activeId() === f.id ? '#38bdf8' : '#64748b'"
            [weight]="activeId() === f.id ? 2 : 1.5"
            [opacity]="activeId() === f.id ? 0.8 : 0.35"
            dashArray="4 6"
          />
        }
        <!-- Flown leg arcs (solid) -->
        @for (f of flights; track f.id + '-flown') {
          <ui-leaflet-polyline
            [lngLatPath]="flownArc(f)"
            [color]="activeId() === f.id ? '#38bdf8' : '#94a3b8'"
            [weight]="2"
            [opacity]="activeId() === f.id ? 0.9 : 0.45"
          />
        }

        @for (f of flights; track f.id) {
          <ui-leaflet-marker [lngLat]="f.coords" anchor="center">
            <button
              type="button"
              class="group relative flex cursor-pointer flex-col items-center"
              (click)="selectFlight(f)"
            >
              <span [class]="pinClass(f)" [style.transform]="'rotate(' + f.heading + 'deg)'">
                <svg class="size-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path
                    d="M12 1.5c-.8 0-1.5.7-1.5 1.6v5.1l-7.9 5.2v1.9l7.9-2.3v5.1l-2.4 1.7v1.6l3.9-1 3.9 1v-1.6l-2.4-1.7v-5.1l7.9 2.3v-1.9l-7.9-5.2V3.1c0-.9-.7-1.6-1.5-1.6Z"
                  />
                </svg>
              </span>
              <span [class]="callsignClass(f)">
                {{ f.callsign }}
              </span>
            </button>
          </ui-leaflet-marker>
        }
      </ui-leaflet-map>
    </div>

    <!-- Aviation Telemetry Radar Drawer -->
    <ui-card class="flex flex-col justify-between">
      <ui-card-header>
        <div class="flex items-center justify-between">
          <span ui-badge variant="outline" class="font-mono text-xs">{{ activeFlight().airline }}</span>
          <span ui-badge class="border-info/20 bg-info/10 text-info">
            {{ activeFlight().status }}
          </span>
        </div>
        <ui-card-title class="mt-2 font-mono text-xl">{{ activeFlight().callsign }}</ui-card-title>
        <ui-card-description class="flex items-center gap-2 font-mono text-xs">
          <span>{{ activeFlight().origin }}</span>
          <span>✈ ─── ✈</span>
          <span>{{ activeFlight().destination }}</span>
        </ui-card-description>
      </ui-card-header>
      <ui-card-content class="space-y-4">
        <div class="border-border bg-muted/50 grid grid-cols-2 gap-2 rounded-lg border p-2.5 font-mono text-xs">
          <div>
            <div class="text-muted-foreground text-xs uppercase">Altitude</div>
            <div class="text-foreground text-sm font-bold">{{ altitudeLabel(activeFlight()) }} ft</div>
          </div>
          <div>
            <div class="text-muted-foreground text-xs uppercase">Ground Speed</div>
            <div class="text-foreground text-sm font-bold">{{ activeFlight().speed }} kts</div>
          </div>
          <div class="mt-2">
            <div class="text-muted-foreground text-xs uppercase">Heading</div>
            <div class="text-foreground text-sm font-bold">{{ activeFlight().heading }}°</div>
          </div>
          <div class="mt-2">
            <div class="text-muted-foreground text-xs uppercase">Equipment</div>
            <div class="text-foreground text-sm font-bold">{{ activeFlight().aircraft }}</div>
          </div>
        </div>

        <!-- Flight Selector List -->
        <div class="border-border space-y-1 border-t pt-3">
          <div class="text-muted-foreground mb-1.5 font-mono text-xs tracking-wider uppercase">Monitored In-Flight</div>
          @for (f of flights; track f.id) {
            <button type="button" [class]="rowClass(f)" (click)="selectFlight(f)">
              <span class="font-mono">{{ f.callsign }} ({{ f.origin }}→{{ f.destination }})</span>
              <span class="font-mono text-xs opacity-75">{{ f.altitude / 1000 }}k ft</span>
            </button>
          }
        </div>

        <button ui-button variant="outline" size="sm" class="w-full font-mono text-xs" (click)="recenter()">
          Recenter Camera
        </button>
      </ui-card-content>
    </ui-card>
  `,
})
export class UiLeafletFlightRadarMapComponent {
  @Input() flights: Flight[] = DEFAULT_FLIGHTS
  @Input('class') className?: string

  @ViewChild(UiLeafletMapComponent) map?: UiLeafletMapComponent

  protected readonly usCenter = US_CENTER

  readonly activeId = signal(DEFAULT_FLIGHTS[0]?.id ?? '')

  get hostClass(): string {
    return cn('grid gap-4 lg:grid-cols-[1fr_320px]', this.className)
  }

  activeFlight(): Flight {
    return this.flights.find((f) => f.id === this.activeId()) ?? this.flights[0]!
  }

  routeArc(f: Flight): LngLat[] {
    return arcPath(f.originCoords, f.destinationCoords)
  }

  flownArc(f: Flight): LngLat[] {
    return arcPath(f.originCoords, f.coords)
  }

  selectFlight(f: Flight): void {
    this.activeId.set(f.id)
    this.map?.flyTo({ center: f.coords, zoom: 6.5 })
  }

  recenter(): void {
    this.selectFlight(this.activeFlight())
  }

  altitudeLabel(f: Flight): string {
    return f.altitude.toLocaleString()
  }

  pinClass(f: Flight): string {
    return cn(
      'text-info flex size-7 items-center justify-center rounded-full',
      this.activeId() === f.id ? 'bg-info/20 ring-2 ring-sky-400' : 'bg-background/80',
    )
  }

  callsignClass(f: Flight): string {
    return cn(
      'border-border bg-card/90 mt-1 rounded border px-1 py-0.5 font-mono text-xs font-semibold tracking-wider whitespace-nowrap shadow-xs',
      this.activeId() === f.id ? 'border-info/50 text-info' : 'text-foreground',
    )
  }

  rowClass(f: Flight): string {
    return cn(
      'flex w-full items-center justify-between rounded-md px-2 py-1.5 text-xs transition-colors',
      this.activeId() === f.id
        ? 'bg-accent text-accent-foreground font-semibold'
        : 'hover:bg-muted text-muted-foreground',
    )
  }
}

src/app/components/blocks/leaflet-flight-radar-map/index.ts0.1 kB

Raw manifest:https://uipkge.dev/r/angular/leaflet-flight-radar-map.json

Change language