3D Geospatial Navigation System

A bespoke, hardware-accelerated 3D GPS navigation and commute engine built with Next.js 16, React 19, Mapbox GL, and Sanity CMS for mountain tourism navigation in Baguio City, Philippines.

Overview & Architecture

A custom, full-screen 3D Geospatial Navigation Platform engineered for travelers navigating the high-altitude terrain of Baguio City (1,450m ASL). Built using Next.js 16, React 19, Mapbox GL, and GeoJSON, the application features live GPS tracking, multi-modal routing (driving vs. walking), turn-by-turn directions, off-screen edge pointers, and dynamic 3D terrain/satellite visualization—backed by multi-key token failover and hardware-aware performance scaling.

1. Dynamic Routing & Multi-Modal Navigation Engine

• Live GPS Tracking & Bearing: Real-time user positioning with directional heading pulse, accuracy radius rings, and smooth camera panning.

• Turn-by-Turn Guidance: Detailed maneuver-by-maneuver instructions with distance calculations, estimated travel duration, and route geometry rendering.

• Dual-Destination Switcher: Instant toggling between Castle Gate 1 / Gate 2 Plazas and Baguio City Center Jeepney / Taxi Terminals.

• Commute Cheat Sheet: Integrated local commute cards with exact driver phrases ("What to tell the taxi driver"), Baguio meter estimates, and jeepney route guides.

2. 3D Mountain Elevation & Satellite Viewport Modes

• DEM 3D Terrain Exaggeration: Renders the steep topography and ravines of Irisan mountain peaks with dynamic sun/shadow simulation.

• Multi-Layer Visualization: Instant switching between Vector Navigation, High-Resolution Satellite Imagery, and Night / Twilight Mode.

• Cinematic Camera Fly-Tos: Smooth GSAP-curved camera transitions adjusting bearing and pitch (45° angle) when focusing on specific points of interest.

3. Contextual Geofencing & Off-Screen Edge Pointers

• On-Premise Detection: Automatically switches into Pedestrian Ground Mode once the visitor enters the castle perimeter bounding box, highlighting ticket booths, viewing decks, restrooms, and free shuttle stops.

• Off-Screen Radar Pointers: Mathematical screen-edge projection (EdgePointers.tsx) that renders directional arrows around the viewport perimeter when destinations or photo pins are panned out of view.

• International Visitor Fallback: Automatically handles users browsing from outside the Philippines with curated default routes and travel advisories.

4. Geo-Anchored Interactive Photo & Video Pins

Coordinate-tagged multimedia waypoints pinned directly to terrain coordinates, synchronized with Sanity CMS. Clicking any waypoint opens a high-resolution lightbox with video playback and photography tips.

5. Fault-Tolerant API Architecture & Hardware Scaling

• Multi-Token Failover System: Custom proxy wrapper (fetchWithMapboxFailover) with automatic token rotation, eliminating API downtime or quota disruptions.

• Hardware-Aware Adaptive Rendering: Custom useDevicePerformance hook that detects low-RAM or throttled mobile GPUs and disables heavy 3D terrain meshes, guaranteeing consistent 60 FPS across all smartphones.