13 ms·
City Roads – Draw all roads in a city at once
- Treblemaker 7y agoWould love to find something like this for rural areas. Maddening sometimes how details disappear from most online maps based only on zoom level rather than on feature density.
- anvaka 7y agoas long as there is openstreetmap data for it It should work for rural areas as well :)
- MacKay 7y agowas able to do Cape Breton Island [1], maps look really nice! [1]: https://i.imgur.com/I7q7Ttv.png https://i.imgur.com/I7q7Ttv.png
- baldomo 7y agoYou 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/ https://osmand.net/ [2] https://f-droid.org/en/packages/net.osmand.plus/ https://f-droid.org/en/packages/net.osmand.plus/
- jdboyd 7y agoIt's really simple looking, but I entered my city, and I just love the graphic that was rendered. Is there any chance of making it produce SVGs to download?
- parekhnish 7y agoYes, 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 https://github.com/anvaka/city-roads/issues/4
- anticensor 7y agoI misread it as the website that tenders every single road within a city.
- ohlookabird 7y agoIt looks great, but is the rendering of the OSM data the main thing or am I overlooking a feature here?
- Mathnerd314 7y agofrom the GitHub: "beautiful art" I think the main feature is buying the rendering as a coffee mug.
- anvaka 7y agoLol I hope it has more potential than art, though art in itself is very strong and inspirational thing! For example, one could use this tool to debug missing areas in OSM. You could also use it as a source of large natural graphs to study network flow, deseas propgation, etc. Finally it could also be used for educational purposes: you could show various graph algorithms on this data with something more realistic than abstract graphs :)
- ksbakan 7y agoWow this thing is fast! I expected lag on my phone but it works great.
- sethammons 7y ago> Something went wrong. The error was: > { "statusError": 504, "message": "Unexpected status code 504 when calling https://overpass.openstreetmap.ru/cgi/interpreter" https://overpass.openstreetmap.ru/cgi/interpreter" } And the referenced url 404s
- asdasdasdasdwd 7y agoTry a smaller city. This rendered almost immediately for me: https://anvaka.github.io/city-roads/?q=La%20Plata%2C%20Argentina&areaId=3603266014 https://anvaka.github.io/city-roads/?q=La%20Plata%2C%20Argen...
- sethammons 7y agoNow the site is not loading at all for me. Oops, there it goes. I think it could be overwhelmed. I think it just does not have data on smaller towns and cities. I've tried several US smaller cities and nothing works. However, your link does. I can get San Diego and Irvine, CA. But I can't get Redlands or Yucaipa, CA. I can't get Polson, MT (nor Kalispell nor Helena). Edit: Update - Finally got some data on Polson, MT.
- anvaka 7y agoSorry it takes so long sometimes! I assume overpass (the back end that gives data) may experience higher loads which would affect response time! But glad it finally worked!
- anvaka 7y agoTo fetch the roads I use overpass turbo API. They are sometimes slow and timeout and sometimes limit amount of requests that we can send. So I found three endpoints of overpass turbo and rotate between them: in case when one fails I go to the next one. If none was able to handle the request, I bail out and show the error. That said, I also cached 3,000 cities with population over 100k citizens and try the cache first, before going to overpass. That may be the reason why it is fast in some cases and slow in others. By the way if someone has more stable/fast overpass endpoints - I will be happy to add them to the list!
- izzydata 7y agoMy neighborhood was non-existant between the two cities that end on both sides of it.
- c0nsumer 7y agoNeat, but this does not seem to be all roads, it seems to be everything tagged highway=*. Specifically, non-motorized walking/biking paths and mountain bike trails (highway=path) are rendered. Ref: https://anvaka.github.io/city-roads/?q=Marquette%2C%20MI&areaId=3600134503 https://anvaka.github.io/city-roads/?q=Marquette%2C%20MI&are...
- jlv2 7y agoIn my case, I noticed many driveways were rendered when I did my town.
- fralewsmi 7y agoSame here, was interested to see it was only certain suburbs which had the driveways mapped.
- anvaka 7y agoDo you guys think it would be worth removing the foot paths? Someone here proposes to remove them altogether: https://github.com/anvaka/city-roads/issues/3 https://github.com/anvaka/city-roads/issues/3 - I'm not sure yet which direction would make more sense?
- matthberg 7y agoI don't know if it would complicate the UI too much, yet having a toggle for them would be amazing. There are solid arguments each for having them and not, for example they're perfect for trail systems, yet horrible when it comes to sidewalks which turn each road into a triple line.
- mkl 7y agoMaybe you need some checkboxes in the Customize panel. SVG export would also be pretty useful.
- marvin 7y agoMy hometown also got every tiny little hiking trail & path, walkway bridges and floating quays in the marinas :) I enjoyed this a lot.
- ppod 7y agoVery nice, customisable colours for water and different land types would be great.
- anon767 7y agoMy Girlfriend is an architect and she finds this tool great :) She asks if it would be possible to export these maps as .dwg file
- oxplot 7y agoExport to svg as explained in another comment, open with inkscape and export to dwg.
- crazygringo 7y agoIt doesn't have export to svg... and I don't know what other comment you're referring to. :S
- conscion 7y ago≥ 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 https://github.com/anvaka/city-roads/issues/4
- crazygringo 7y agoAmazing! Thanks x1000000!
- anvaka 7y agoShould now work for all :)
- maxerickson 7y agoThe data is coming from OpenStreetMap, via http://overpass-api.de/ 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.
- thunderbong 7y agoBeautiful! I tried it with quite a few cities. Most of the cities hardly look as if they were planned out! A few from the Wikipedia list [0] looks nice though. [0]: https://en.wikipedia.org/wiki/Planned_cities https://en.wikipedia.org/wiki/Planned_cities Quezon City: https://anvaka.github.io/city-roads/?q=Quezon https://anvaka.github.io/city-roads/?q=Quezon City&areaId=3600106569 Chandigarh: https://anvaka.github.io/city-roads/?q=Chandigarh&areaId=3601942809 https://anvaka.github.io/city-roads/?q=Chandigarh&areaId=360... Singapore: https://anvaka.github.io/city-roads/?q=Singapore&areaId=3600536780 https://anvaka.github.io/city-roads/?q=Singapore&areaId=3600...
- Thorentis 7y agoTry "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.
- sswaner 7y agoAh Chandigarh. Good choice. The beauty of this city is evident in even this minimalist drawing.
- glitcher 7y agoAwesome project, love the output! My wishlist item would be to have an option to render an additional x miles around the city limits boundaries to help incorporate communities that have the same city in their address but are technically not within the city limits.
- anvaka 7y agoHey there, I'm the author of the tool! Just wanted to thank you for the comments, feedback and shares! I 'm very happy! PS: If you liked that project you may find my other stuff interesting: https://twitter.com/search?q=from%3Aanvaka%20min_retweets%3A20&src=typed_query https://twitter.com/search?q=from%3Aanvaka%20min_retweets%3A... - it's just a hobby but I love it :D
- iagovar 7y agoIt's pretty cool mate. Gonna make a wallpaper with it.
- anvaka 7y agoYay! I'd love to know how it goes! I'm myself not sure what would be the best resolution and line thickness to do wallpapers. If you find something appealing - please share?
- oh_sigh 7y agoI 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.
- ajsharp 7y agoThis is incredibly cool. Cheers.
- anvaka 7y agoThank you !
- seaish 7y agoApparently it can't load all of California, but other than that, this is really cool.
- anvaka 7y agoLocally 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?
- ademars94 7y agoIt would be really neat to be able to set a custom resolution to render as a .png image. Like e.g. if somebody wanted to create a poster.
- anvaka 7y agoWhile this may be possible some day, you can export today as vector file and then use https://ezgif.com/svg-to-png https://ezgif.com/svg-to-png tool to save the SVG at any resolution. Would this work?
- Sohcahtoa82 7y agoIt's definitely missing a lot of roads in my city. Compare it's view to Beaverton, Oregon: https://anvaka.github.io/city-roads/?q=Beaverton%2C%20OR&areaId=3600423111 https://anvaka.github.io/city-roads/?q=Beaverton%2C%20OR&are... With the Google Maps view: https://www.google.com/maps/@45.5029349,-122.8365195,13.75z https://www.google.com/maps/@45.5029349,-122.8365195,13.75z It's like most of the Cedar Hills neighborhood doesn't exist. It also drew a line for a power line where there is no road.
- jmkb 7y agoOpenStreetMap's definition of Beaverton is quite complicated: https://www.openstreetmap.org/relation/423111 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.)
- maxerickson 7y agoThe boundary was initially imported from US Census Bureau data, which frequently does attempt to follow actual administrative boundaries. The source data tends to not be incredibly accurate.
- Sohcahtoa82 7y agoThere's definitely a little bit of fuckery regarding Beaverton's borders. My mailing address is in Beaverton, but OSM thinks it's Aloha. My zip code according to the post office is 97003, but some map software rejects it as non-existent, or forces a change to 97006. OSM's Portland borders also definitely don't match what mailing addresses are there. I used to live in apartments off of NW 185th near US-26, which most people would call Beaverton, but my mailing address was Portland, but I was at least 4 miles from anywhere people would actually call Portland. I wonder how common these confusing city limits are in other metro areas.
- dvasdekis 7y agoTyped in 'Brisbane', an Australian city of 3 million, but the only result that came up was Brisbane, Santa Monica. Any thoughts on international support? :)
- anvaka 7y agoI see that it is defined as `node` in osm: https://nominatim.openstreetmap.org/details.php?place_id=16445758 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 https://github.com/anvaka/city-roads/issues/7
- Dramatize 7y agoI just did the same thing!
- chillly 7y agoThe site times out, YC has struck. It says it is contacting openstreetmaps, but the global mapping community is called openstreetmap (no 's').
- anvaka 7y agoWill fix the name! Thanks for catching
- tantalor 7y agoCan I play Pac-Man on it?
- werber 7y agoUnable to export to png in Safari on iPhone xs
- subterrane 7y agoIt renders footways as roads so don't use this while driving. :D
- crazygringo 7y agoI love how elegant it is! Unfortunately it can't seem to find most cities I try. Just one example, typing "New Hartford" only finds one in Iowa, instead of listing all of them [1]. Most other medium-sized towns I tried show no results at all. I'd also love it if there were a way to export as SVG's -- these seem like they would make amazing posters to frame. [1] https://en.wikipedia.org/wiki/New_Hartford https://en.wikipedia.org/wiki/New_Hartford
- anvaka 7y agoThank you! I checked here https://nominatim.openstreetmap.org/search.php?q=New+Hartford&polygon_geojson=1&viewbox= 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 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.
- crazygringo 7y agoAh the counties work great! Never even would have occurred to me. And honestly, for many medium-sized towns, the county is more intuitive boundary anyways. Since it's not clear you could search by county, may I suggest including that as a tip or something? Otherwise it gives the impression the site is broken somehow. Or if it's possible, to find the smallest containing item that does have boundaries, whatever it is. (I don't know if OSM supports that performantly?)
- DuskStar 7y agoIt's not just small cities that counties are useful for - Los Angeles (the city) is really fragmented, snaky thing while Los Angeles (the county) is actually geographically coherent.
- GordonS 7y agoI tried Inverness, but strangely it only found those in the new world, not the original in Scotland.
- krzyk 7y agoI see an empty page when I enter my city (after it downloads it, I disabled uBlock but that didn't change anything) :(
- movablepoint 7y agoNice work! Easy to use (and fast). Reminds me of this print I still have on my wall called "All Streets Limited" by Ben Fry.
- anvaka 7y agoThank you!
- chadlavi 7y agoHuh, didn't find my hometown somehow. Dies this only work for cities over a certain size?
- anvaka 7y agoIf you are able to find your town here https://nominatim.openstreetmap.org/ 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 https://github.com/anvaka/city-roads/issues/7 - we basically don't have accurate city boundaries for nodes.
- londons_explore 7y agoDid you compare to a regular old canvas doing path calls? Or SVG? Most web browsers these days should GPU accelerate line drawing, making the whole lot one single openGL/directX/vulkan api call. If it doesn't perform equivalently, it's really a browser bug, and ought to be fixed.
- gmueckl 7y agoUnless 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.
- londons_explore 7y agoNo browser does immediate submission of canvas draw calls. They all appear synchronous, but the reality is they are all queued until the end of a browser main frame, or until your code does something silly like reading back a pixel.
- keyle 7y agoExport to something printable would be really neat. The export to PNG is cute but it's 2K wide, not useful for anything but potentially a desktop background.
- exdsq 7y agoIt's interesting to see how some cities are spread out. For instance, Aleppo is pretty interesting in that it has clusters of compact streets growing out of the center.
- irrational 7y agoI did my city. Lots of streets (that are decades old) are not on there, including the street that my house is on (which has been there since at least 1970). Other streets cut out and then pick back up a half mile or so later. What happened to the road in between those two points?
- tmhrtly 7y agoIf you folks are enjoying this but want more flexibility, check out Mapbox - it lets you define fully custom styles for OpenStreetMap maps and download them as high res images or embed them in apps (basically this but more flexible and a bit harder to use). https://www.mapbox.com/ https://www.mapbox.com/
- frebord 7y agoOkkk now how do I import this into Cities Skylines
- maxerickson 7y agoThere was a plugin: https://steamcommunity.com/app/255710/discussions/0/1456202492182996717/ 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/1485051886 https://steamcommunity.com/sharedfiles/filedetails/comments/...
- dabreegster 7y agoShameless plug for https://abstreet.org https://abstreet.org. (Importing any city from OSM still needs lots of work, though.)
- markdown 7y agoAwesome tool. How did you choose which cities to support? The capital and largest city of my country isn't supported.
- FpUser 7y agoLove it, keep going
- nehagup 7y agoHAHAHA.. I searched for "New Delhi", India The system crashed. Makes sense after all Delhi is as big as Singapore.
- Seb-C 7y agoThat's an impressive work! It runs smoothly even for large cities. I guess you cannot really fix it because it probably comes from the data you are using, but for Tokyo the default zoom is broken because a bunch of unrelated places is also displayed. Do you think you could also include the railroads/subways? I think here it is a more relevant way of finding your path in the city rather than the roads and the result could be quite interesting.
- woutr_be 7y agoMy first instinction was to look at Tokyo as well, it's impressive to see.
- Bendingo 7y agoVery cool!
- nanidin 7y agoLooks great - one observation, when I enter Kansas City I have to choose MO or KS. It would be great to be able to select a county or metro area. I wonder if something similar was used to create the laser cut wood maps you can find on Etsy[0]. [0] https://www.etsy.com/listing/605571478/kansas-city-wooden-map-laser-cut-wood https://www.etsy.com/listing/605571478/kansas-city-wooden-ma...
- anvaka 7y agoYou 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...
- teniutza 7y agoReally great idea and nicely made! Congratulations! I'm considering making a poster out of it, with our home town. I think my wife would love to have it. Seeing it on the wall would probably make us less home-sick. How complicated would it be to add the option of highlighting one or two streets? Something like, make the street line thicker or change its color.
- anvaka 7y agoThank 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?
- teniutza 7y agoI was thinking about it. I saw, after I commented that you added an SVG export, but did not have time play with it. I'll definitely have a look. Thank you!
- tsukurimashou 7y agoGreat project, a small thing you could add is a scale on some corner with just a line saying how much meters / kilometers it represents
- DonaldFisk 7y agoIt seems to be missing most of Scotland. No Glasgow, Edinburgh, Dundee, Perth, or Inverness. It does have Stirling, Aberdeen, and Falkirk. It's also missing parts of Australia: no Perth, Brisbane, Darwin, or Alice Springs.
- dcustodio 7y agoAmazing! Thank you so much for this. I am getting myself an A3 diagram of my hometown.
- makotoNagano 7y agoReally awesome! some weird quirks with the City search though. Couldn't find Cape Town, South Africa
- Schattenbaer 7y agoYeah 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%20Town&areaId=3600079604 https://anvaka.github.io/city-roads/?q=City%20of%20Cape%20To...
- deleted 7y ago[deleted]
- vrsfvwae5tbh 7y agoWeird edge case: there's a big gap in the middle of London where the City of London is. Technically the City of London is a seperate entity, but for most practical day to day purposes they are considered the same.
- pgt 7y agoThis is so cool! Doesn't find Cape Town, South Africa, which does show up on OpenStreetMap.org, though.
- thr0w__4w4y 7y agoCan someone either explain the use case for this to me, or explain what I'm missing? Too small to be of any use to me, no street names... maybe it's just a "cool" thing you put on a mug or get printed on a T-shirt? I'm probably just not in touch with my inner artist and am too quick to look for the functional / business purpose of this. By the way, really solid work and very kind of the author to share this. I can still appreciate it even if I don't see how I'd ever need to use it.