city-roads README

The project's README from github.com/anvaka/city-roads. As one markdown file: README.md.

city-roads

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

demo

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

city-roads (anvaka/city-roads)

Searching Database…

9.8K ·GitHub
City-roads
这是什么？一个网页工具，可以一次性渲染任意城市内的每一条道路，把 OpenStreetMap 数据变成生成艺术风格的可视化。
这是一个网页应用，还是需要安装的东西？它是一个基于浏览器的网页应用；你输入城市名称，它就直接在页面中绘制道路，在线使用无需安装。
它是如何查找并加载一个城市的道路的？你在搜索框中输入城市名称，由 Nominatim API 进行解析；然后从 OpenStreetMap 的 Overpass API 或本地缓存（约 3000 个预先索引的大城市）获取道路数据。
使用它需要 API 密钥或账号吗？不需要。它依赖免费公开的 Overpass API 和 Nominatim 服务，无需账号或密钥。
它能很好地应对特大城市吗？渲染受浏览器和 GPU 显存的限制；像东京（140 万条路段）这样庞大的道路网络会很慢，而选择华盛顿州这样的巨大区域甚至可能在强大的设备上让页面崩溃。
它在手机上也能用吗？可以。它能在包括移动端在内的任何现代浏览器中运行；作者表示即使在旧款三星手机上也能流畅渲染西雅图。
我可以基于 city-roads 构建自己的程序吗？可以。它提供脚本能力和有文档的 Scene API，相关示例可参见 city-script 项目。
为什么下载有时感觉很慢？用于获取未缓存城市的 Overpass API 虽然免费，但可能受速率限制且速度慢，尤其每次查询要下载数千条道路。
我可以在自己的项目中使用这些可视化作品吗？可以。作者明确欢迎你在自己的项目中使用这些渲染作品，只希望你分享一下使用情况。
What are similar projects?Leaflet, maplibre-gl-js, kepler.gl, cesium, prettymaps, wavedigger, turf, MapStage
Which topics is it in?map, gis, geospatial, maps, generative-art, art, visualization, data-visualization, browser, web-app, free, frontend
Creator
anvaka
Size
2 MB
Stars
9.8K
Updated
CommitOct 10
Age
6y
Commits · 90 Days