百科.dev
全部条目AI 编程趋势榜开源项目技术资讯提交条目
登录
< 返回工具列表
C

city-roads

> 编程语言
开源

可视化任何城市内的所有道路

9.5K stars0 点赞1 次浏览
访问官网GitHub

工具介绍

可视化任何城市内的所有道路

city-roads

Render every single road in any city at once: https://anvaka.github.io/city-roads/

How it is made?

The data is fetched from OpenStreetMap using overpass API. While that API is free (as long as you follow ODbL licenses), it can be rate-limited and sometimes it is slow. After all we are downloading thousands of roads within an area!

To improve the performance of download, I indexed ~3,000 cities with population larger than 100,000 people and stored into a very simple protobuf format. The cities are stored into a cache in this github repository.

The name resolution is done by nominatim - for any query that you type into the search box it returns list of area ids. I check for the area id in my list of cached cities first, and fallback to overpass if area is not present in cache.

Scripting

Behind simple UI software engineers would also find scripting capabilities. You can develop programs on top of the city-roads. A few examples are available in city-script. Scene API is documented here: https://github.com/anvaka/city-roads/blob/main/API.md

Please share your creations and do not hesitate to reach out if you have any questions.

Limitations

The rendering of the city is limited by the browser and video card memory capacity. I was able to render Seattle roads without a hiccup on a very old samsung phone, though when I tried Tokyo (with 1.4m segments) the phone was very slow.

Selecting area that has millions of roads (e.g. a Washington state) may cause the page to crash even on a powerful device.

Luckily, most of the cities can be rendered without problems, resulting in a beautiful art.

Support

If you like this work and want to use it in your projects - you are more than welcome to do so!

Please let me know how it goes. You can also sponsor my projects here - your funds will be dedicated to more awesome and free data visualizations.

Local development

# 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

License

The source code is licensed under MIT license

GitHub Issues· 0 开放

在 GitHub 查看全部

暂无开放 Issues,或尚未同步最近议题。

核心特点

  • •JavaScript

> 标签

JavaScript

暂无评论,来聊聊你的看法吧

> 工具信息

发布日期2026年8月1日
最后更新2026年9月17日
分类编程语言
定价开源

> 相关工具

T
TypeScript
JavaScript 的超集,为前端与全栈提供静态类型
P
Python
通用编程语言,广泛用于 Web、数据与 AI
G
Go
Google 推出的简洁高效系统语言