The Signal Remains

U2’s tours remapped with styled Google Maps, tracing a cultural signal across continents. Hosted in the cloud for a dynamic, navigation-driven map narrative of late 20th-century history.

Comment 1

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

Built With

  • countup.js
  • google-cloud-run
  • google-gemini-1.5-api
  • google-maps-javascript-api
  • json
  • lucide-icons
  • react
  • styled-map-ids
  • tailwind-css
  • typescript
  • vite
Share this project:

Updates

posted an update —

fix: remove all squashed icons from Cartographic Design panel Remove all small circular icons that were appearing squashed or distorted in the Cartographic Design panel and related components.

Changes:

  • MapStyleInsightCard: Remove Palette icon from header section
  • MapStyleInsightCard: Remove Eye icons from feature labels (Base Geometry, Text Fill, etc.)
  • MapStyleInsightCard: Remove Lightbulb icons from meaning/description text
  • MapDesignOverlay: Remove Map and Sparkles icons from Chip components
  • CartographyInfoModal: Remove icons from feature Chips (Layers, Map, Brain, BookOpen)
  • Clean up unused icon imports (Eye, Lightbulb, Map, Sparkles, BookOpen, Layers)

The panel now displays clean, text-focused content without visual clutter or rendering issues. All remaining icons (in headers and stats) render correctly at appropriate sizes.

Also includes:

  • MapMarkers: Improve dark mode support for InfoWindow with theme-aware colors
  • vite.config: Code formatting consistency (double quotes)

Log in or sign up for Devpost to join the conversation.