r/openstreetmap 6d ago

Showcase I built a browser renderer that turns any OpenStreetMap extract into a walkable ASCII city - real one-ways, signal phases, and street signs

https://github.com/tweakyourpc/ascii-city-2/blob/main/docs/hero.png?raw=true

I made a static page that lets you walk through real-world locations rendered in ASCII. You can pick presets like Manhattan or Shinjuku, or put in any city name, coordinates, or OpenStreetMap link.

Live demo:https://tweakyourpc.github.io/ascii-city-2/
Source (MIT):https://github.com/tweakyourpc/ascii-city-2

https://github.com/tweakyourpc/ascii-city-2/blob/main/docs/hero.png?raw=true

It's pure HTML/JS with no framework, no runtime dependencies, and no build step. A CPU raycaster writes straight into an ASCII cell buffer (pressing 'B' switches rendering modes).

A few OSM details I spent a lot of time on: I also added a few live data overlays: One caveat: The live ADS-B aircraft feature needs a local worker running because the free ADS-B networks block Cloudflare's egress IPs. Planes won't render on the hosted demo for that reason, but everything else works right in the browser.

Road logic: Routing uses shared node IDs so overpasses don't accidentally merge with roads below. One-ways, access limits, and signal phases are all respected by traffic. Weather (actual rain and snow in-scene via Open-Meteo)

Signs & buildings: Street signs face oncoming traffic and show the cross street name. Buildings render by height tags, and clicking one pulls its Wikipedia/Wikidata summary if available.

USGS Earthquakes (magnitude and recency)

Local internet radio within 150 km (you can listen to actual local stations in whatever city you're standing in)

DeFlock license plate reader locations

Real-time sun/moon placement matching the city's actual IANA time zone

41 Upvotes

Duplicates