$ show anvaka/city-roads
city-roads is a browser-based single-page application that fetches OpenStreetMap road data and renders every road in a chosen city as WebGL line art. Users search for a city; the app geocodes the query via Nominatim, suggests administrative boundaries, and then loads data either from a prebuilt protobuf cache hosted on CloudFront/S3 or from the Overpass API. The downloaded OSM nodes and ways are parsed into a Grid object, projected into 2D local coordinates with a Mercator projection, and pushed into a w-gl WireCollection for fast canvas rendering. The UI supports changing road, background, and label colors, editing the city label, saving PNG and SVG exports, and generating Zazzle mug links. A console API exposed as window.scene and window.Query lets advanced users run arbitrary Overpass queries and compose multiple city layers. Architecturally it is a Vue 3/Vite frontend with a clean separation between small lib modules (request, progress, grid, query builders, exporters) and UI components. There is no backend; all data comes from OSM and Nominatim public services plus a static cache. The repository is primarily an application rather than a data-research project, but its lib layer contains genuinely reusable geospatial and Overpass utilities. The codebase is compact, mostly readable, and handles real-world failure modes such as Overpass mirror outages, large downloads, cancellation, and high-resolution exports. Notable weaknesses are the absence of automated tests and CI, leftover Vue CLI configuration, outdated dependencies (Vite 2, Vue 3.2), a debugger statement in App.vue, and a broken custom-projector branch in LoadOptions. Overall it is a solid, functional visualization app with several modular components that could be extracted for other OSM or WebGL projects.
The LLM identified 6 files worth highlighting for reuse:
Self-contained 2D bounding box class with min/max tracking, point/rect expansion, merging, and computed geometry properties. It has zero internal dependencies and can be dropped into any mapping, graphics, or spatial-index project.
Browser XHR wrapper that returns a Promise, reports progress, supports external cancellation via a Progress token, distinguishes status errors from network failures, and handles JSON response types. Extracting it together with the small Progress class gives any frontend a reusable cancellable HTTP primitive.
Thin Nominatim geocoding client that caches results in memory and converts OSM relation and way IDs into Overpass area IDs using the +36e8 and +24e8 conventions. The area-ID conversion is non-obvious OSM domain knowledge and is isolated enough to reuse in any Overpass-based tool.
Overpass API request helper that POSTs a query to a rotating list of public mirrors and automatically falls through to the next server when one fails, while preserving cancellation. This resilient multi-endpoint pattern is directly reusable for any Overpass or OSM data pipeline.
Turns raw OSM JSON or protobuf elements into an in-memory grid of nodes and ways, computes bounds, and lazily creates a Mercator projector that maps lon/lat coordinates into a y-up local space. The projection and way-iteration logic is reusable for other OSM visualizations or spatial processing.
Framework-free DOM overlay manager that lets any element marked .can-drag be selected, dragged, and made exclusive for native interaction. It distinguishes single clicks from drags, handles mouse and touch events, and manages overlay lifecycle. It can be lifted into any frontend project needing draggable UI overlays.