City-Roads: A Free Open-Source Tool for Drawing City Road Networks 136

What is City-Roads?

City-Roads is a free, open-source tool designed specifically for drawing urban road networks. It uses OpenStreetMap data and relies on the browser's WebGL for rendering—no additional software installation needed. Just open the webpage, enter a city name, and you can view the entire road network, then export it as a high-resolution PNG or SVG file. Many designers, planners, and map enthusiasts use it to quickly generate maps, create artistic posters, or analyze urban areas.

Main Features of City-Roads

• Fast Rendering: Millions of road segments can be displayed quickly. Data for over 3,000 major cities is pre-cached, so it loads instantly.

• No Server Required: Everything runs on the front end, built with Vue and WebGL. After downloading the code, simply run npm install and npm run dev locally.

• Customizable Appearance: The right-side panel lets you change road colors, line widths, background colors, and add or remove place names, making it easy to create minimalist, tech-inspired, or hand-drawn styles.

• Multiple Export Formats: Once finished, you can directly download as PNG or SVG, which is convenient for layout, printing, embedding into ppt presentations, or sharing on social platforms.

• Scriptable Modifications: With SceneAPI, you can use code to change colors, color roads by level, batch screenshot multiple maps, or embed it into your own projects.

How to Use City-Roads

1. Open anvaka.github.io/city-roads

2. Enter a city name in the search box, such as Beijing, Shanghai, or New York, and wait for it to load.
   

3. Customize the road and background colors on the page, and add the city name.

4. Click download and select PNG or SVG.

Note

The first search requires waiting for data to be fetched from the internet; Overpass API has rate limits, so it may sometimes be slower. Cities that are already cached load much faster. The page supports zoom in and out, making it easy to view roads of different sizes.

Local Development of City-Roads

• Prepare the Node.js environment

• Clone the repository and install dependencies:

git clone https://gitcode.com/gh_mirrors/ci/city-roads.git
cd city-roads
npm install
npm run dev      # 或 npm start

• The browser will automatically open http://localhost:8080. Enter a city in the search box (e.g., "Chengdu") to instantly generate a road network.

• Use the right-side control panel to adjust colors and line widths → click "Export" to save as PNG / SVG.

• Suitable for front-end, visualization, and map enthusiasts to extend interactions, styles, and data processing workflows on this basis.

Use Cases of City-Roads

• Teaching or Science Communication: Compare road networks of different cities, such as grid versus radial layouts, and explain concepts like shortest paths and connectivity.

• Design or Material Creation: Export high-resolution SVG or PNG files for use in posters, PPT presentations, wallpapers, or printed on items like mugs.

• Planning and Travel Analysis: View the overall road density and skeleton structure to help discuss transportation and spatial layout.

• Simple Analysis: Quickly visualize how a city expands, road hierarchy, and congestion patterns.

• Urban Planning: Compare road density and layout patterns (grid vs. radial) across different cities to help with site selection and identifying traffic issues.

• Artistic Creation: Use road networks as patterns for posters, T-shirts, and phone wallpapers; combine multiple cities for a unique visual effect.

• Classroom Demonstrations: In geography classes, pull up different cities on the spot to discuss layout differences; in GIS classes, use it to demonstrate OpenStreetMap data appearance.

Github Address:https://github.com/anvaka/city-roads