explaingit

anvaka/city-roads

9,269JavaScriptAudience · generalComplexity · 2/5LicenseSetup · easy

TLDR

A browser-based tool that renders every road in any city as a detailed visualization using OpenStreetMap data, with a pre-indexed cache of 3,000+ cities for fast loading and a scripting API for developers.

Mindmap

mindmap
  root((repo))
    What It Does
      Render city roads
      Data art output
      Browser based
    Data Sources
      OpenStreetMap data
      Pre-built city index
      Overpass API fallback
    Features
      3000 cached cities
      Scripting API
      City script examples
    Use Cases
      Create city art
      Explore road data
      Build custom tools
    Audience
      Designers
      Data artists
      Developers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Type any city name and instantly see its entire road network rendered as a detailed graphic you can use as data art or a map reference.

USE CASE 2

Use the scripting API to automate road rendering for multiple cities or build custom tools on top of the road data.

USE CASE 3

Explore OpenStreetMap road data for smaller towns not in the pre-built index via the live overpass API fallback.

Tech stack

JavaScript

Getting it running

Difficulty · easy Time to first run · 5min
Free to use, modify, and distribute for any purpose including commercial projects, as long as the MIT license notice is kept.

In plain English

City-roads is a web-based tool that draws every road in any city as a single visualization. You type a city name into a search box, and the browser renders all the streets, highways, and roads within that area as a graphic. The output is both a functional map and, depending on the city, something that looks like a detailed piece of data art. The road data comes from OpenStreetMap, a free and community-maintained global map. Fetching every road for a large city involves downloading a lot of information, so the project uses two strategies to keep things responsive. First, the author pre-indexed around 3,000 cities with populations over 100,000 and stored them in a compact binary format. For cities covered by this cache, the data loads quickly. For smaller towns or less common areas not in the cache, the tool queries the OpenStreetMap overpass API directly, which works but can be slower. Location search is handled by a service called Nominatim, which translates the text you type into geographic area identifiers. The tool checks its pre-built city index first, then falls back to a live overpass query if no match is found. Developers can go beyond just viewing a city. The project exposes a scripting interface that lets you write programs on top of the road data, automate what gets rendered, or build other tools around it. A companion repository called city-script provides examples, and the full API is documented in the main repository. There are practical limits. A city like Seattle renders smoothly even on older hardware, but a megacity with over a million road segments can slow a phone significantly or crash the browser. Very large areas like a whole US state may also exceed what a browser can handle. Most cities work without issues. The source code is MIT-licensed.

Copy-paste prompts

Prompt 1
How do I use the city-roads scripting API to render the road network of multiple cities in sequence and export each as an image?
Prompt 2
What are the browser performance limits in city-roads and how do I handle very large cities that might crash the tab?
Prompt 3
Show me how to query the city-roads API to get raw road segment data for a city and process it in JavaScript.
Prompt 4
How does city-roads decide whether to use the pre-built city index or fall back to the OpenStreetMap overpass API?
Prompt 5
I want to build a tool on top of city-roads road data, where do I start and what does the scripting interface expose?
Open on GitHub → Explain another repo

← anvaka on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.