Repolode
Submit
anvaka

anvaka/city-roads

Renders every road in a chosen city at once as a map-style visualization, using OpenStreetMap data in the browser.

View on GitHubWebsite
Stars
9,768
Forks
751
Open issues
57
Last commit
10 days ago

What is it?

city-roads draws every road of a city on a single canvas. You type a city name, and the app fetches road segments from OpenStreetMap through the Overpass API, then renders them as a dense line drawing that can be styled and exported as art.

To speed up downloads, the project ships a cache of roughly 3,000 cities with populations over 100,000, stored in a simple protobuf format. Name lookup goes through Nominatim, and the app checks the cache before falling back to Overpass when a city is not stored.

The project also exposes a scene API for scripting custom renderings on top of the visualization. Rendering is limited by browser and GPU memory, so very large regions such as entire states may crash the page.

Key features

  • 01Renders all roads of a city in one visualization from OpenStreetMap data
  • 02Caches roughly 3,000 large cities to speed up data loading
  • 03Resolves city names through Nominatim search
  • 04Provides a scene API for scripting custom renderings

Use cases

  • Creating abstract city-map posters or wall art
  • Exploring the street layout of a city visually
  • Building custom map visualizations with the scene API

Quick start

  1. 1

    Install dependencies

    npm install
  2. 2

    Start the local dev server with hot reload

    npm run dev

Things to know

  • Rendering very large areas can crash the browser or be slow on weak devices, since it depends on memory and GPU.
  • Selecting regions with millions of roads, such as a whole US state, may crash the page.

Topics

#openstreetmap#data-visualization#maps#canvas#javascript#generative-art

FAQ

What is city-roads?
Renders every road in a chosen city at once as a map-style visualization, using OpenStreetMap data in the browser. city-roads draws every road of a city on a single canvas. You type a city name, and the app fetches road segments from OpenStreetMap through the Overpass API, then renders them as a dense line drawing that can be styled and exported as art.
Is city-roads free to use? What license does it have?
city-roads is open source under the MIT license. Check the license terms before using it in commercial products.
Is city-roads still maintained?
Actively maintained. The last commit to city-roads was on Oct 10, 2026.
What can I use city-roads for?
Creating abstract city-map posters or wall art Exploring the street layout of a city visually Building custom map visualizations with the scene API
How do I install city-roads?
Install dependencies: npm install Start the local dev server with hot reload: npm run dev
Where can I get city-roads?
The source code and installation instructions are on GitHub: https://github.com/anvaka/city-roads

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects