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

Related tags

Map city-roads
Overview

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

Comments
  • [Discussion] Custom Queries

    [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.

    opened by piebro 10
  • Filter on osm_type (in FindPlace) is too strict

    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.

    opened by dasmoth 9
  • PNG export lines color does not match screen color

    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
    opened by dej611 5
  • Can't use Administrative areas

    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

    opened by Devetec 5
  • Why is `36e8` added to `osm_id`s

    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?

    opened by erkanyildiz 4
  • [Feature request] Fine grained zooming

    [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.

    opened by FischerJo 4
  • PNG download not working

    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.

    opened by FischerJo 4
  • Can't see smaller areas (localities) osm_type: way

    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?

    opened by zack6849 3
  • Danish cities seem unsearchable

    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.

    opened by mifriis 3
  • [Feature Request] Add export

    [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!

    opened by jz222 2
  • Cannot view city

    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?

    opened by mlcampbe 2
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    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.

    dependencies 
    opened by dependabot[bot] 0
  • [Feature Request] Allow city-roads read local OSM file to avoid mass network request

    [Feature Request] Allow city-roads read local OSM file to avoid mass network request

    For a large city the data maybe larger than 100MB, for designer or osm-mapper live in awful internet connection, load city correctly is almost a very hard thing. And if the web browser down, everything need to restart.

    If this program can load local .osm file, it will be great for local cache. User can make extract by OverpassAPI query or other method. In addition, this will reduce the burden on OverpassAPI, allowing it to serve more users.


    If this Feature Request seems unreasonable, you can close it immediately

    opened by LaoshuBaby 1
  • Waterways

    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?

    opened by Robert-PE 0
  • Configure fill?

    Configure fill?

    Hi there, I'm mostly reverse-engineering the code as not a Vue expert and, looking at #21 this might be tricky but here we go. I'm trying to change the app to display building footprints instead of roads. This is relatively easy from a query point of view, as it only involves changing Query.Road to Query.Building in FindPlace.vue.

    However, the footprints come as outlines and I can't work out if there's an easy way to add a fill to the building polygons. Does this require a major change in the WebGL functions or is there an option to style it so that in the example below, the buildings are solid red?

    Screenshot 2021-08-25 at 12 10 54
    opened by puntofisso 0
  • Possible to export/save settings for re-rendering later?

    Possible to export/save settings for re-rendering later?

    Hi there! I was wondering if there was a quick way to export the settings (layers?) as a JSON file or some other format. General idea would be to re-use this file in the future to re-render and adjust the settings as needed.

    I can export as an image currently which is great but if I need to tweak the visuals or settings layer I will have to recreate it again.

    Thanks, this is a very cool project!

    opened by linjmeyer 1
Owner
Andrei Kashcha
I love graphs
Andrei Kashcha
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

Daniel Sim 1.9k Jan 6, 2023
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:

Guillaume Leclerc 556 Nov 21, 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

Gerard Burns 40 Nov 17, 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.

Diego A. Zapata Häntsch 144 Jan 5, 2023
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

Edoardo Gargano 6 Apr 22, 2022
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

MapTiler 10 Sep 14, 2022
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

Adrian Dimitrov 16 Jan 4, 2023
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

eric regnier 3 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

null 0 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

null 1 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

Saransh Hardaha 5 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

Jeriel Mbiedou 0 Jan 3, 2022
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

null 5 Mar 7, 2022
seikatsu nft website. built with vue deployed with firebase. includes a metamask plugin extension injects the Ethereum web3 API into every website's javascript context, so this dapp can read from the blockchain

seikatsu nft website. built with vue deployed with firebase. includes a metamask plugin extension injects the Ethereum web3 API into every website's javascript context, so this dapp can read from the blockchain

Alisha Husain 2 Sep 28, 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

Stephan Tang 3.8k Jan 3, 2023
REST Countries API with color theme switcher is one of the Frontend Mentor challenges. It uses Composition API for Vue.js 3 and pulls data from the REST Countries API.

REST Countries API REST Countries API with color theme switcher is one of the Frontend Mentor challenges. It uses Composition API for Vue.js 3 and pul

Gizem Korkmaz 7 Sep 5, 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

Hussam Almoharb 13 Sep 29, 2020
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

Darren Jennings 7 Dec 30, 2022
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

Steffen Giers 9 Nov 21, 2022