FIFA Takeover Map

map

Inspiration

Vancouver is about to host FIFA World Cup 2026, and the whole world is going to sprint through the city. We kept thinking about what gets overlooked when that happens, the older, quieter places that actually give Vancouver its character, not the skyline on every postcard. We wanted to build something that introduces visitors to the city's history through the landmarks that still hold it. So we made a custom map.

What it does

FIFA Takeover Map is an interactive antique-style map of Vancouver. Click any of six historical landmarks and a clean modern 3D model of that building rises out of the old map, with its story and a Google Maps link. Old map, new model: the same place in two eras. The six landmarks: BC Place, Gastown Steam Clock, Brockton Point Lighthouse, Science World, Bridges Restaurant, and the Jack Chow / Sam Kee Building (the world's narrowest building).

How we built it

Every landmark runs through the same AI pipeline

Reference → image. Starting from a real photo of each building, we wrote tight prompts and generated stylized 3D-miniature renders with Nano Banana (Gemini), iterating until the materials and proportions matched the real architecture.
Image → 3D. We converted each render into a 3D model with Meshy.AI, refined the textures, and exported GLB files.
Design. We used Claude to explore layout options for the building info popup, 3D viewer on the left, description and map link on the right.
Build. We brought it together as a web app: an interactive Mapbox base, React + SVG + GSAP for the map and animation, and model-viewer to display the rotating GLB landmarks. The antique map was hand-designed to set the "before."

Challenges we ran into

Overlaying the antique map on a real map. We wanted the hand-drawn antique map to sit precisely on top of a real Mapbox base, so each landmark lined up with its true coordinates. We ran out of time and couldn't finish the overlay, it's the first thing on our list to fix.
Heavy 3D files. The GLB exports came out at 50–90 MB each, too heavy for a smooth web map so they need optimizing for the browser.

Accomplishments that we're proud of

Built a full AI pipeline: photo → image → 3D → web — and produced six custom 3D landmarks in a single hackathon day.
Got the AI-generated models to actually look like the real heritage buildings, down to details like the Sam Kee Building's overhanging bay windows.
Shipped a working interactive prototype, a 3D viewer with real descriptions running in the browser, not just static mockups.

What we learned

An AI asset pipeline (photo → image → 3D) let our two-person team produce a full set of bespoke 3D landmarks in a single day, work that would normally take days of manual modelling.
Prompting against a real reference image beats describing a building from scratch every time.
Web-based 3D is very doable with model-viewer, but file optimization is not optional.

What's next for FIFA Takeover Map

Optimize and load all six models into the live map for the full hover-to-rise interaction.
Expand beyond six landmarks to more neighbourhoods.
Anchor the FIFA 2026 "spread" layer to real venues and fan zones.