Google Maps is functional. It's also soulless.
I live in DC and genuinely love exploring it: the museums, the monuments, the parks, the neighborhoods. But most people navigate the city by staring at Google Maps or getting lost. Neither felt like the right way to experience a place as visually rich and historically layered as Washington D.C.
I wanted something that made the city feel like a world to explore rather than a set of directions to follow. Something closer to a game than a navigation app. So I built one.
A map you actually want to open
DC Map is a 3D interactive map of Washington D.C. designed to be fun to use rather than purely functional. What if you could explore the city from your browser the way you'd explore a game world? Discover landmarks, learn about museums, fly over the National Mall, watch the trees change color with the seasons.
The map uses Mapbox GL JS with 3D building extrusions. Real elevation data, real building geometry, rendered with a slightly stylized aesthetic that makes it feel designed rather than like a raw satellite view. You can zoom, pan, rotate, and tilt freely. The whole screen is the map.
The design decisions that made it feel right
Photorealistic maps signal "this is for getting somewhere." Stylized maps signal "this is a place worth spending time in."
The aesthetic choice (stylized rather than photorealistic) was the first decision and shaped everything after it. The slightly stylized buildings with their extrusions, the muted but intentional color palette, the clean geometry signal something different from Google Maps. This is a place you'd want to spend time in.
The information cards on landmarks and museums are deliberately minimal: a name, one sentence of context, and a search link. A detailed card creates a reading task. A brief card tells you just enough to be curious, then gets out of the way.
The layer controls give users independent toggles for landmarks, museums, trees, and parks. This was about respecting that people explore differently. Someone doing a museum tour doesn't need seasonal tree data cluttering the view. Independent layers let the user compose their own map, closer to how people actually think about a city.
The city in layers
The city is organized into layers you can toggle independently. The tree layer uses real DMV tree inventory data: thousands of actual trees plotted across DC. You can change the tree colors by season, spring greens, summer deep green, autumn reds and oranges, winter grey. Parks layer in with their own seasonal coloring on top.
Landmarks and museums are the exploration layer. DC has 10 major iconic landmarks and 36+ museums catalogued from Open Data DC. Click on any of them and you get a small information card: what it is, a bit of context, and a search link if you want more.
Points for wandering
There's a progression system built into the exploration. When you move close to a landmark or museum (within 50 meters) you discover it. Discovering a landmark earns 50 XP. A tree is 10 XP. The XP accumulates into a level system with achievement unlocks. Progress is saved locally so your discoveries persist between sessions.
The specific mechanic matters: you earn points by getting within 50 meters of a landmark, not by clicking on it from any distance. It requires physical navigation. You have to move toward the thing to get credit. That changes the mental model from "looking at a map" to "moving through a city."
Fly mode
Fly mode lets you leave the map plane entirely and navigate DC as a first-person flyover, moving through the 3D building geometry with WASD controls and mouse look, like a free camera in a game engine.
Getting this to feel right took iteration. Camera movement with momentum and easing feels cinematic; without it, it feels like a broken drone. I went through multiple iterations of easing curves, acceleration rates, and turn sensitivity before it landed: responsive but not nervous, cinematic but controllable.
Real data, real trees, real roads
Most of the interesting technical work was in the data layer. DC Map uses several static GeoJSON datasets: landmark locations (manually curated), museum locations from Open Data DC, the full DMV tree inventory, DC's walkable road network, and a navigation graph built from road data for pathfinding.
The road network data needed preprocessing. I built a custom walk-graph generation script that converts the raw road data into a format usable for navigation. Turf.js handles the geospatial calculations: proximity detection for the discovery system, distance calculations, point-in-polygon checks for boundary warnings.
The architecture runs through a centralized StateManager that coordinates game state, landmark tracking, museum progress, XP, fly controls, and map state through custom hooks and providers. Everything that matters (discoveries, level, achievements) persists to localStorage.
Maps can be fun.
Navigation apps are optimized for getting you from A to B efficiently. That's useful. But there's a different mode, exploration, curiosity, wandering, that deserves its own interface.
DC is a beautiful, walkable, historically dense city that a lot of people only experience as a sequence of tourist checkpoints. DC Map is for the other kind of visit: the one where you wander, discover something you didn't plan to find, and come away with a better sense of the place as a whole.
