A visualization of all roads within any city

栏目: IT技术 · 发布时间: 6年前

内容简介: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/

A visualization of all roads within any city

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

The Little Schemer

The Little Schemer

[美] Daniel P. Friedman、[美] Matthias Felleisen / 卢俊祥 / 电子工业出版社 / 2017-7 / 65.00

《The Little Schemer:递归与函数式的奥妙》是一本久负盛名的经典之作,两位作者Daniel P. Friedman、Matthias Felleisen在程序语言界名声显赫。《The Little Schemer:递归与函数式的奥妙》介绍了Scheme的基本结构及其应用、Scheme的五法十诫、Continuation-Passing-Style、Partial Function、......一起来看看 《The Little Schemer》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

MD5 加密
MD5 加密

MD5 加密工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具