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; затем дороги загружаются из Overpass API OpenStreetMap или из локального кэша примерно 3000 предварительно проиндексированных крупных городов.
Нужен ли API-ключ или аккаунт, чтобы этим пользоваться?Нет, он опирается на бесплатный публичный Overpass API и сервис Nominatim, аккаунт или ключ не требуются.
Хорошо ли он справляется с действительно большими городами?Отрисовка ограничена вашим браузером и памятью GPU; огромные дорожные сети вроде Токио (1,4 млн сегментов) рисуются медленно, а выбор огромной области вроде штата Вашингтон может обрушить страницу даже на мощных устройствах.
Работает ли он и на телефонах?Да, он работает в любом современном браузере, включая мобильные; автор сообщает, что Сиэтл отрисовывается плавно даже на старом телефоне Samsung.
Можно ли строить свои собственные программы поверх 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