Render every single road in any city, The data is fetched from OpenStreetMap using overpass API.

Last update: Jun 28, 2022

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/master/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

GitHub

https://github.com/anvaka/city-roads
Comments
  • 1. [Discussion] Custom Queries

    I think it would be cool to be able to do custom queries and draw them.

    Pro:

    • adding railroads / buildings / water boundaries #19 #13 or other thing to the map or get rid of everything but highways and select a bigger area
    • easy testing in sharing of custom queries with the website

    Con:

    • no caching for the custom queries
    • possibly big queries

    I guess it shouldn't be to hard to fork this repo and just edit the request and create custom maps but I'm curios what your thoughts are on custom queries.

    Reviewed by piebro at 2020-02-04 20:09
  • 2. Filter on osm_type (in FindPlace) is too strict

    The row.osm_type === 'relation' filter (https://github.com/anvaka/city-roads/blob/master/src/components/FindPlace.vue#L138) seems to be a little bit too strict. Some cities (e.g. Edinburgh, UK) are returned with osm_type of "node" instead.

    Reviewed by dasmoth at 2020-01-20 13:58
  • 3. PNG export lines color does not match screen color

    I look for a city, say Milano in Italy, then customize the style to red rgb(255, 0, 0) for lines and white rgb(255,255,255).

    This is what I have on the screen:

    Screenshot 2020-01-31 at 08 42 57

    now I click on Customize -> As an image (.png) and a png file is downloaded. This is how the downloaded file looks:

    2020_01_31T07_39_37_250Z

    If I try the SVG file, it works fine with the right color.

    Another try

    If I set the background color to black, instead of white, when the exported PNG lines color gets closer to the one on screen:

    2020_01_31T07_48_12_733Z

    Inverting colors

    Just out of curiousity I've try to invert all color channels in the downloaded png and lines color get almost right - of course the background goes to black:

    Screenshot 2020-01-31 at 08 50 10

    Platform Details

    • MacOS 10.15.2
    • Firefox 72.0.2
    Reviewed by dej611 at 2020-01-31 07:54
  • 4. Can't use Administrative areas

    I have tried to do Seliegenstadt, Germany, however it says that it is an "administrative" region. It doesn't work with those apparently. image Also doesn't work with Oster, Ukraine. image

    Reviewed by Devetec at 2020-01-21 17:11
  • 5. Why is `36e8` added to `osm_id`s

    https://github.com/anvaka/city-roads/blob/64c5867406c1a16621b9db9081e16a743aba4d52/src/components/FindPlace.vue#L141

    I see 36e8 is added to osm_ids on Nominatim API results. Can you explain the rationale behind this?

    Reviewed by erkanyildiz at 2020-01-22 06:52
  • 6. [Feature request] Fine grained zooming

    Thanks for your work!

    If you have some spare time, it would be great if you can add a zoom bar somewhere, as the scrolling by mousewheel can be too coarse from time to time.

    Reviewed by FischerJo at 2020-01-20 13:53
  • 7. PNG download not working

    Great work so far!

    Sadly, the PNG download does not work for me. In particular, when I click "As an image (.png)", a dashed rectangle appears around it - so it seems the click is registered - but nothing happens.

    Reviewed by FischerJo at 2020-01-20 13:50
  • 8. Can't see smaller areas (localities) osm_type: way

    Hi There!

    I tried to search for a smaller town in my area, "Valrico, Florida" and it shows results, and is a city, but won't work.

    I thought ok, maybe it's too small, i'll go for brandon florida, which also doesn't work.

    LNMN5D0qRDeFe OYJUgdL64IpFZ

    These are both "localities", is that something you'd consider implementing, if it's even possible?

    Reviewed by zack6849 at 2020-01-22 20:36
  • 9. Danish cities seem unsearchable

    This is a bit of a niche issue, but of all the countries i tried in Europe they all seem to find cities without any problems.

    When i tried Denmark, i couldn't find any. I know you use overpass turbo but openstreet maps do have most if not all danish cities and towns.

    I attempted to find the /search?q=town endpoint in your code to dive into the query that gets sent but i can't seem to find it. It could be that data is classified differently here?

    All our neighbours like Germany, Norway, UK, Netherlands and Sweden are working just diddly fine.

    Reviewed by mifriis at 2020-01-21 12:57
  • 10. [Feature Request] Add export

    Hi,

    thank you for this amazing project. I was wondering if you could make it possible to export the map as SVG or PNG with transparent background.

    Thank you!

    Reviewed by jz222 at 2021-06-27 13:39
  • 11. Cannot view city "Decatur, AL"

    I search for the city and it shows up. I click the entry and it only shows 2 streets. It does not seem to matter how long I wait nothing else ever shows up. Any ideas?

    Reviewed by mlcampbe at 2020-01-30 15:42
  • 12. Bump shell-quote from 1.7.2 to 1.7.3

    Bumps shell-quote from 1.7.2 to 1.7.3.

    Changelog

    Sourced from shell-quote's changelog.

    1.7.3

    • Fix a security issue where the regex for windows drive letters allowed some shell meta-characters to escape the quoting rules. (CVE-2021-42740)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-06-23 22:11
  • 13. Bump eventsource from 1.1.0 to 1.1.1

    Bumps eventsource from 1.1.0 to 1.1.1.

    Changelog

    Sourced from eventsource's changelog.

    1.1.1

    • Do not include authorization and cookie headers on redirect to different origin (#273 Espen Hovlandsdal)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-06-01 10:59
  • 14. Waterways

    First of all, great tool! Made some really nice visualizations with it.

    I was wondering: since you are pulling the data from OSM, would it be relatively straightforward to modify the tool in such a way that it displays only the waterways instead of roads?

    Reviewed by Robert-PE at 2022-05-19 06:34
  • 15. Bump async from 2.6.3 to 2.6.4

    Bumps async from 2.6.3 to 2.6.4.

    Changelog

    Sourced from async's changelog.

    v2.6.4

    • Fix potential prototype pollution exploit (#1828)
    Commits
    Maintainer changes

    This version was pushed to npm by hargasinski, a new releaser for async since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-04-29 04:31
  • 16. Bump minimist from 1.2.5 to 1.2.6

    Bumps minimist from 1.2.5 to 1.2.6.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-03-26 01:41
  • 17. Bump url-parse from 1.5.3 to 1.5.10

    Bumps url-parse from 1.5.3 to 1.5.10.

    Commits
    • 8cd4c6c 1.5.10
    • ce7a01f [fix] Improve handling of empty port
    • 0071490 [doc] Update JSDoc comment
    • a7044e3 [minor] Use more descriptive variable name
    • d547792 [security] Add credits for CVE-2022-0691
    • ad23357 1.5.9
    • 0e3fb54 [fix] Strip all control characters from the beginning of the URL
    • 61864a8 [security] Add credits for CVE-2022-0686
    • bb0104d 1.5.8
    • d5c6479 [fix] Handle the case where the port is specified but empty
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-02-26 22:33
Related tags
Google maps component for vue with 2-way data binding

CONTRIBUTORS NEEDED! It's been increasingly difficult for me to make time to maintain this project. My projects at work have also gradually migrated a

Jul 3, 2022
Google maps component for vue with 2-way data binding

vue-google-maps Demo: Demo in production Showcase with a lot of features Presentation If you want to write google map this way : <map :center="{lat:

May 25, 2022
A Vue JS component for displaying dynamic data on a world map.

This is no longer being maintained, please do not open issues or PRs. Vue World Map A Vue JS Component for displaying dynamic data on a world map. Map

May 10, 2022
A wrapper component for consuming Google Maps API built on top of VueJs v2.

A wrapper component for consuming Google Maps API built on top of VueJs v2. Fork of the popular vue-google-maps plugin.

Jun 30, 2022
Using Google Maps with Vue.js

stores-map Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Run

Apr 22, 2022
A quick way to start a web map application with Vue.js using MapLibre GL JS.
A quick way to start a web map application with Vue.js using MapLibre GL JS.

Vue.js map using MapLibre GL JS A quick way to start a web map application with Vue.js using MapLibre GL JS. A simple fullscreen map application is us

May 28, 2022
Directus-extension-svgmap-picker-interface - Select a value from a SVG Map box, built using vue.js
Directus-extension-svgmap-picker-interface - Select a value from a SVG Map box, built using vue.js

This extension is under development, it may take breaking changes. SVG Map Picke

Jun 13, 2022
This component allows you to display custom HTML content on the map using Overlay
This component allows you to display custom HTML content on the map using Overlay

vue3-gmap-custom-marker This component allows you to display custom HTML content on the map using Overlay. This component is an update (a fork) from e

Apr 1, 2022
Rick and Morty series that are fetched from the GraphQL website

rick_morty Project setup npm install Compiles and hot-reloads for development Run `npm run serve` for a dev server. Navigate to `http://localhost:808

Oct 18, 2021
The front end of the success road map.

nuxt-success-roadmap Build Setup # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for production

Feb 5, 2022
An Open Source website where you can search for COVID19 resources in your city 🏙 using Social Media

An Open Source website where you can search for COVID19 resources in your city ?? using Social Media. Getting Started First, run the development serve

Jul 7, 2021
Vue-weather - This is a web application made using a vue js Framework which displays the weather according to the city.

vue-weather Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies for production yarn build Lints an

Jan 3, 2022
check the current weather of a city
check the current weather of a city

WeatherApp Check the current weather of a city click to view live Project setup npm install Compiles and hot-reloads for development npm run serve C

Mar 7, 2022
⚡️A vue component support big amount data list with high render performance and efficient.

Table of contents Advantages Live demo Simple usage Props type Required props Optional props Public methods Attentions Advantages Only 3 required prop

Jun 26, 2022
A VueJS directive can be used with forms in order to disable submit button and make every input readonly after submitting

vue2-form-loading A VueJS directive can be used with forms in order to disable submit button and make every input readonly after submitting Installati

Sep 29, 2020
A collaborative pixel art web tool for creating new art every day.
A collaborative pixel art web tool for creating new art every day.

workart Try now: https://workart.pages.dev/ A collaborative pixel art web tool for creating new art every day. About Built for the Cloudflare Develope

Sep 23, 2021
Localizer for Kirby helps to change every localized string within the panel – other plugins included!
Localizer for Kirby helps to change every localized string within the panel – other plugins included!

Localizer for Kirby – A plugin to override Panel and Plugin translations. Attention This plugin is still in Beta and is likely to change. If you find

May 26, 2022
A convenient space to keep a diary of things that need to be done every day

Challenge-Resposive-Web-Design-in-300hr Things that you must learn about it to run on road front-end world. In this Responsive Web Design challenge, y

Jun 14, 2022
📋 A convenient space to keep a diary of things that need to be done every day📈
📋 A convenient space to keep a diary of things that need to be done every day📈

DEV NOTE PRO Screen shots How to install - ViteJs 3 template at https://vitejs.dev/ Install NodeJs and NPM module at https://nodejs.org/ Check version

May 22, 2022