City Roads (first-party build)

City Roads

Type any city name and get a complete drawing of every road, street, alley, and path within its boundaries — rendered as clean, minimalist line art. Export in SVG or PNG. Works for any city, town, or region in the world. The same open-source Vue/WebGL app is built into this site (not embedded in an iframe).

Loading City Roads…

Loading module…

Prefer the legacy GitHub Pages host? Open City Roads mirror

Popular cities to try

Each link sets ?q=… on this page — the app reads search state from the URL (same as upstream).

How to Use City Roads

Step 1 — Search Your City

Type any city, town, neighborhood, or region name into the search field. The tool uses OpenStreetMap geocoding to locate the area. If multiple places share the same name, a dropdown will let you select the correct one — for example, distinguishing Portland, Oregon from Portland, Maine.

Step 2 — Wait for the Roads to Load

Once you select a location, the tool fetches all road data within that area administrative boundary from OpenStreetMap. Load time depends on the city size and road density — a small town loads in seconds, while a large metropolis may take longer.

You will see roads appear progressively as they load, drawn as thin lines on the canvas. The emerging structure of the city appears line by line.

Step 3 — Customize the Style

Use the settings panel to adjust how the map looks:

  • Background color — black renders roads as bright lines; white gives a clean minimalist look; custom colors let you match any design
  • Road color — default is white or black depending on background; any color works
  • Line width — thinner lines emphasize the network structure; thicker lines work better for printing at small sizes
  • Road type filters — include or exclude motorways, residential streets, footpaths, cycling paths, and service roads independently

Step 4 — Export Your Map

Click the download button to export. Two formats are available:

  • SVG — a vector format that scales to any size without losing quality. Ideal for printing as wall art, laser cutting, or further editing.
  • PNG — a raster format suitable for digital use, sharing on social media, or background images.

What Makes City Roads Visually Interesting

Every city has a unique road fingerprint — a visual signature determined by its history, geography, and planning decisions. The City Roads tool makes these signatures visible.

Grid Cities

Cities planned on a grid — New York, Chicago, Salt Lake City — produce maps with satisfying orthogonal regularity. Variations in block size, diagonal avenues cutting through the grid, and the way the grid bends to follow rivers or coastlines give each grid city a distinct character.

Organic Cities

Medieval European cities, Middle Eastern medinas, and organically grown Asian cities produce dense, intricate webs with no regular pattern. Tokyo map is famously complex — a layered result of centuries of incremental growth over terrain that resisted systematic planning.

Radial Cities

Cities designed around a central point — Paris under Haussmann, Washington D.C., Canberra — produce star-shaped or spoke-and-ring patterns. These maps have an architectural elegance that reads clearly even at small scales.

Terrain-Shaped Cities

San Francisco, Lisbon, and Hong Kong have roads shaped by steep topography — long, straight roads following ridge lines, with dense switchbacks on slopes. The road map of these cities is essentially a topographic map in disguise.

Popular Cities to Generate

  • New York City — the Manhattan grid with its iconic diagonal Broadway
  • Tokyo — one of the world's most complex organic road networks
  • Paris — Haussmann radial boulevards fan out from Île de la Cité
  • London — layers of Roman roads, medieval growth, and Victorian planning
  • Los Angeles — freeway-dominated sprawl with geometric suburban grids
  • Amsterdam — concentric canal rings echoed in the road pattern
  • São Paulo — one of the largest and densest urban road networks in the world
  • Cairo — ancient city structure meeting modern expansion

Source code: github.com/anvaka/city-roads ↗

Frequently asked questions

What is City Roads?
City Roads is a browser-based tool that draws every road in any city as a minimalist map, using live data from OpenStreetMap. It was originally created by developer Andrei Kashcha (anvaka on GitHub).
Is City Roads free?
Yes — completely free. No account, no watermark, no usage limits. The underlying road data comes from OpenStreetMap, which is a free, open-source project.
Can I use the exported map commercially?
The road data is from OpenStreetMap, licensed under the Open Database License (ODbL). Attribution to OpenStreetMap is required for public use. Check the ODbL terms for your specific use case.
Why is my city taking a long time to load?
Large cities with dense road networks — Tokyo, London, São Paulo — contain hundreds of thousands of road segments. Loading and rendering this much data in a browser takes time. Smaller districts or neighborhoods load much faster.
Can I map a neighborhood instead of an entire city?
Yes — search for a neighborhood, district, or borough by name. If it has its own boundary in OpenStreetMap, it will work as a standalone map area.
What road types are included?
By default, the tool includes all road types: motorways, primary and secondary roads, residential streets, footpaths, cycling paths, and service roads. You can filter these in the settings panel.
How accurate is the road data?
OpenStreetMap is maintained by millions of contributors worldwide and is generally highly accurate, especially in urban areas. Coverage in rural or developing regions may vary.

Try Map of GitHub next

Explore repositories clustered by overlapping stargazers — galaxy-scale open-source discovery.

Open Map of GitHub →

More tools here