City Roads: A tool to draw all roads in a city at once
(anvaka.github.io)470 points by gaws 6 days ago | 60 comments
470 points by gaws 6 days ago | 60 comments
noiv 6 days ago | root | parent |
It's JavaScript and exposes an extensive API via console: https://github.com/anvaka/city-roads/blob/main/API.md#loadin...
Liftyee 6 days ago | prev | next |
In the age of bloated resource hogs, I was pleasantly surprised that this rendered with no perceptible lag or stuttering, even on my phone. Impressive how everything is drawn so efficiently.
6 days ago | root | parent | next |
mrbluecoat 6 days ago | root | parent | prev |
I agree. The pinch zoom was also buttery smooth. Nice job!
Defenestresque 6 days ago | prev | next |
The hobby-sized projects/videos on your Twitter are mesmerizing: https://x.com/anvaka
Talk about a true hacker mindset. Great bloody job!
hiatus 6 days ago | prev | next |
Link to the github project: https://github.com/anvaka/city-roads
stevage 6 days ago | prev | next |
So, it's a filter on OpenStreetMap to retrieve all ways with a highway=* tag, and draw them identically?
I think a much faster and easier way to implement this would be using existing sources of vector tiles, but scaled down. You could probably even just use Mapbox GL JS, and scale the whole canvas down by a factor of 4 or something, to avoid the issue of small roads not being present at city-scale zoom levels.
thih9 6 days ago | prev | next |
OSM content attribution is missing (either not added or getting clipped) when the data is exported for printing on a mug.
matsemann 6 days ago | root | parent |
Do you need the attribution when you print it on a mug for personal use?
maxerickson 6 days ago | root | parent |
That's the terms of the ODBL (produced work in section 4).
Pedantically, in this case, it isn't personal use either (the site is using the produced image to offer a mug for sale).
Note that this isn't necessarily an endorsement of those terms.
walski 6 days ago | prev | next |
I get a 403 for some cities. E.g. Wyk (auf Föhr) returns 403 on this .pbf resource: https://city-roads.s3-us-west-2.amazonaws.com/nov-02-2020/36...
walski 6 days ago | root | parent |
Oh damn, I thought this is a Show HN :D
anvaka 6 days ago | root | parent |
appreciate the feedback - I'll take a look
pmg101 6 days ago | prev | next |
If you choose Brighton and zoom in on Hove Park you see the fingerprint maze there very beautifully rendered as a vector, amazing OSM has this detail!
JSR_FDED 6 days ago | prev | next |
I was intrigued by how many of the 3000 cities you’ve cached I had heard of. You used population size >100k as cutoff, it would be interesting to compare how many cities someone has heard of with their population size.
This would be a fun metric to rate someone’s “global orientation”.
Only recognize the cities with >1M people? Low GO score (or more charitably, high Local Focus score :-)
rplnt 6 days ago | root | parent |
There are many quizzes like that on Sporcle.
myroon5 4 days ago | root | parent |
links:
https://www.sporcle.com/games/g/populouscities
https://www.sporcle.com/games/Wrightboy05/50-biggest-cities-...
https://www.sporcle.com/games/Wrightboy05/100-biggest-cities...
https://www.sporcle.com/games/eliasostnas/top-100-most-popul...
https://www.sporcle.com/games/MapleLeaf/world200
https://www.sporcle.com/games/vanderbizzle2014/300-largest-c...
crabmusket 6 days ago | prev | next |
I have a map of Brugge (Bruges) from this tool printed off on my wall. It's a great concept!
lippihom 3 days ago | root | parent | next |
Was hoping to do something like this but have had the formatting always come out wonky. Any tips?
lippihom 3 days ago | root | parent |
Ah I figured it out, didn't see the export to .svg under "Customize".
anvaka 6 days ago | root | parent | prev |
oh wow. Glad you liked it!
rl_for_energy 6 days ago | prev | next |
One of those simple charming tech experiences. Thanks for sharing!
latkin 6 days ago | prev | next |
In case others gave up, it took about 2.5 minutes to load my (midsize city) hometown from OpenStreetMap. So hang in there.
remram 6 days ago | root | parent | next |
Probably going to hit the paradox here, where most people are going to request a place where many people live, even though most places are small.
I probably have no chance, living in NYC.
zactato 6 days ago | root | parent | next |
I would expect the opposite with a basic LRU cache before the fetch to OSM
remram 6 days ago | root | parent |
That's fair unfortunately it's not what happened :-(
dotancohen 6 days ago | root | parent | prev |
I'm in a city well under 50,000 people not in the Americas nor Europe. The site gave a message that it was retrieving the data from OSM, then rendered the map faster than the browser would render a png. Very impressive.
sandworm101 6 days ago | root | parent | prev | next |
I'm at 10 minutes now, for a town of <15k. Render time might depend more on total area than number of lines to draw. Update: gave up after 20min. Something might be wrong with the particular city.
fnordpiglet 6 days ago | root | parent |
Render time for Seattle is a blink of the eye which has both area and density. I think the time people is observing is loading the raw data from open street map itself.
Capricorn2481 6 days ago | root | parent | next |
Because they cache the biggest cities in the world.
> 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 repositor
flufluflufluffy 6 days ago | root | parent | prev |
About 2 seconds for me to load and draw Los Angeles. It’s definitely the load time/network latency, depending on where it’s loading from. This is amazing! I might use it for a custom map or something
NavinF 6 days ago | root | parent | prev |
That's surprising. It only took me a couple of seconds to load NYC on my iPhone over 5G
zipping1549 6 days ago | root | parent |
Some cities are cached and NYC is going to be in it for sure.
peppertree 6 days ago | prev | next |
There's also a Figma plugin that can import OSM as vector. https://www.figma.com/community/plugin/1251030017228239072/v...
dudeinjapan 6 days ago | prev | next |
Well done! I tried Tokyo, and discovered it looks funny/disjointed because several far away islands like Hachijojima are part of Tokyo municipality.
Amorymeltzer 6 days ago | prev | next |
Neat! Lovely to look at. Is it caching just the most popular or previous searches?
The option to print on a mug with one link is pretty neat! Might actually do that...
HellsMaddy 6 days ago | root | parent |
From the README[0]:
> 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.
robinduckett 6 days ago | prev | next |
It seems to render each lane of the roads in my city seperately. It looks good at maximal zoom but worse if you zoom in.
okasaki 6 days ago | prev | next |
Great idea. Might print some and hang them.
dotancohen 6 days ago | root | parent |
I was thinking that this would be a great gift, to print a set of dinner plates with every place that I know the couple lived in. Each plate a different city.
Though I'm a bit worried about paint near food, especially for custom jobs.
tekno45 6 days ago | prev | next |
Idk how long itd take normally so just kinda neat.
But i love the slack in the dragging around the map.
elbac 6 days ago | prev | next |
This is wonderful. Great job.
kayvulpe 6 days ago | prev | next |
Incredible! May take a while for a big city, but well worth the wait.
imnotlost 6 days ago | prev | next |
Love it! I did a few cities where I’ve lived and it brings me back.
TomWhitwell 5 days ago | prev | next |
IIRC these are SVGs and excellent if you have a plotter
dmje 6 days ago | prev | next |
I love this. So much, I bought a mug. Hope you get a cut!
mulhoon 6 days ago | prev | next |
Simple and effective. Beautiful to look at.
thoughtcritical 4 days ago | prev | next |
any plans to add popups to each polyline?
cjs_ac 6 days ago | prev | next |
* Greater London excludes the City of London
* Footpaths and cycleways and shown as roads but railways are not
jameshart 5 days ago | prev | next |
It’s a cool project, well executed.
But I am a bit confused about the way it’s described. Is it unusual to see all the roads in a city drawn at once? Is the concept of ‘visualizing all the roads in a city’ one that we don’t have a name for? Is the creator from a parallel dimension where they only have tools that let you see one street at a time?
kaveet 5 days ago | root | parent |
Google Maps and most other maps will happily hide streets depending on your zoom level
larodi 6 days ago | prev |
This is the level of projects that our GIS students deliver at the end of 60 hours of non-mandatory class. Perhaps 70%+ of visitors of HN can do it if they decide to, it is just an interdisciplinary area that not many explore. A project of similar complexity in the WEB or ML are would never get upvoted so much.
aembleton 6 days ago | root | parent | next |
Are there are any tools that your GIS students use to create this? Or is it all code? Any libraries that you can recommend?
I was thinking that I would query the global database for roads and then take the nodes and their coordinates. Then I would need to convert those coordinates into points on a canvas and draw lines between them.
How would I get the boundaries of a city? Some places I've tried are just a point in osm. Is there some other data source you would use for that?
cpa 6 days ago | root | parent | next |
A combination of overpass turbo and a LLM would get you started pretty quick. Regarding GIS tools, download QGis (it sucks on mac but is okay on linux or windows)
larodi 8 hours ago | root | parent |
QGIS on many platforms for the fact that - its 1 CPU-bound, does not facilitate Spatial SQL and does not partition data when loading so-called attribute tables. Literally not useful for layers with more than 500k features. Already addressed many times in their issues on github, the short answer is - it will take ages to rewrite it.
It is perhaps too much to say, but QGIS is a dead-end for GIS systems in its current form. Russians branched 2.x into something called NextGIS btw.
larodi 2 days ago | root | parent | prev |
PostGIS with some middleware and Leaflet is more than enough. The rest is integration of data.
OSM is for data, the visualisation lib that is easiest to get right is the Leaflet. You can of course also use OpenLayers.
Most layers on this project are perhaps freely available already. If you need to map objects - QGIS is a free tool and there are plenty of segmentation algos. MMQGIS can geocode datapoints scratched from APIfy.
Btw, those who downvoted my comment must be really ignorant about the area of GIS. I find no other explainarion.
matsemann 6 days ago | root | parent | prev | next |
What is your point? That it's "undeserved" and that's bad somehow?
I think it was a cool visualization and fun to see. And still, 60 hours of research is more than I would put into it, so even if I technically was able to I would've never gotten around to actually do it. So nice to see something else than what I normally work with, even if it might be trivial in that domain.
larodi 2 days ago | root | parent |
My point was that HN glorifies things it does not understand well, purely on aesthetic grounds. While real breakthroughs very often goes unnoticed.
Its a bias. And struggling to find truth we should try to eliminate biases, we should first learn to see dem. Downvoting a comment which points out a very apparent bias is indeed just another testament to this ignorance. It is super ignoring to also downvote comment of actual geomatics practitioner and a teacher. It is sad if not else.
The comment had zero judging whether is fair or deserved to get stupid points on some investor news site. I would love to see other aesthetic projects featured. But in all honesty - perhaps a GPT will get it right from the first time.
Capricorn2481 6 days ago | root | parent | prev |
Is this not a project in the web? Or what would be a web project of similar complexity?
semi-extrinsic 6 days ago | next |
Would be nicer if it would distinguish (just varying line thickness) between footpaths, roads, highways etc. Many European cities look messy in this view.
IMO, prettymaps is quite a bit better: https://github.com/marceloprates/prettymaps