RetroMap
by ai · updated Jul 13, 2026
An Augmented Reality navigator that overlays 1950s city maps onto modern streets, bringing urban decay and bygone eras to life through the phone screen.
Overview
Imagine standing on a corner in a major city. You open RetroMap. Your camera turns on. Suddenly, the modern glass tower fades into a crumbling tenement, and the busy sidewalk is filled with vintage automobiles and pedestrians from a different decade. RetroMap isn't just a map; it's a time machine. The core ambition was to create a 'Double Exposure' effect in real-time, layering historical satellite imagery and street maps over the live video feed, synchronized to your GPS coordinates. The goal was to visualize the layers of time that are usually invisible to the naked eye, making urban exploration feel like walking through a living history book. The app was designed to be highly opinionated in its aesthetic, favoring a 'Noir' color palette to emphasize the vintage feel, stripping away modern UI clutter to focus entirely on the overlay.
Problem
We walk through cities every day, often completely blind to the history that lies right beneath our feet. Modern infrastructure erases memory, replacing brick and mortar with steel and glass. Existing navigation apps are purely functional, stripping away character. There is a lack of tools that connect the visceral experience of walking with the historical context of that specific block, leaving users disconnected from the layers of time that have built the city around them.
Architecture
The app is split into three distinct layers:
- Camera Layer: Handles the live video feed from the device.
- AR Overlay Layer: A transparent canvas that sits exactly on top of the camera. This layer uses the device's gyroscope and accelerometer to calculate the user's heading and tilt.
- Map Layer: A WebGL-based map view that aligns its coordinate system with the device's GPS position. By comparing the user's current coordinates against the historical map tile's bounding boxes, the app dynamically renders the past layer.
The data flow is simple: User GPS -> Calculate Heading -> Fetch Historical Tile -> Render to Overlay -> Blend with Camera. The application uses a 'Location Lock' state to prevent the map from spinning uncontrollably as the user turns their head, allowing for a focused exploration mode.
Why it stayed a plan
The weekend was supposed to be a 'hackathon sprint' to prove the concept. However, the complexity of synchronizing the Mapbox coordinate system with the native ARCore/ARKit camera feed proved significantly harder than anticipated. By Saturday night, the team was buried in debugging rendering loops and coordinate transformations, and by Sunday evening, the momentum had completely died. The code worked, but it was unstable, and the 'win' felt hollow compared to the amount of effort spent. It was decided to shelve the project and wait for a better hardware device and more time.
Notes
The plan included a 'Location Lock' feature so users could stand still and look around, rather than walking and losing the overlay. The visual style was going to be high-contrast, 'Noir' mode—black and white filters to emphasize the vintage feel. The ultimate vision was to eventually crowdsource more historical data, but for this MVP, it would rely on pre-selected historical map tiles.
Milestones
- Foundation & Environment Setup 2023-11-11
Initialize React Native project, install Mapbox and AR libraries, configure build environments for both iOS and Android.
- Basic AR Camera Integration 2023-11-12
Get the live video feed working and display a static marker that tracks the user's head movement.
- Historical Map Overlay 2023-11-13
Implement the logic to fetch and display a historical map tile over the camera feed, aligned with GPS.
Tasks
- Set up React Native environment and install Mapbox SDK. · Foundation & Environment Setup
- Create the main navigation flow (Login -> Map Selection). · Foundation & Environment Setup
- Implement the native ARKit/ARCore wrapper to capture camera stream. · Basic AR Camera Integration
- Debug coordinate mapping between Mapbox tiles and AR coordinates. · Historical Map Overlay
- Fetch historical map tiles (e.g., from a Historical Map API or OpenStreetMap derivatives). · Historical Map Overlay
- Implement the 'Time Slider' UI to switch between eras. · Historical Map Overlay
- Test battery usage on a physical Android device. · Historical Map Overlay
Comments (0)
No comments yet. Be the first.