Manhattanhenge | Devpost

🎯 Inspiration

Walking through Manhattan during sunset one evening, I witnessed the famous Manhattanhenge phenomenon—the moment when the setting sun perfectly aligns with the city's street grid, creating a stunning visual spectacle. Named by astrophysicist Neil deGrasse Tyson, this astronomical event only occurs twice a year in New York.

But then I wondered: What about other cities? Chicago has a grid layout. So does Toronto, Barcelona, and Buenos Aires. Could there be "Chicagohenge" or "Torontohenge" moments happening right now that nobody knows about?

That question sparked this project: A global Manhattanhenge finder that works for any city, anywhere in the world.

🌍 What it does

Manhattanhenge is an interactive web application that calculates and visualizes when the sunset aligns with street grids in any city globally. Here's what makes it special:

🔍 Universal Search: Type any city name (New York, Tokyo, Paris, etc.) and instantly see its street layout
🌅 Sun Position Calculator: Uses astronomical algorithms to compute the sun's exact azimuth (compass direction) for any date and time
🗺️ Dynamic Street Overlay: Fetches real street data from OpenStreetMap and calculates each street's orientation
🎨 Visual Magic: Highlights streets that align with the sunset in vibrant orange, creating a beautiful visualization
⏰ Time Travel: Choose any date/time—past, present, or future—to see when alignments occur
📱 Interactive UI: Draggable control panel with glassmorphism design

Use Cases:

📷 Plan the perfect sunset photography session
🎓 Educational tool for teaching astronomy and urban planning
🌆 Discover hidden "henge" moments in your own city
🗓️ Find optimal dates for visiting cities as a tourist

🛠️ How we built it

Architecture

The project uses a Next.js full-stack architecture with TypeScript:

Frontend:

Next.js 16 with React 19 for the UI
Mapbox GL JS for interactive map rendering
Tailwind CSS 4 for responsive, modern styling
Dynamic imports to optimize bundle size

Backend:

Next.js API Routes (serverless functions)
SunCalc library for astronomical calculations
OpenStreetMap Overpass API for real-time street data

The Math 🧮

Sun Azimuth Calculation:

// Use SunCalc to get sun position
const pos = SunCalc.getPosition(date, lat, lng);
const sunAzimuth = (pos.azimuth * 180 / Math.PI + 180) % 360;

Converts sun's position to compass bearing (0° = North, 90° = East, etc.)

Street Azimuth Calculation:
```
// Calculate bearing between two GPS points
azimuth = atan2(
 sin(Δλ) × cos(φ2),
 cos(φ1) × sin(φ2) - sin(φ1) × cos(φ2) × cos(Δλ)
)
```
- Fetches street geometries from OpenStreetMap
- Calculates each street segment's compass direction
- Averages azimuths for entire street

Alignment Detection:

// Compare sun and street directions
const isAligned = Math.abs(streetAzimuth - sunAzimuth) <= 5°

±5° tolerance accounts for street irregularities

Data Flow

User enters city → Mapbox Geocoding API → Get coordinates
User selects datetime → Frontend sends to /api/alignment
Backend calls /api/streets → OpenStreetMap Overpass API
Calculate street azimuths → Compare with sun azimuth
Return aligned streets → Frontend overlays on Mapbox

😅 Challenges we ran into

OpenStreetMap Rate Limiting
- The Overpass API can be slow (10-30 seconds for dense cities)
- Solution: Added loading states and caching strategies
Coordinate System Confusion
- Mapbox uses [lng, lat] but most APIs use [lat, lng]
- Solution: Careful parameter ordering and TypeScript types
Azimuth Calculation Accuracy
- Streets with curves have varying directions
- Solution: Calculate average azimuth across all segments
React Hot Reload Issues
- Map was re-initializing on every code change
- Solution: Added useRef guards to prevent double initialization
Math Debugging
- Initial azimuth calculations were off by 180°
- Solution: Extensive console logging and testing with known Manhattanhenge dates

🏆 Accomplishments that we're proud of

✅ Global Coverage: Works for literally any city on Earth
✅ Accurate Math: Successfully replicated real Manhattanhenge dates (May 28, July 12)
✅ Beautiful UX: Glassmorphism design with smooth animations
✅ Performance: Handles 200+ streets per city efficiently
✅ Real Data: Uses actual street geometries, not approximations
✅ Custom Domain: Deployed at manhattanhenge.tech
✅ Educational: Makes complex astronomy accessible to everyone

📚 What we learned

Technical Skills

Astronomical Calculations: Understanding sun position algorithms
Geospatial Math: Working with coordinates, bearings, and map projections
API Integration: Combining multiple external APIs (Mapbox, OpenStreetMap, SunCalc)
TypeScript Best Practices: Type-safe API contracts and data flow
Performance Optimization: Lazy loading, debouncing, and caching strategies

Domain Knowledge

Urban Planning: How city grids are designed (Manhattan's 29° rotation!)
Astronomy: Solar azimuths, altitudes, and the analemma
Cartography: Map projections and coordinate systems

Soft Skills

Debugging Complex Systems: Tracing errors across frontend, backend, and external APIs
Documentation: Writing clear explanations of technical concepts
User-Centric Design: Making complex calculations feel magical

🚀 What's next for Manhattanhenge

Phase 1: Community Features (Next Month)

📸 Photo Gallery: Users upload their Manhattanhenge photos
🌟 Best Spots Database: Crowdsourced best viewing locations
🗓️ Calendar Integration: Export alignment dates to Google Calendar

Phase 2: Enhanced Visualizations (3 Months)

🌈 3D Sun Path: Show sun trajectory throughout the day
📱 AR Mode: Point phone camera at street to see predicted alignment
🎥 Time-Lapse Generator: Animate sun movement across the day

Phase 3: Social & Gamification (6 Months)

🏅 Achievement System: "Witnessed 10 Manhattanhenges"
👥 User Profiles: Share your henge experiences
🌍 Global Leaderboard: Most alignments discovered

Phase 4: Advanced Features (1 Year)

🤖 AI Predictions: Machine learning to predict best photo conditions
🌤️ Weather Integration: Only show alignments on clear days
📊 Analytics Dashboard: Heatmap of alignment frequencies globally

Long-term Vision

Transform Manhattanhenge into the Spotify of urban sunsets—helping millions of people discover and experience the magic of celestial alignments in their own cities.