City Roads – Draw all roads in a city at once

It's pretty cool mate. Gonna make a wallpaper with it.

I don't know if open street data let's you monetize like this, but consider adding a link to Shutterfly or some similar site that would let the user get their road network of choice be printed out on a mug or t shirt.

A site featured on hn a few weeks ago which showed height renderings of various locales let you do something like that.

Your projects are awesome anvaka! Please continue doing those!

Tokyo (massive map) seems a bit buggy, and there's several distinct groups of roads loading. Awesome tool nonetheless!

Well done. If possible, can you add functionality for:

- Pre-saved color swatches to cycle through, like those at color.adobe.com/trends

- Custom cell phone cases. A bunch like casetify offer affiliate revenue.

I like the minimalism of it. That said, I'd be happy if you exposed road segment classes (I believe OSM maps have that) for styling to give main streets or highways a bolder tone.

Kudos :)

Small feature request: Being able to rotate the image. For some cities, the "canonical" map is not vertically aligned with north (e.g. Barcelona, in maps usually the coast is horizontal, so north is pointing top-right).

Would you happen to support Canberra, Australia? Or is there a way to request a city if it's not listed?

This tool has some insanely good performance -- kudos! What did you build it on?

What are the copyright terms on these maps? What if someone wanted to use these on custom t-shirts and posters to sell?

Would love to see a version that renders train/street car tracks

It's interesting to note the size of the download for a city. Guess it's related to the complexity of the road network, not necessarily the number of roads. Interesting to think about the "entropy" of a city's network and compare between cities. For instance, Sydney AU is 25Mb, but NYC is only 11Mb. Even tho population of NYC is ~e x Sydney.

I like the interaction design a lot while loading the data.

The first time it took very long and after a while it said 'still loading'. Then after a while 'sorry this is taking so long'. And then 'trying another server'.

This is great interaction because the user knows what is going on and the app is still busy.

Great job!

Can you export it to SVG? I can see this really helping Wikipedia editors.

Very cool! It would be nice to be able to group multiple cities in one map. Greater London and the City of London are listed separately so Greater London has a big hole in the middle.

Yeah it's really nice! :) However i think there should be an option to disable showing sidewalks for pedestrians, so only roads for cars should be seen then. It would be nice to see where you can drive your car ;)

Thank you!

I checked here https://nominatim.openstreetmap.org/search.php?q=New+Hartfor... - looks like all other `New Hartford` have type "node" in the database, which doesn't give boundaries of the cities.

We are thinking about fallback here: https://github.com/anvaka/city-roads/issues/7 but what might work better in short term: try entering a county name, and then zoom in onto the place. It is not as convenient as having a city boundaries, sorry about that.

I tried Inverness, but strangely it only found those in the new world, not the original in Scotland.

In my case, I noticed many driveways were rendered when I did my town.

Try "Adelaide, South Australia". It was an actual planned city, and the city centre for the most part is a very easy to navigate grid. North Adelaide (the other grid you'll see to the north west just above it) also planned in the same way, but just across the river and smaller. Probably one of the best "planned cities" I've seen on things like this.

Ah Chandigarh. Good choice. The beauty of this city is evident in even this minimalist drawing.

Yes, but it is (as of this moment) an experimental feature. Add "?svg=1" to the end of the URL to enable this feature [0].

[0]: https://github.com/anvaka/city-roads/issues/4

as long as there is openstreetmap data for it It should work for rural areas as well :)

You should check out OsmAnd [1] and their pro client, which is FOSS [2]. The maps are downloaded in svg from OpenStreetMap (available offline) and the app has a ton of features. Also i'm not sponsored, I just find the whole thing very useful

[1] https://osmand.net/ [2] https://f-droid.org/en/packages/net.osmand.plus/

Will fix the name! Thanks for catching

While this may be possible some day, you can export today as vector file and then use https://ezgif.com/svg-to-png tool to save the SVG at any resolution. Would this work?

There was a plugin:

https://steamcommunity.com/app/255710/discussions/0/14562024...

It sounds like the version someone built later sort of works:

https://steamcommunity.com/sharedfiles/filedetails/comments/...

Export to svg as explained in another comment, open with inkscape and export to dwg.

The data is coming from OpenStreetMap, via http://overpass-api.de/

It's kind of overwhelming, but there's all sorts of tools that can take OSM data and do something with it.

Thank you! I've added a way to export maps to SVG file, which can be edited by an SVG editor, those editors also usually support adjusting thickness and changing colors of the roads. Would this work?

Try a smaller city. This rendered almost immediately for me: https://anvaka.github.io/city-roads/?q=La%20Plata%2C%20Argen...

OpenStreetMap's definition of Beaverton is quite complicated: https://www.openstreetmap.org/relation/423111 It includes several cut-outs for neighborhoods (including Cedar Hills) and other features. I'd guess that the OSM mappers were trying to represent a particular legal definition of the Beaverton city limits. How accurate it is, I wouldn't know.

Perhaps in situations like this, "City Roads" might consider ignoring the cut-out enclaves and just using the mulipolygon's outer boundaries.

The power line showing up as a road is a mystery. If you can locate the corresponding feature on OSM you might want to investigate it. (There may in fact be a road or trail of some sort, though -- it's common for powerlines to have a track for maintenance vehicles.)

What OSM shows as matching the relation to the city is very strange. The boundary is so folded that I can't tell which parts are inside and which parts are very carefully excluded... If you look at other cities vs yours on OSM you'll see that it looks like most of Cedar Hills is excluded on OSM or rather the roads are their but it doesn't consider them part of the city.

Denver, CO: https://www.openstreetmap.org/relation/253750

Beaverton, Oregon: https://www.openstreetmap.org/relation/423111

The ZIP Code 97003 took effect on 2014-07-01, when the ZIP Code 97006 was split [2].

ZIP Codes are not geographical entities and don't correspond to geographical extent; rather, they are a hybrid between a discrete number of finite delivery-points and an abstract way of capturing a postal delivery route. They are often abused as geographical entities, which the Census Bureau has tried to rectify with ZCTAs [1], but it's unclear whether most informal use of ZIP Codes is haphazard, or actually conforms to ZCTAs.

However, ZIP Codes directly map to one preferred place name designated by the USPS, and zero or more acceptable alternative place names. These are usually inspired by, but don't necessarily correspond to municipalities and political units that the lots in question belong under.

For both 97003 and 97006, the USPS recommended place name is "BEAVERTON", and other acceptable names are "ALOHA" and "HILLSBORO".

Beaverton's city limits are complicated [3][4]. The city has a map of annexations as well [5]. Cedar Hill was once supposed to be annexed. A court case about the proposed annexation of the Nike HQ resulted in these plans being put on hold [6].

[1] https://www.census.gov/geo/reference/zctas.html [2] https://about.usps.com/news/state-releases/or/2014/or_2014_0... [3] https://www.beavertonoregon.gov/DocumentCenter/View/9005/Cit... [4] https://www.beavertonoregon.gov/DocumentCenter/View/5554/Bea... [5] https://www.beavertonoregon.gov/DocumentCenter/View/843/Anne... [6] https://www.oregonlive.com/oregonianextra/2006/06/appellate_...

You should be able to enter counties - it may take a bit longer to download all the roads, sometimes it may take a while to download though and timeout...

My first instinction was to look at Tokyo as well, it's impressive to see.

I see that it is defined as `node` in osm: https://nominatim.openstreetmap.org/details.php?place_id=164...

We need `relationship` osm type to get the boundaries...

There is an ongoing discussion on the repository to give a better fallback: https://github.com/anvaka/city-roads/issues/7

I just did the same thing!

Yeah I was genuinely blown away by how fast this rendered every street in Chicago on mobile, a very side-street dense city.

Thank you!

from the GitHub: "beautiful art"

I think the main feature is buying the rendering as a coffee mug.

If you are able to find your town here https://nominatim.openstreetmap.org/ - and the osm type for the found place is "relationship" not node - it should work.

We are trying to find a fallback for `node` types here https://github.com/anvaka/city-roads/issues/7 - we basically don't have accurate city boundaries for nodes.

Unless you queue up primitives for batch rendering, there is no chance that the canvas API is even remotely as fast as proper WebGL usage due to its design. You need to create a vertex buffer (at least somewhere under hood) and submit it in a single operation (at least under the hood) to get this kind of performance. Looping over lines on the CPU with immediate submission doesn't get you anywhere close.

Interesting! What's the city name?

Yeah saw that too, it takes a bit of fiddling to get the right search term, try:

https://anvaka.github.io/city-roads/?q=City%20of%20Cape%20To...

Locally it is limited by ram, video card capabilities. Remotely it depends on overpass turbo API being able to process huge request s. Which error do you see?

Thank you !