The Signal Remains

Inspiration I was inspired by the idea that world tours are shaped as much by history and politics as by music — each one a reflection of its moment in time. Each map in this project is uniquely styled to reflect the cultural and political atmosphere surrounding that specific leg or tour. I approached each one not just as a visual record, but as a historical artifact shaped by the era it represents. This project visualizes that dynamic: how global conditions shaped the band’s path — and how U2, in turn, reshaped cultural space. The design of each map responds to that feedback loop. What it does The Signal Remains is a navigation-driven, styled , cloud-hosted atlas that remaps U2’s major 20th-century tours as a narrative of movement, tension, and memory. Each leg of each tour in different eras uses a custom-styled Google Map to express regional and historical tone. Tour stops are rendered as interactive markers, and when selected, each one calls Gemini 1.5 to dynamically generate contextual insights — including cultural, historical, or political background relevant to that show’s time and place. This is a map-driven story about global music as geopolitical artifact — enhanced with real-time AI and expressive cartography. How we built it This is a modern, full-stack web application that combines cartography, music history, and AI to create an interactive exploration of U2's concert tours from 1978-1998, deployed on Google Cloud Platform with automated CI/CD. External APIs Google Maps JavaScript API - Interactive maps Google Maps Static API - Static map images Google Gemini 1.5 Pro API - AI-generated content to hydrate marker InfoWindow content based on a predefined prompt including tour name, date, city, and global context Site images also generated by Gemini CI/CD Pipeline Google Cloud Build - Automated build and deployment pipeline Docker - Containerization for consistent deployments Artifact Registry - Container image storage Secret Manager - Secure API key management for Gemini API Google Cloud Platform (GCP) Cloud Run - Serverless container deployment Cloud Build - CI/CD automation Multi-step build process Secrets injection at runtime Automatic deployment on commit Secret Manager - Secure credential storage for API keys Artifact Registry - Container image repository Image tagging with commit SHA Versioned deployments Frontend @vis.gl/react-google-maps 1.5.4 - Google Maps React components React 18.3.1 - Main UI framework TypeScript 5.5.3 - Type safety and development experience Vite 5.4.2 - Build tool and development server Material-UI (MUI) 7.2.0 - React component library that implements Google's Material Design @mui/material - Core components @mui/icons-material - Icon components @emotion/react & @emotion/styled - Styling engine Redux Toolkit 2.8.2 - State management React Redux 9.2.0 - React bindings for Redux Lucide React 0.344.0 - Icon library Backend Node.js - Runtime environment Express 5.1.0 - Web framework CORS 2.8.5 - Cross-origin resource sharing dotenv 17.2.0 - Environment variable management Styling & Design @fontsource/inter 5.2.6 - Google Fonts integration Tailwind CSS 3.4.1 - Utility-first CSS framework PostCSS 8.4.35 - CSS processing Autoprefixer 10.4.18 - CSS vendor prefixing Development Tools ESLint 9.9.1 - Code linting TypeScript ESLint 8.3.0 - TypeScript-specific linting Nodemon 3.1.10 - Development server with auto-restart Concurrently 8.2.2 - Run multiple commands simultaneously Key Features Web Accessibility (AAA) with ARIA labels and keyboard navigation Interactive cartographic visualization of U2 tour data AI-enhanced storytelling with Gemini API integration Custom map styling with Google Maps Map IDs Responsive design with Material-UI and Tailwind Real-time data processing of concert information Cultural context integration with historical narratives Automated deployment with zero-downtime updates Secure API key management through GCP Secret Manager Challenges we ran into Styling multiple Google Maps with meaningful variation — without losing visual clarity Managing WebGL contexts and navigation-driven map instance creation for different tour legs Structuring Gemini prompts to return insightful, accurate, and readable content — without hallucination or redundancy Ensuring InfoWindows stayed visible and readable across mobile and desktop breakpoints Accomplishments that we're proud of Created a modular, web accessible, navigation-driven narrative UI powered by custom styled Google Maps Built a multi-map architecture that supports dynamic creation/destruction per tour leg Used Gemini 1.5 to generate high-quality cultural and political context for over 240 concerts — making each marker a living story Designed map styles that feel emotionally aligned with the era, region, and tone of each tour What we learned How to build expressive, stylized maps using Google Maps Platform at a fine level of control How to use Gemini 1.5 effectively for live, structured content generation at scale How to design navigation-driven layouts that stay performant even as map logic gets more complex How to combine storytelling, geography, and AI without compromising design integrity What's next for The Signal Remains Expand to include additional cultural events, overlays, and artist movements across decades Use Gemini 1.5 to generate summaries of entire tour legs or regions — not just individual shows Integrate timelines, archival visuals, or radio broadcasts as layers of story Make the codebase open-source to help others map art, memory, and movement with Google Maps and AI