# city-roads: Render Every Road in Any City as a Single Visual > city-roads is a browser-based visualization tool that fetches every road in a named city from OpenStreetMap and renders them all at once as a single image. It is aimed at developers and designers who want to create art-quality city road maps from real geographic data, and at engineers who want to build on its scripting API. **anvaka/city-roads** — Visualization of all roads within any city - Repository: https://github.com/anvaka/city-roads - Website: https://anvaka.github.io/city-roads/ - Stars: 9,710 · Forks: 744 - Language: JavaScript - License: MIT - Published: 2026-09-21 · Updated: 2026-09-21 · Language: en - Canonical page: https://hysenlabs.com/projects/anvaka-city-roads ## What city-roads Does and Who It Is For city-roads fetches every road in a city from OpenStreetMap and renders them all at once in a browser. The result is a single image in which the road network is the only visual element: no buildings, no labels, no land use colors. The road network of a city, rendered at this scale and in this way, becomes a distinctive visual pattern. The primary use case is generating art-quality city road map images. The live site at https://anvaka.github.io/city-roads/ lets any user type a city name, wait for the roads to download and render, and export the result. A secondary use case is programmable scripting: the site exposes a Scene API documented in API.md, and the companion city-script repository on GitHub contains examples of programs built on top of it. The project was built by Andrei Kashcha, who also maintains other open data visualization projects. ## How the Data Pipeline Works When a user types a city name, the site first queries nominatim, the OpenStreetMap geocoder, to resolve the name to an area ID. It then checks that area ID against a pre-indexed cache of approximately 3,000 cities with populations larger than 100,000. The cache is stored as a protocol buffer format in a separate GitHub repository called index-large-cities. If the city is in the cache, the road data loads directly from that cached protobuf file, which is faster than querying the Overpass API. If the city is not in the cache (smaller cities, unusual spellings, or newly added areas), the site falls back to querying the Overpass API directly. The Overpass API is free to use under OpenStreetMap's ODbL license but can be rate-limited and is sometimes slow, since the request downloads the geometry of thousands of road segments at once. The rendering uses w-gl, a WebGL-based rendering library listed as a dependency in package.json. The d3-geo library handles geographic projections. The pbf package parses the protobuf data from the cache. ## Running and Building Locally The development server runs on localhost:8080. From the repository root: ```bash # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report ``` The build tool is Vite. The package.json shows the dev script calls vite, and the build script calls vite build. The project uses Vue 3 for its UI layer. Stylesheets are written in Stylus. Engineers who want to develop programs on top of city-roads do not need to fork the main repository. The Scene API documented in API.md is accessible from the live site. The README directs scripting users to the city-script companion repository for examples. ## Memory Limits and When the Tool Fails The rendering is limited by browser memory and video card memory. The README gives two concrete examples: Seattle rendered without problems on a very old Samsung phone, but Tokyo with 1.4 million road segments was very slow on the same device. For areas with millions of segments, such as an entire US state, the page may crash even on a powerful desktop machine. This is a hard constraint, not a configuration problem. The WebGL renderer keeps all road geometry in GPU memory; a city with more geometry than the GPU can hold will fail. There is no documented way to reduce the resolution or tile the rendering to handle larger areas. The Overpass API rate limit is a second constraint. For cities that are not in the pre-indexed cache, the road data request goes through the Overpass API, which can refuse or delay requests during high-traffic periods. The README acknowledges this: 'it can be rate-limited and sometimes it is slow'. The last push to the repository was on 2026-03-17. ## The ODbL License on OpenStreetMap Data The source code for city-roads is licensed under MIT, which imposes no significant restrictions on use or distribution. The road data itself is a different matter. OpenStreetMap data is licensed under the Open Database License (ODbL). The ODbL requires attribution when you use the data publicly, and it requires that any derivative database you create and distribute is also released under ODbL. The README notes that the Overpass API is free as long as you follow the ODbL license. For developers who use city-roads to generate images for personal or educational use, the ODbL requirements are satisfied by attributing OpenStreetMap. For developers who build a commercial product on top of the rendered data, the share-alike requirement of ODbL may apply to the derivative work. The MIT source code license covers the application code only. ## Comparison with General Mapping Tools and Maintenance OpenStreetMap's own rendering, including the Standard tile layer visible at openstreetmap.org, also displays roads for any city. The difference in purpose is significant. The OSM standard map shows roads among buildings, parks, water features, place labels, and other elements; it is a general navigation reference. city-roads renders only roads, with no other elements, producing a minimalist image where the road pattern itself becomes the visual subject. Mapbox and other tile-based mapping platforms can also produce road-only visualizations with appropriate style configuration, but doing so requires creating a custom style, setting up an account, and managing API tokens. city-roads provides the specific result directly from a city name with no configuration. The repository has no GitHub releases. The project has no documented maintenance schedule. The last push was on 2026-03-17. ## Conclusion city-roads is the right tool for generating a stripped-down road network visualization of any city, whether for art prints or as a base layer for a custom project using the scripting API. It is not a full mapping application; it has no routing, no labels, and no layer control beyond road rendering. Developers who extend it should note that the road data is ODbL-licensed, which imposes attribution and share-alike requirements on any work that distributes the rendered data. ## FAQ ### How does city-roads get the road data for any city? The site first checks a pre-indexed cache of approximately 3,000 cities with populations above 100,000, stored as protobuf files. For cities not in the cache, it falls back to the Overpass API, which queries OpenStreetMap data live. The Overpass API is free but can be rate-limited. ### Can city-roads render large regions like a state or country? The README warns that selecting an area with millions of road segments, such as a US state, may crash the page even on a powerful device. The rendering is limited by browser and GPU memory. The README gives Tokyo with 1.4 million segments as a case that caused slowness on a mobile device. ### Is the city-roads scripting API documented? Yes. The Scene API is documented in API.md in the repository root. The companion repository city-script contains examples of programs built on top of the API. The README notes that the scripting capability is intended for software engineers who want to develop programs on top of city-roads. ## Sources - [anvaka/city-roads on GitHub](https://github.com/anvaka/city-roads) - [Issues](https://github.com/anvaka/city-roads/issues) - [License: MIT](https://github.com/anvaka/city-roads/blob/main/LICENSE) - [Project website](https://anvaka.github.io/city-roads/) - [README](https://github.com/anvaka/city-roads/blob/main/README.md) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/anvaka-city-roads