# How to Enable the Live Flights Data Layer in God's Eye View

> Easily enable the live flights data layer in God's Eye View using the UI toggle or programmatic calls for real time flight tracking.

- Repository: [Bilawal Sidhu/gods-eye-view](https://github.com/bilawalsidhu/gods-eye-view)
- Tags: how-to-guide
- Published: 2026-09-06

---

**Enable the live flights data layer in God's Eye View by toggling the "Flights" button in the UI or calling `dataManager.setLayerParams('flights', { active: true })` programmatically.**

The live flights layer displays real-time commercial aircraft positions from ADS-B feeds. In `bilawalsidhu/gods-eye-view`, this layer is managed by the central **DataManager** class and rendered through the `FlightsLayer` implementation. This guide covers both UI and programmatic activation methods with exact code paths from the source.

## How the Flights Layer Works

The flights data layer follows a three-part architecture:

- **[`src/data/flights.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/data/flights.js)** — Implements `FlightsLayer` with polling logic for the ADS-B feed, position history, and billboard rendering
- **[`src/data/manager.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/data/manager.js)** — **DataManager** class that registers layers and exposes `setLayerParams()` and `isEnabled()` methods
- **[`src/ui.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/ui.js)** — UI controls including the "Flights" toggle button that interfaces with the DataManager

When activated, the layer polls `/api/adsblol/flights` and renders aircraft as amber (`#FFB800`) billboards that update continuously.

## Method 1: Enable via the UI Toggle

The simplest approach for end users is clicking the dedicated flights button.

1. Locate the **"Flights"** toggle in the left sidebar or the global context button (`#global-context-flights-btn`)
2. Click to activate — the handler in [`src/ui.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/ui.js) calls the DataManager automatically

The UI syncs button state through this check:

```javascript
// From src/ui.js — state retrieval for the flights toggle
flightsEnabled: !!this._dataManager?.isEnabled('flights')

```

The `isEnabled('flights')` method returns the layer's active status from the DataManager registry.

## Method 2: Programmatic Activation

For custom integrations, browser console debugging, or automated startup configurations, call the DataManager directly.

### Access the Global Instance

```javascript
// Assuming the global app object is exposed as window.godseye
const dm = window.godseye?.dataManager;

// Enable live flights
dm?.setLayerParams('flights', { active: true });

// Verify activation
console.log('Flights layer active:', dm?.isEnabled('flights'));

```

### Full Standalone Example

```javascript
import { DataManager } from './src/data/manager.js';
import { flightsLayer } from './src/data/flights.js';

// Instantiate and register
const dm = new DataManager();
dm.registerLayer('flights', flightsLayer);

// Activate the layer
dm.setLayerParams('flights', { active: true });

// Deactivate when needed
dm.setLayerParams('flights', { active: false });

```

The `setLayerParams()` method in [`src/data/manager.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/data/manager.js) handles:
- Starting/stopping the poll loop to the ADS-B endpoint
- Notifying the renderer to show or hide billboards
- Updating internal state checked by `isEnabled()`

## Method 3: Configuration at Initialization

To enable flights automatically on app startup, set the layer params during DataManager construction or in your initialization sequence:

```javascript
// Within your app bootstrap (e.g., src/main.js or equivalent)
const dataManager = new DataManager();

// Pre-enable flights before UI renders
dataManager.setLayerParams('flights', { active: true });

// Then mount the UI
const ui = new UI({ dataManager });
ui.render();

```

## Disabling the Flights Layer

To stop data consumption and free GPU resources:

```javascript
// Via DataManager
dataManager.setLayerParams('flights', { active: false });

// Or toggle via UI — same underlying call

```

When disabled, the layer:
- Halts polling to `/api/adsblol/flights`
- Clears active billboards from the scene
- Preserves no aircraft history (stateless deactivation)

## Key Source Files

| File | Purpose |
|------|---------|
| [`src/data/flights.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/data/flights.js) | `FlightsLayer` class — ADS-B polling, position tracking, billboard rendering |
| [`src/data/manager.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/data/manager.js) | `DataManager` class — `setLayerParams()`, `isEnabled()`, layer lifecycle |
| [`src/ui.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/ui.js) | Toggle button handlers and state synchronization |
| [`src/data/militaryRegistry.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/data/militaryRegistry.js) | Shows layer interaction pattern (military flights layer with duplicate suppression) |

## Summary

- **UI method:** Click the "Flights" toggle — handled by [`src/ui.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/ui.js) calling `dataManager.setLayerParams('flights', { active: true })`
- **Programmatic method:** Call `dataManager.setLayerParams('flights', { active: true })` directly on the DataManager instance from [`src/data/manager.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/data/manager.js)
- **Verification:** Use `dataManager.isEnabled('flights')` to check current state
- **Disabling:** Same methods with `active: false` — stops polling and removes renderables

## Frequently Asked Questions

### What API endpoint does the live flights layer use?

The `FlightsLayer` in [`src/data/flights.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/data/flights.js) polls `/api/adsblol/flights` as its ADS-B data source. This endpoint returns current aircraft positions, which the layer transforms into map billboards with amber coloring.

### Can I enable both commercial and military flights simultaneously?

Yes. The DataManager supports multiple active layers. The military flights layer (`'military'`) uses `/api/adsblol/mil` and cooperates with the commercial layer through [`src/data/militaryRegistry.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/data/militaryRegistry.js), which suppresses duplicate ICAO identifiers when both layers show the same aircraft.

### Why is `isEnabled('flights')` returning false after I call `setLayerParams()`?

This typically indicates the layer isn't registered. Ensure `dm.registerLayer('flights', flightsLayer)` runs before `setLayerParams()`. The registration binds the layer ID to the implementation instance in the DataManager's internal registry.

### Does enabling flights impact performance significantly?

The layer maintains a lightweight poll interval and uses billboard instancing for rendering. On typical hardware, 500-1000 concurrent aircraft cause minimal frame drop. Disable via `setLayerParams('flights', { active: false })` to eliminate all overhead when real-time tracking isn't needed.