Transit
While browsing the internet I came across a transit map and got an idea for an interactive app to design them. One thing led to another and it kept growing into something bigger than I planned.
Generate map
Every click builds a complete transit network with its own routes, interchanges, and station names. No two generations come out the same so you can keep going until one feels right.
Generate route
You can also grow a map gradually by adding one line at a time. Each new route picks its own color and finds a path through whatever's already there.
Draw a route
Click the canvas to add stations and they connect as you go. I kept tweaking the snapping until it felt like drawing with a ruler you didn't have to hold.
Playback
The map can build itself in front of you. Stations appear first, then tracks stretch between them. Three modes control the sequence so the same network assembles in completely different ways.
Track style
Switching styles changes the line weight, station markers, and track rendering all at once. Same map, completely different character.
Map style
Underneath the transit lines there are real cartography tiles. Flipping between them changes the mood from soft watercolor to stark black and white.
Train animation
Small colored shapes move along each route with a gentle pulse. You can switch between a round dot, a short dash, and a longer pill to change how the map feels in motion.
Drag to arrange
Grab a station and move it anywhere. Tracks redraw on the fly, snapping to the grid so the geometry stays clean even when you're rearranging things quickly.
Label positioning
Every station name can sit in one of eight spots. Click a station to cycle through positions until the label clears any overlapping tracks or neighbors.
Inspector
Click any station or route and a detail panel slides into the corner. It surfaces the name, connections, and type without pulling you away from the map.
Widgets
The map needed context around it. Journey planners, traffic charts, a ticking clock. Each widget runs on the same network data so everything stays in sync.
Toasts
Whenever you add a route or regenerate the map a small pill floats up from the bottom. It picks from a pool of quips so the feedback never reads the same way twice.
Fun part
This is the part where I felt happy with what I had built and excited for what else I could explore.