{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "leaflet-flight-radar-map", "title": "Leaflet Flight Radar Map", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/leaflet-flight-radar-map/leaflet-flight-radar-map.component.ts", "content": "// Real-time commercial and cargo aviation radar on free OpenStreetMap/Esri tiles — no\n// API key — with curved flight paths, callsigns, and flight telemetry. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, ViewChild, signal } from '@angular/core'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport {\n UiLeafletMapComponent,\n UiLeafletMarkerComponent,\n UiLeafletPolylineComponent,\n} from '@/ui/leaflet-map/leaflet-map.component'\n\nexport type LngLat = [number, number]\n\nexport interface Flight {\n id: string\n callsign: string\n airline: string\n origin: string\n destination: string\n originCoords: LngLat\n destinationCoords: LngLat\n coords: LngLat\n heading: number\n altitude: number\n speed: number\n aircraft: string\n status: 'Cruising' | 'Ascending' | 'Descending'\n}\n\nexport const DEFAULT_FLIGHTS: Flight[] = [\n {\n id: 'f-101',\n callsign: 'UAL482',\n airline: 'United Airlines',\n origin: 'SFO',\n destination: 'ORD',\n originCoords: [-122.379, 37.6213],\n destinationCoords: [-87.9073, 41.9742],\n coords: [-112.0, 39.5],\n heading: 78,\n altitude: 34000,\n speed: 520,\n aircraft: 'B787-9',\n status: 'Cruising',\n },\n {\n id: 'f-102',\n callsign: 'DAL1209',\n airline: 'Delta Air Lines',\n origin: 'LAX',\n destination: 'JFK',\n originCoords: [-118.4085, 33.9416],\n destinationCoords: [-73.7781, 40.6413],\n coords: [-104.5, 36.2],\n heading: 72,\n altitude: 38000,\n speed: 545,\n aircraft: 'A350-900',\n status: 'Cruising',\n },\n {\n id: 'f-103',\n callsign: 'AAL89',\n airline: 'American Airlines',\n origin: 'DFW',\n destination: 'SEA',\n originCoords: [-97.0403, 32.8998],\n destinationCoords: [-122.3088, 47.4502],\n coords: [-107.2, 42.1],\n heading: 325,\n altitude: 29000,\n speed: 480,\n aircraft: 'B737-MAX8',\n status: 'Cruising',\n },\n {\n id: 'f-104',\n callsign: 'FDX14',\n airline: 'FedEx Express',\n origin: 'MEM',\n destination: 'OAK',\n originCoords: [-89.9767, 35.0424],\n destinationCoords: [-122.2208, 37.7126],\n coords: [-115.8, 38.0],\n heading: 285,\n altitude: 22000,\n speed: 440,\n aircraft: 'B777-F',\n status: 'Descending',\n },\n]\n\n// CONUS center — a stable reference so the map's center input never re-fires.\nconst US_CENTER: LngLat = [-95.7129, 37.0902]\n\n/** Quadratic-bezier arc between two [lng, lat] points — a perpendicular lift\n * on the control point gives the route its radar-style curve. */\nexport function arcPath(from: LngLat, to: LngLat, segments = 32): LngLat[] {\n const midX = (from[0] + to[0]) / 2\n const midY = (from[1] + to[1]) / 2\n const dx = to[0] - from[0]\n const dy = to[1] - from[1]\n const ctrlX = midX - dy * 0.12\n const ctrlY = midY + dx * 0.12\n const points: LngLat[] = []\n for (let i = 0; i <= segments; i++) {\n const t = i / segments\n const a = (1 - t) * (1 - t)\n const b = 2 * (1 - t) * t\n const c = t * t\n points.push([a * from[0] + b * ctrlX + c * to[0], a * from[1] + b * ctrlY + c * to[1]])\n }\n return points\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-leaflet-flight-radar-map, [ui-leaflet-flight-radar-map]',\n standalone: true,\n imports: [\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiLeafletMapComponent,\n UiLeafletMarkerComponent,\n UiLeafletPolylineComponent,\n ],\n host: {\n 'data-slot': 'leaflet-flight-radar-map',\n '[class]': 'hostClass',\n },\n template: `\n
\n \n \n @for (f of flights; track f.id + '-route') {\n \n }\n \n @for (f of flights; track f.id + '-flown') {\n \n }\n\n @for (f of flights; track f.id) {\n \n \n \n \n \n \n \n \n {{ f.callsign }}\n \n \n \n }\n \n
\n\n \n \n \n
\n {{ activeFlight().airline }}\n \n {{ activeFlight().status }}\n \n
\n {{ activeFlight().callsign }}\n \n {{ activeFlight().origin }}\n ✈ ─── ✈\n {{ activeFlight().destination }}\n \n \n \n
\n
\n
Altitude
\n
{{ altitudeLabel(activeFlight()) }} ft
\n
\n
\n
Ground Speed
\n
{{ activeFlight().speed }} kts
\n
\n
\n
Heading
\n
{{ activeFlight().heading }}°
\n
\n
\n
Equipment
\n
{{ activeFlight().aircraft }}
\n
\n
\n\n \n
\n
Monitored In-Flight
\n @for (f of flights; track f.id) {\n \n }\n
\n\n \n \n \n `,\n})\nexport class UiLeafletFlightRadarMapComponent {\n @Input() flights: Flight[] = DEFAULT_FLIGHTS\n @Input('class') className?: string\n\n @ViewChild(UiLeafletMapComponent) map?: UiLeafletMapComponent\n\n protected readonly usCenter = US_CENTER\n\n readonly activeId = signal(DEFAULT_FLIGHTS[0]?.id ?? '')\n\n get hostClass(): string {\n return cn('grid gap-4 lg:grid-cols-[1fr_320px]', this.className)\n }\n\n activeFlight(): Flight {\n return this.flights.find((f) => f.id === this.activeId()) ?? this.flights[0]!\n }\n\n routeArc(f: Flight): LngLat[] {\n return arcPath(f.originCoords, f.destinationCoords)\n }\n\n flownArc(f: Flight): LngLat[] {\n return arcPath(f.originCoords, f.coords)\n }\n\n selectFlight(f: Flight): void {\n this.activeId.set(f.id)\n this.map?.flyTo({ center: f.coords, zoom: 6.5 })\n }\n\n recenter(): void {\n this.selectFlight(this.activeFlight())\n }\n\n altitudeLabel(f: Flight): string {\n return f.altitude.toLocaleString()\n }\n\n pinClass(f: Flight): string {\n return cn(\n 'text-info flex size-7 items-center justify-center rounded-full',\n this.activeId() === f.id ? 'bg-info/20 ring-2 ring-sky-400' : 'bg-background/80',\n )\n }\n\n callsignClass(f: Flight): string {\n return cn(\n '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',\n this.activeId() === f.id ? 'border-info/50 text-info' : 'text-foreground',\n )\n }\n\n rowClass(f: Flight): string {\n return cn(\n 'flex w-full items-center justify-between rounded-md px-2 py-1.5 text-xs transition-colors',\n this.activeId() === f.id\n ? 'bg-accent text-accent-foreground font-semibold'\n : 'hover:bg-muted text-muted-foreground',\n )\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/leaflet-flight-radar-map/leaflet-flight-radar-map.component.ts" }, { "path": "packages/registry-angular/blocks/leaflet-flight-radar-map/index.ts", "content": "export {\n UiLeafletFlightRadarMapComponent,\n DEFAULT_FLIGHTS,\n arcPath,\n type Flight,\n type LngLat,\n} from './leaflet-flight-radar-map.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/leaflet-flight-radar-map/index.ts" } ], "dependencies": [], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/leaflet-map.json" ], "description": "Real-time commercial and cargo aviation radar on free OpenStreetMap/Esri tiles — no API key — with curved flight paths, callsigns, and flight telemetry.", "categories": [ "logistics", "aviation", "map" ] }