A modern, real-time geospatial intelligence platform built with Next.js and CesiumJS.
Monitor global activity through an interactive 3D interface with live data from multiple public sources.

🔗 Live Demo - www.shez.app

https://youtu.be/q8ASmSO6uIc

WorldView-UI transforms publicly available geospatial data into a cohesive, military-grade situational awareness dashboard. Built as a modern alternative to traditional command-and-control interfaces, it demonstrates what's possible when combining open data sources with contemporary web technologies.

The platform aggregates six distinct data layers into a single, interactive 3D globe with a dark tactical interface and real-time visual effects.

This project serves multiple purposes:

• Educational resource – Demonstrates integration of diverse real-time data sources
• Geospatial experimentation – Showcases CesiumJS capabilities with modern React patterns
• Open data advocacy – Highlights the wealth of publicly available geospatial information
• Tactical interface design – Explores effective visualization of complex data streams

Unlike traditional geospatial applications, WorldView-UI prioritizes:

• Performance – Handles thousands of moving entities at 60fps
• Visual clarity – Military-inspired design language reduces cognitive load
• Extensibility – Modular architecture makes adding new data layers straightforward

┌──────────────────────────────────────────────────────────────┐
│                    Browser (Next.js App)                      │
│  ┌────────────────────────────────────────────────────────┐  │
│  │ • Client page (`app/page.tsx`) + dynamic Cesium load   │  │
│  │ • Earthquakes fetch directly from USGS                 │  │
│  │ • Other telemetry via `/api/*` routes                  │  │
│  └────────────────────────────────────────────────────────┘  │
└────────────────────────────┬─────────────────────────────────┘
                             │ fetch /api/*
                             ▼
┌──────────────────────────────────────────────────────────────┐
│              Next.js API Routes (serverless)                   │
│  • /api/flights        – FR24 + adsb.fi fallback             │
│  • /api/flights/live   – adsb.fi regional (4 s cache)        │
│  • /api/satellites     – TLE proxy (2 h cache)               │
│  • /api/ships          – AISStream.io burst (60 s cache)     │
│  • /api/traffic/roads  – Overpass + static fallback          │
│  • /api/cctv           – Camera feed aggregation (5 m cache) │
│  • /api/cctv/image     – CORS-bypassing image proxy          │
│  • /api/geolocation    – IP geolocation fallback             │
│  • /api/health         – Uptime/status probe                 │
└──────────────────────────────────────────────────────────────┘

1. Client-side hooks (useFlights, useShips, etc.) poll Next.js API routes; useEarthquakes fetches USGS directly
2. API routes act as proxies — they fetch from upstream providers, cache responses, and handle authentication
3. CesiumJS scene renders entities using imperative primitives for optimal performance
4. UI components display controls and real-time event feeds outside the 3D canvas
5. Entity tracking locks camera to selected objects with smooth following behaviour

• Framework: Next.js 16 (App Router) with React 19
• 3D Rendering: CesiumJS 1.138 via Resium React bindings
• Styling: Tailwind CSS 4 with custom tactical theme
• Language: TypeScript 5.7 (strict mode)
• Build Tool: Built-in Next.js compiler (SWC)

• Runtime: Node.js 20+ (serverless on Vercel)
• Caching: In-memory with TTL (simplified for serverless)
• External APIs: REST + WebSocket (AISStream burst pattern)

• satellite.js – SGP4 orbit propagation
• ws – WebSocket client for AISStream
• resium – React bindings for CesiumJS

• Node.js 20.x or later
• npm 10.x or later
• Git

# Clone the repository
git clone https://github.com/shez1461/worldview-ui.git
cd worldview-ui

# Install dependencies
npm install

# Copy environment variable template
cp .env.local.example .env.local

WorldView-UI requires several API keys to function fully. Edit .env.local after copying:

# Required for 3D terrain and imagery (falls back to OSM if missing)
NEXT_PUBLIC_GOOGLE_API_KEY=your_google_maps_api_key
NEXT_PUBLIC_CESIUM_ION_TOKEN=your_cesium_ion_token

# Optional manual override for UI version shown in StatusBar.
# If omitted, version is derived automatically from git tags at build time.
# NEXT_PUBLIC_APP_VERSION=0.7.0

# Server-side only (never exposed to client)
AISSTREAM_API_KEY=your_aisstream_api_key
OPENSKY_CLIENT_ID=your_opensky_client_id
OPENSKY_CLIENT_SECRET=your_opensky_client_secret
NSW_TRANSPORT_API_KEY=your_nsw_transport_key

npm run dev
npm run build
npm run start
npm run lint
npm run proxy
npm run copy-cesium-assets

npm run dev

Visit http://localhost:3000 to see the application.

1. Visit Google Cloud Console
2. Create a project and enable the Map Tiles API
3. Generate an API key and restrict it to:
   • HTTP referrers (your domains)
   • Map Tiles API only
4. Add to NEXT_PUBLIC_GOOGLE_API_KEY

Free tier: $200/month credit (~25,000 tile loads)

1. Register at Cesium Ion
2. Copy your default access token
3. Add to NEXT_PUBLIC_CESIUM_ION_TOKEN

1. Sign up at AISStream.io
2. Generate an API key from your dashboard
3. Add to AISSTREAM_API_KEY

Free tier provides full global AIS stream

1. Register at Transport NSW Open Data
2. Create an application and subscribe to Traffic & Cameras
3. Add key to NSW_TRANSPORT_API_KEY

worldview-ui/
├── app/                         # Next.js App Router
│   ├── page.tsx                 # Main dashboard (client component)
│   ├── layout.tsx               # Root layout with tactical theme
│   ├── globals.css              # Tailwind v4 + wv-* design tokens
│   └── api/                     # API routes (serverless functions)
│       ├── flights/             # Global flight data (FR24 / OpenSky)
│       ├── flights/live/        # Regional high-frequency (adsb.fi)
│       ├── satellites/          # TLE fetch + SGP4 propagation
│       ├── ships/               # AISStream.io burst cache
│       ├── traffic/roads/       # OpenStreetMap road network
│       ├── cctv/                # Camera feed aggregation
│       ├── cctv/image/          # CORS-bypassing image proxy
│       ├── geolocation/         # IP geolocation fallback
│       └── health/              # uptime/status probe
├── src/
│   ├── globe/                   # Cesium viewer components
│   │   ├── GlobeViewer.tsx      # <Viewer> root + ShaderManager
│   │   └── EntityClickHandler.tsx  # drillPick → entity classification
│   ├── layers/                  # Data layer renderers (inside <Viewer>)
│   │   ├── FlightLayer.tsx      # BillboardCollection + PolylineCollection
│   │   ├── SatelliteLayer.tsx   # React <Entity> per satellite
│   │   ├── EarthquakeLayer.tsx  # Declarative <Entity> + memo()
│   │   ├── ShipLayer.tsx        # BillboardCollection (AIS vessels)
│   │   ├── TrafficLayer.tsx     # PolylineCollection + PointPrimitiveCollection
│   │   └── CCTVLayer.tsx        # BillboardCollection (camera icons)
│   ├── hooks/                   # Data-fetching hooks
│   │   ├── useFlights.ts        # Global aircraft (20 s poll)
│   │   ├── useFlightsLive.ts    # Regional aircraft (5 s poll)
│   │   ├── useSatellites.ts     # TLE propagation via satellite.js
│   │   ├── useEarthquakes.ts    # USGS direct fetch (60 s poll)
│   │   ├── useShips.ts          # AIS vessels (30 s poll)
│   │   ├── useTraffic.ts        # Road network + animated vehicles
│   │   ├── useCameras.ts        # CCTV feeds (5 min poll)
│   │   ├── useGeolocation.ts    # Browser GPS → IP fallback
│   │   ├── useAudio.ts          # Tactical audio singleton
│   │   └── useIsMobile.ts       # matchMedia breakpoint (768 px)
│   ├── lib/
│   │   └── audio.ts             # Web Audio API singleton
│   ├── data/
│   │   └── airports.ts          # Airport coordinate database
│   ├── shaders/
│   │   └── postprocess.ts       # GLSL strings for CRT / NVG / FLIR
│   ├── types/
│   │   └── camera.ts            # CameraFeed, CameraApiResponse types
│   └── ui/                      # HUD overlay components
│       ├── OperationsPanel.tsx  # Layer toggles, shader picker
│       ├── IntelFeed.tsx        # Scrolling event log
│       ├── StatusBar.tsx        # UTC clock, camera position
│       ├── TrackedEntityPanel.tsx  # Entity details when tracking
│       ├── CCTVPanel.tsx        # Camera thumbnails
│       ├── SplashScreen.tsx     # Boot sequence + audio cues
│       ├── MobileModal.tsx      # Full-screen modal (mobile)
│       ├── AudioToggle.tsx      # Mute/unmute button
│       ├── Crosshair.tsx        # Centre reticle overlay
│       └── FilmGrain.tsx        # Canvas-based analogue noise
├── .env.local.example           # Environment variable template
├── next.config.ts               # Next.js configuration
├── postcss.config.mjs           # Tailwind v4 PostCSS plugin
└── tsconfig.json                # TypeScript configuration

Click any object on the globe to lock the camera and follow its movement:

Press ESC to release tracking.

Cycle through post-processing effects for different analytical perspectives:

• Google 3D Tiles – Photorealistic buildings and terrain (requires API key)
• OpenStreetMap – Fallback 2D imagery (always available, no key needed)

1. Push your code to a GitHub repository
2. Visit Vercel — New Project
3. Import your worldview-ui repository
4. Configure environment variables (copy from .env.local)
5. Click Deploy

After deployment:

1. Go to your project dashboard on Vercel
2. Navigate to Settings → Domains
3. Add shez.app and follow the DNS configuration instructions

Vercel will automatically provision SSL certificates.

• NEXT_PUBLIC_* variables are embedded at build time
• Server-side variables are available to API routes at runtime

WorldView-UI handles thousands of moving entities through several techniques:

• Imperative Cesium primitives – BillboardCollection, PolylineCollection instead of React <Entity> components for large datasets
• Viewport culling – Entities outside the camera view aren't rendered
• Instance sharing – Similar entities share geometry

• Dead reckoning – Positions extrapolated between updates at 60 fps
• Smart polling – Frequencies adjusted based on zoom level and entity type
• Aggressive caching – API routes cache responses to reduce upstream calls

• Client-driven UI shell – app/page.tsx is a client component; Cesium loads via dynamic import ({ ssr: false })
• Memoisation – useMemo and useCallback prevent unnecessary re-renders
• Dynamic imports – Cesium loads only when needed ({ ssr: false })

Contributions are welcome! Areas where help is most valuable:

• New data layers – Weather, wildfires, power grids, ADS-B military
• Additional CCTV sources – More cities and better global coverage
• Shader effects – New visual post-processing modes
• Performance improvements – Optimise rendering algorithms
• Documentation – Tutorials, API references, video walkthroughs

This project builds upon concepts from kevtoe/worldview, adapted and extended for the Next.js ecosystem.

• Flight tracking: FlightRadar24, adsb.fi, OpenSky Network
• Satellite orbits: CelesTrak
• Earthquakes: USGS
• Maritime: AISStream.io
• Road networks: OpenStreetMap contributors
• CCTV feeds: Transport for London, City of Austin, Transport for NSW

• CesiumJS – 3D globe rendering
• Resium – React bindings for Cesium
• Next.js – React framework
• Tailwind CSS – Styling
• satellite.js – SGP4 orbit propagation

No API keys are included in this repository.

All credentials must be provided via environment variables. The repository includes .env.local.example as a template only.

Before committing, verify:

• .env* files are listed in .gitignore
• No hardcoded API keys exist in source files
• Google API key is restricted by HTTP referrer
• Budget alerts are set in Google Cloud Console

If you discover a security issue, please open a private vulnerability report via GitHub.