内容简介:Render every single road in any city at once:The data is fetched from OpenStreetMap using
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-turbo API . While that API is free (as long as you follow ODbL licenses), it can be rate-limited and sometimes it slow. After all we are downloading thousands of roads within an area!
To improve the performance of download, I indexed ~3,000 cities with populating 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-turbo if area is not present in cache.
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 would 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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Build Your Own Web Site the Right Way Using HTML & CSS
Ian Lloyd / SitePoint / 2006-05-02 / USD 29.95
Build Your Own Website The Right Way Using HTML & CSS teaches web development from scratch, without assuming any previous knowledge of HTML, CSS or web development techniques. This book introduces you......一起来看看 《Build Your Own Web Site the Right Way Using HTML & CSS》 这本书的介绍吧!