mirror of https://github.com/anvaka/city-roads
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
2.5 KiB
Markdown
64 lines
2.5 KiB
Markdown
# 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](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.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](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
|