Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://anvaka.github.io/city-roads/
Visualization of all roads within any city
https://anvaka.github.io/city-roads/
Last synced: 3 months ago
JSON representation
Visualization of all roads within any city
- Host: GitHub
- URL: https://anvaka.github.io/city-roads/
- Owner: anvaka
- License: mit
- Created: 2020-01-19T16:42:16.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2024-07-22T05:26:54.000Z (4 months ago)
- Last Synced: 2024-08-01T00:48:10.145Z (3 months ago)
- Language: JavaScript
- Homepage: https://anvaka.github.io/city-roads/
- Size: 1.97 MB
- Stars: 5,960
- Watchers: 85
- Forks: 444
- Open Issues: 33
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-frontend-gis - city roads - Render every single road in any city at once. (🌐 Web apps / Advanced)
README
# city-roads
Render every single road in any city at once: https://anvaka.github.io/city-roads/
![demo](https://i.imgur.com/6bFhX3e.png)
## How it is made?
The data is fetched from OpenStreetMap using [overpass API](http://overpass-turbo.eu/). 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](https://github.com/anvaka/index-large-cities/blob/master/proto/place.proto) protobuf format. The cities are stored into a cache in this github [repository](https://github.com/anvaka/index-large-cities).The name resolution is done by [nominatim](https://nominatim.openstreetmap.org/) - 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](https://github.com/anvaka/city-script). Scene
API is documented here: https://github.com/anvaka/city-roads/blob/main/API.mdPlease 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](https://twitter.com/anvaka) know how it goes. You can also sponsor my projects [here](https://github.com/sponsors/anvaka) - your funds will be dedicated to more awesome and free data visualizations.
## Local development
``` bash
# 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