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.
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).
The rendering is done with WebGL. I wrote a silly 2d renderer to learn more about the platform, and never documented it. Thought it would not be very useful.
Ended up using it in a lot of tiny projects, but didn't have chance to document it yet. Here it is https://github.com/anvaka/w-gl
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.
This is already incorporated into the site. After the roads render, click "Customize", then "Onto a mug" and a link to zazzle.com will open to order a mug.
OpenStreetMap data license (ODBL) allows any use of renderings as long as attribution is present, and that modifications to the data have been made available under ODBL.
Bonus points if you let me add UTM or Lat+Long coordinates to have marks appear for the peaks I've bagged on the peak map. Then I can buy a mug or print a poster that lists all the peaks I've bagged or intend to bag.
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 ;)
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.
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.
It seems they're islands that are also part of Tokyo. From[1]:
> Also within the administrative boundaries of Tokyo Metropolis are two island chains in the Pacific Ocean directly south: the Izu Islands, and the Ogasawara Islands
Yay! 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?
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.
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.
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.
Ah 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?)
It'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.
Seems to be struggling with some of the nations in the UK. I can get London (England) and Swansea (Wales) no problem, but Edinburgh, Dundee, Glasgow (Scotland) etc. don't work. Nor do Derry, Belfast etc. (Northern Irish cities).
The data is coming from https://nominatim.openstreetmap.org/search?format=json, and it appears that it doesn't do any keyword searching - so if you type "edinburgh" it only finds regions which start with edinburgh. Typing "City of edinburgh" will find the correct council region.
Do 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 - I'm not sure yet which direction would make more sense?
I 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.
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.
It'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?
Would 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.
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
It 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.
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?
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.
Can 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.
Really 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.
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?
I 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!
To 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!
Now 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.
Sorry 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!
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.)
There'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.
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].
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.
It'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.
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...
That'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.
If 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/
I 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?
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 :)
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.
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.
No 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.
Weird 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.
Export 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.
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?
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%3A... - it's just a hobby but I love it :D