Olympic Parks

A 3D geospatial application for remotely exploring historic US Olympic venues, powered by Google's Photorealistic 3D Tiles and CesiumJS.

Overview

Olympic Parks lets you remotely visit — in full 3D — the actual parks and venues that hosted the Olympic Games across US history. Standing in 2026, this is a tribute to the extraordinary places that shaped athletic history, from the mountain peaks of Park City to the Georgia heat of Centennial Olympic Park.

US Venues Included

Venue	State	Year(s)	Season
Utah Olympic Park	Utah	2002	Winter
Olympic Center	New York	1932, 1980	Winter
Centennial Olympic Park	Georgia	1996	Summer
LA Memorial Coliseum	California	1932, 1984, 2028	Summer
Palisades Tahoe	California	1960	Winter

Tech Stack

• Frontend: React 18 + TypeScript
• 3D Globe: CesiumJS 1.12x
• 3D Tiles: Google Maps Platform — Photorealistic 3D Tiles
• Build: Vite 6
• Deployment: Cloudflare Pages

Prerequisites

1. Google Maps Platform API Key with the "Map Tiles API" enabled

   • Go to Google Cloud Console
   • Create a new project or select existing
   • Enable the Map Tiles API
   • Create an API key under Credentials

2. Cesium Ion Token (optional — for enhanced terrain/assets)

   • Sign up at cesium.com/ion
   • Create an access token

Local Development

# Install dependencies
npm install

# Copy env file and fill in your keys
cp .env.example .env

# Start dev server
npm run dev

Open http://localhost:5173

If no .env keys are set, you'll be prompted to enter them in-app when you first open the explorer. Keys are saved in sessionStorage (browser session only, never transmitted).

Deploy to Cloudflare Pages

# Build
npm run build

# Deploy
npm run deploy

Or connect your GitHub repo in the Cloudflare Dashboard:

• Build command: npm run build
• Build output directory: dist
• Add environment variables VITE_GOOGLE_MAPS_API_KEY and VITE_CESIUM_ION_TOKEN in the Cloudflare Pages settings

Architecture

The app is 100% client-side. No server, no database, no backend. Everything runs in the browser:

• Venue data is hardcoded TypeScript
• API keys are entered by the user at runtime (or set as env vars at build time)
• Map tiles are fetched directly from Google's CDN
• No user data is collected or stored

Features

• 3D Photorealistic Tiles: Google's 3D mesh tiles for true-to-life terrain and building geometry
• Smooth fly-to animations: Camera cinematically flies to each selected venue
• Venue detail panels: Rich historical context, highlights, and current status
• Quick nav bar: Fast access to all venues at the bottom

Planned Global Expansion

Phase 2 will add international venues:

• Athens (1896, 2004)
• Paris (1900, 1924, 1968, 2024)
• London (1908, 1948, 2012)
• Tokyo (1964, 2020)
• Sydney (2000)
• And many more...

License

MIT