Show HN: A game that tests how well you know your local area
backofyourhand.com
backofyourhand.com
I made it for my dad as a Christmas present. It also gave me an opportunity to learn about geocoding, etc.
Tech: serverless, Leaflet, Turf, Svelte, TypeScript, Cloudflare pages. I tried to use as many open / free tools as I could. I originally used map tiles from OpenStreetMap but they were discontinued so it uses Mapbox and Maptiler now.
Questions / feedback welcome. I also wrote a blog post with more information: https://adamlynch.com/back-of-your-hand. The code: https://github.com/adam-lynch/back-of-your-hand
Warning: it’s pretty difficult, unless your streets are numbered :)
Having the next 1.5 neighborhood is also valuable: if you live so close, it’s not a stretch to go learn the neighboring neighborhood (in fact, why not!?).
There maybe a level of “insult” (you don’t really know your ‘hood outside of the 5 streets), but used positively, I think the game is great.
I can do something with the pin too. Probably not possible to snap though, no.
Thanks!
Here's the osm for the pedway object, labelled a footpath. https://www.openstreetmap.org/relation/11909462
Here's one of the trails: https://www.openstreetmap.org/way/511807176
Perhaps the ability to choose the sample area could be based on the zoom level and hidden under a settings cog?
Cool concept though. This would be a nice game at many geographic magnitudes.
I also did my area twice and around 6/10 were either numbered or major roads that are very easy to ID. It might make sense to deemphasize larger or longer roads and numbered roads for a better balance of true local knowledge.
Edge too, is the service just down?
My hosting provider (Cloudflare Pages) seem to have a limit on "functions" I cannot increase. I've worked around it for now but it might open at Cork for everyone. If so, you can zoom out and tap the map to select somewhere else.
What do you mean by functions? I would just request location with javascript and use Google geolocation as a fallback.
These functions receive geolocation information via a function argument. So I've a function that intercepts requests to the app, grabs the geolocation information, and rewrites the URL (inserting the coordinates e.g. /lat,lng).
I go into more detail about this in the blog post but originally it just opened in Cork for everyone. I disliked the idea of having an annoying browser prompt for location permissions. I made it for my dad so having no geolocation was fine to begin with and I eventually added the geolocation I described above. Less friction, no extra client-side requests.
Also, why WebGL?
Yep, but not worth ruining the UX for marginally better geolocation in my case.
> How do you justify ignoring the users' wishes with regards to accessing personally identifiable information?
I don't know what you're referring to. If you're suggesting I'd prefer that apps & sites could access our location without asking, you're mistaken.
>Also, why WebGL?
The no-streets OSM raster map tiles were discontinued and I had to switch to custom Maptiler layers. They don't allow raster map tiles on the free plan.
Sometimes I get stumped and I also want a picture to explain it
As a small feedback: adjustable radius would be more fun. For example in the town were I had my childhood, this area is too big and takes other neighbourhood/cities that I don't know, but for where I live now it fits great.
Again, nice job and congratulations for making it!
This has come up so much. I'll be adding it, thanks!
only bit of feedback I have is that the street names may need some cleanup / filtering of some kind.
I picked a starting location in downtown Seattle (47.60882,-122.33087) and was told to locate "escalator"...it seems to have picked the escalator to the Pioneer Square light rail station as a "street" to be located.
Along with what you mentioned about having different difficulties in terms of radius, would also be fun to be able to choose the difficulty in terms of what types of streets (main streets vs side streets - e.g. only one type, or a mix, or turning down the selection of numbered streets somehow)
A Blue Book mode.
For those unfamiliar Blue Book refers to test "runs" done by London taxi drivers when they do The Knowledge[1].
It would be fun to be given, say "Australian High Commission, WC2 to Paddington Station, W2" and have to place multiple pins on the map and then graded on your result.
Semi-related, it could show you two pins and ask you how long it would take to drive between them at a given time of day. It would compare your guess to Google Maps or similar.
Basically yes, the Blue Book works on turns so you would mark the turns.
So for the example I gave above (Australian High Commission - Paddington) you might mark the turns:
ALDWYCH
CATHERINE ST
RUSSELL STREET
DRURY LANE
HIGH HOLBORN
PRINCES CIRCUS
ST GILES HIGH STREET
EARNSHAW STREET
NEW OXFORD STREET
OXFORD STREET
GT PORTLAND STREET
MARGARET STREET
CAVENDISH SQUARE
HENRIETTA PLACE
MARYLEBONE LANE
WIGMORE STREET
DUKE STREET
MANCHESTER SQUARE
MANCHESTER STREET
GEORGE STREET
EDGWARE ROAD
HARROW ROAD
HARROW ROAD ROUNDABOUT
BISHOP'S BRIDGE
> between them at a given time of dayYes, I guess it could give you extra points for choosing less busy routes during rush hour.
As someone who grew up in a warm country I am also amused that the growing season is hinted as being bounded by the number of days from frost to frost.
I tried 2 areas: where I live today and where I delivered pizzas 20 years ago.
3/5 for my local area, 5/5 for my old stomping grounds. I’m no London taxi driver, but I do have a bit of Knowledge about my old neighborhood. We didn’t have GPS back then and we liked it!
The size of the circle was perfect. Just large enough to challenge, but not so large that random tiny streets miles away trip the player up.
Edit: I think you should be able to make the radius a little bit smaller or add an option to choose from different radii.
My dad has gotten a perfect score a couple of times. Cork isn't huge but that's still very difficult. He's a human map
If you can, get a cabby in London with "The Knowledge" to do a session. Such cabbies are among elite humans, of a handful of disciplines known to alter the structure of their brains in a predictable way. Like Shaolin monks, Australian aboriginal shamans, and others, they've got an amazing superpower.
Neat game, and fascinating peripheral subjects, thanks!
Some minor nitpicks:
- If you could allow zooming in/out with double-tap-and-drag on phones, that would be cool. Specifically it would help with one-handed use.
- On a ‘square’, the road can go right around the pin, so the distance is measured inside this circle, and I get <100 points. Frankly I should've guessed that this would be the case, but kinda prefer that the app would do it for me.
- Perhaps there's not much use in offering streets that only have like a hundred meters inside the radius—especially since the page doesn't allow scrolling outside the circle, to more comfortably tap the street and not aim at the small chunk of it.
- OTOH it would be better if I could scroll somewhat outside the circle, to have the streets in the middle of the screen where it's more convenient to look and tap.
As a side remark: using this in European-style compact cities, especially in ‘old towns’, can be quite a hardcore mode. In the 19th century, the region in the circle comprised the whole city and some outskirts, so now there are a lot of old streets in this area. And with my smaller native city (half a million people), the circle covers most of it.
Also, I clicked directly on the (correct) road, and it took the points away, because the hitbox was off
https://i.imgur.com/yKONWUk.png
(Topniška ulica, Ljubljana, Slovenia)
About the road, this is due to a discrepancy in the OpenStreetMap data and the actual map tiles I'm using. Hmm. Not sure what I could here. Maybe I can be more lenient when you're two pieces of the same road
I know this is fundamentally an OSM data problem, but it's also your UX problem now. (N 42.5, W 83.17 if you want to have a look.)
Also it was quizzing me on park trails. And I just got an underwater tunnel at the zoo. I guess those are technically named ways in some manner of speaking, but they're definitely not streets with signs.
All that aside, this is really fun! Personal best 470/500. I wish I could make it longer; n=5 is a small sample and my scores vary tremendously from one run to the next.
I got one of those too, but I liked it. Nice to explore the major bike/pedestrian paths.
I guess it could be an option.
A few comments:
I tried it first in Yokohama, Japan, where I have lived for more than twenty years. It worked well. Although most streets here don’t have names, the game called up the names of bridges, highways, and even a moving walkway, which was fun. I then tried Osaka, which I have visited many times, and it worked well there, too.
In both cases, the names appeared in Japanese script, which works for me because I read Japanese. If the OpenStreetMap data for some locations is multilingual, you might want to give users the option of choosing the display language for the choices. Also, you might offer a wider range of landmarks for people to choose from. In Japan, the names of districts, buildings, parks, railways stations, bus stops, rivers, and mountains would be nice to include. I tried Manhattan, too, and half of the choices were numbered streets and avenues, which got boring quickly; the names of buildings, squares, parks, etc. would make it more interesting.
In the two Japanese cities, after I entered my choice, the map highlighted the correct location with a dotted line leading to it; I assume that was the intended behavior. When I tried it for Pasadena, California, where I grew up, and Manhattan, though, that highlighting did not appear and the dotted line just went off to the left side of the screen. I used Safari on MacOS. See the following screenshots:
http://gally.net/temp/yokohama.jpg
http://gally.net/temp/pasadena-california.jpg
http://gally.net/temp/newyorkcity.jpg
Finally, a search box to find the start location would be nice. It was cumbersome to zoom out, scroll from Japan to Manhattan, and then zoom back in.
> even a moving walkway
You've got to love Japan :D
>the OpenStreetMap data for some locations is multilingual, you might want to give users the option of choosing the display language for the choices.
This is something I planned to. I actually do it for Ireland. I show the Irish and English version of the name. And the sign is in the style of real Irish street signs. I just need to do this for more countries.
> Also, you might offer a wider range of landmarks for people to choose from. In Japan, the names of districts, buildings, parks, railways stations, bus stops, rivers, and mountains would be nice to include.
I'm going to look into expanding the objects but it's tough to keep everyone happy. It can be area-dependent.
>that highlighting did not appear and the dotted line just went off to the left side of the screen
Wow, not sure what's happened here. Will fix.
having the option to choose the size of the circle could be nice :)
The app seem to rely on a third party basemap provider, they usually have have a quota beyond which the service will stop serving maps for the app.
My hosting provider (Cloudflare Pages) seem to have a limit on "functions" I cannot increase. I've worked around it for now but it might open at Cork for everyone. If so, you can zoom out and tap the map to select somewhere else.
https://5fee8b00.backofyourhand.pages.dev/ may be more reliable but who knows.
As for the original issue, Cloudflare has a 100k function invocation limit and I can't even pay to increase it.
Maybe adding a button to skip the question: "not really a street".
#Worldle #57 X/6 (69%) ⬛⬛⬛⬅ ⬛⬛⬇ ⬛⬛⬇ ⬛⬛⬇ ⬛⬛⬇ ⬛⬛↘ https://worldle.teuteuf.fr
I used to be a Lyft driver, and something that seemed would be interesting at the time is a system, not unlike this one, for learning a city. In London to drive a cab you must do this super difficult test, and this means cabbies are very knowledgeable about the city. This is something in that vein, love it.
I hosted it here if anyone wants to try https://geoguess.alexmehta.xyz/createmap (advanced map and draw your boundaries).
I found it more fun than Back of Your hand just because I frankly don't remember too many streets but can recognize the overall area from walks I go on.
"There aren't enough streets in this area. Please select somewhere else"
But, again, some people are looking for a challenge, so maybe make it an option.
My suggestion would be to stick to majors and semi-majors (longer through streets). It would be more fun that way.
Also there may be a bug, for the one road I got in the second try, I put the marker dead center of the entire road, but it said I was 4 meters off and gave me a 99, even though the green line was under the pin.
Here's one idea if it might help you get started (though you can polish it):
- Mark all "dead ends".
- Mark all private streets.
- Recursively (or perhaps I should say iteratively, depending on your POV) mark all roads as X that only lead to previously-marked roads.
- Non-recursively, unmark each marked road that is both adjacent to an unmarked road AND that satisfies some reasonable heuristic (such as "being within 2 intersections of the center of your circle").
- Also unmark all freeways/highways/expressways/other reasonably-major roads (although few if any of them should be marked at this point)
- Delete all marked roads from your list of candidates.
This should ensure that every candidate road actually has a non-negligible chance of being at least seen by random drivers, and not just by residents who are forced to drive on it on the way home.
You can obviously augment
>The radius should be adjustable
Yes I will be working on an adjustable radius (I made it 20% smaller yesterday btw) and difficulty modes.
>Compete with friends (Can make it viral)
You can compete with friends. Click "Learn more" to figure out how to do that. I will also be looking into a "share score" functionality as well as leaderboards maybe.
>Don't know how it calculates the point
I'm aware of an issue in how the distance is measured and will fix it. Sometimes there can also be a discrepancy between the data and the rendered map.
Thanks for the feedback!
> The map tiles are loaded in from two OpenStreetMap tile providers (one with street names, one without).
You probably don't need to do that. You can use the same tiles, the same stylesheet even, and just hide the street names layer in code:
Might be worth accounting for the zoom level for taps / adjusting the distance. I did this on iOS.
Then have the game get you to name the streets to get there or something.
Shops would pay to be listed?
One question, though: how are you calculating distance from a street? Here, I thought I was pretty spot on for a street, but it still said I was 56m away.
Screenshot: https://imgur.com/a/L4usV6W
Does it pull vector tiles? Did you build those vector tiles yourself?
Seems like your server has a hard time...
I picked my neighborhood since your app located me 1000km away from where I live.
I started the thing and it backed away from the former incorrect coordinates.
The first iteration was very fast. I got 100 in every category in Lighthouse (but that doesn't cover everything of course). It used OSM raster map tiles. The no-streets map tiles were discontinued so I had to switch to using custom Maptiler map layers via Mapbox. Still more than fast enough IMO. I aggressively cache the Overpass data per area.
Then I migrated to Cloudflare pages to access their geolocation information via an edge handler. That slowed down visits without a LatLng in the URL because it does a couple of redirects.
Then today I had to fight multiple fires due to traffic and usage limits. I managed to workaround all the issues as they arose but the routing of page loads isn't ideal right now. Cloudflare are raising limits for me at midnight UTC so I'll be moving back to the faster setup again.
It's possibly more suitable in US cities for example that are divided into large blocks and large roads.
But, I LOVED playing round after round in Amsterdam, learning more about a city I definitely don’t know like the back of my hand!
MCQs for marked areas would be nice— guessing the name of a place given a location.
Keep going!! This is really awesome.
I don't want to make it too easy but I have gotten a lot of feedback today about difficulty (area boundary/radius, street length, etc) so I'll make some changes and hopefully I can keep going in the right direction.
Another idea I had was to add hints like maybe you could have a special button you could press once per round that would shrink the circle for the given street and then go back to the normal size next round.
Thanks for the feedback!
Again, it’s super.
Having difficulty settings like
* tourist
main streets / squares, maybe some (renowned - although that might take some additional Wikipedia/Wikidata data sources :-))
landmarks if those can easily enough be extracted from OSM data
easter egg mode for s/Paris/your favourite City with underground transportation/: find a specific metro station :-) (any entrance would count)
* resident "tourist" + smaller streets + any street really close to the circle center (15 minutes by foot / 5 minutes by car
-- oh, you'll just have to add flooding algorithm :-) ^^)
* pedestrian "resident" + smaller streets everywhere but with greater probability closer to the circle center + footpaths
(although with them probably lacking proper names most of the time that could be hard - but you could include
e.g. streets from pedestrian zones)
* taxi driver everything ^^
would be great :-)And then there could be (best optional) penalty modes, too:
* "resident"+:
if you pin a street that is more or less orthogonal to the target street
(say their mean directions intersect at more than 45 degrees ; and the pin is sufficiently
far away (30m / 10% of map height / half a block?) from their intersection (if any exists)
to rule out precision errors) you get only 1/2 the points
* "resident": if you pin a street the wrong direction off a main street (and the target street
does not cross the main street) you get only 2/3 the points
(i.e. main streets intersecting the plane and you picked the wrong "half")
"tourist":
the same but for cities with rivers where you picked the wrong bank
I also found the circle a bit big for my taste/confidence and cheated a bit by not placing the circle center at my location but so that I would still get my neighborhood but more of the outskirts than the city center...I also got very lucky with the streets, so got 330/500 on my first try. One was certainly also due to a square that is also used (at some specific times) for car traffic.
As an interesting effect, I got the first street wrong by some meters (and orientation :-\) and the 5th street was the same street again. At first I was a bit puzzled, and then got full marks for that one :-) I saw that you got the report of repeating streets already in some other comment already but that experience led me to another idea:
It would be a great learning aid to (optionally) go through the (widely?) missed streets again after the 5 rounds.
And if we could even re-claim some (small) amount of points for getting them right the second time that would certainly help our brains etch in the correct position even more :-)
A small aside: I found it pleasantly devious that the circle restricts the scrolling at higher zoom levels! Just in the cases where the target street is very close to the border it might be nice to relax it a bit though...
And while trying it out on Desktop I discovered a possible bug:
While choosing the location, when pressing the "Zoom In" button 2-4 times suddenly street names were displayed again! Is this intentional so people can easier find their starting point? Firefox 98.0 on Linux
My last point:
Would it be possible to export a map view to print it out in good quality for offline reconnaissance / tinkering?
I love the idea of difficulty modes like "taxi driver". That might help in making everyone happy; people have wildly varying opinions on difficulty.
>A small aside: I found it pleasantly devious that the circle restricts the scrolling at higher zoom levels! Just in the cases where the target street is very close to the border it might be nice to relax it a bit though...
You're the second person to mention that some amount of over-scrolling would be helpful so I'll add that soon.
>While choosing the location, when pressing the "Zoom In" button 2-4 times suddenly street names were displayed again! Is this intentional so people can easier find their starting point? Firefox 98.0 on Linux
OK thanks. I think this is just that the map tiles didn't load quick enough and you saw through to the layer with streets. I'll look into it soon.
>Would it be possible to export a map view to print it out in good quality for offline reconnaissance / tinkering?
I'm not sure what you mean here. Can't you get maps elsewhere? Or do you mean the final screen where it shows the maps with the 5 streets marked out?
(I'd probably play a version where you could customize the area radius, though! ...I'd probably still lose with a radius of like 3-4 blocks, though...)
> Cannot parse Overpass API response https://backofyourhand.com/build/bundle.js:6:1039277 asyncFunctionResume@[native code] [native code] promiseReactionJobWithoutPromise@[native code] promiseReactionJob@[native code]
One time I got a the same avenue twice in the same round, but I don't know if it was a bug in the game or if the data is duplicated in OpenStreetMap.
Still great, though.
1. I was trying to keep the UI very minimal.
2. ZIP codes are not universal / consistent.
3. I imagine any API I'd have to use for this would cost me.
I'm not against it though but it needs some thought.
1. Give names of intersecting streets. 2. Reduce the circle by half (just for this street). 3. Show a photo. 4. Allow you to drop a pin and tell you the distance (but not the direction). Then you can confirm the pin or move it one more time.
> I've always wanted to try a bottom-anchored design, so I took my chance.
I know exactly what you mean!
Granted, I'm also directionally deficit.
I ran into issues like this with a strange streets (described here https://adamlynch.com/back-of-your-hand/#the-lioscarrig-driv...), so I consider any two streets with the same name in the OpenStreetMap data to be the same street. I.e. if you put a marker down near any of them, you get points.
However, if the section of road has a different name, then it's different.
Thanks for the response.
I can look at what you are using from overpass later and see what is up with their data.
It defaults to Ireland in this case because I'm Irish.
I think your integration may have a bug?
If it consistently works in one and not the other (at the same point in time), then the only difference I can think of is that Back Of Your Hand uses their "edge handlers" / "functions" and I made that other URL with their "workers". Hmm.
---
Maybe I could inform the user somehow when it cannot find a location at all. I really want to avoid a browser popup asking for the user's location though
I could've sworn I made sure not to include it when submitting. It does redirect to that if there's no location found so maybe HN updated the link to the redirect destination?
I'm pushing a change now to ignore this specific lat-lng combination and fallback to geolocation
Longer roads should score more points because they're more important / you're a bigger idiot for missing them? ;)
I use Mapbox and Maptiler on the free plan. They both have limits but I haven't ran into them yet. And I've seen a LOT of page views today.
There are probably features I don't use that trigger limits more easily though.
Was already wondering how this game was going to work, like geoguessr maybe?
Still fun though! Just not what I expected from the name.
And it'll remember that location next time.
(You can also click and drag the map to move around)
One thing tho - several times I got the same street 2 times in a row.
Seems like a great game though, going to check it out in my desktop later.
latest version of chrome. have tried incognito
I did have some trouble understanding how it's calculating distance and drawing the dashed line. It does not always draw the shortest distance from the pin to the polyline for the road. I tried a few rounds with some deliberately wrong guesses and I'm still not sure I know what it's doing. Some examples:
(1) A road that runs from southwest to northeast. I placed the pin to the southeast of the road. Eyeballing it, the shortest distance is roughly northeast. The dashed line was drawn 10-15 degrees east of north. If it's significant, it drew to an intersection (not the nearest, but reasonably close).
(2) A road that runs east-west. I placed the pin north of the road by 50-60 meters. The dashed line was drawn 15-30 degrees west of south. It did not draw to an intersection or other point of interest. It may be drawing a ray from the center of the circle of interest.
(3) A road that runs north-south. I placed the pin east of the road by 40-ish meters, near the north edge of the circle. The dashed line was drawn 15-30 degrees west of south (my guess in #2 about a ray from the center was wrong), to an intersection, giving a 102 meter distance.
(4) A discontinuous street. (Replicated for a different street! 4th St and 5th St in Marion, IA, if it helps.) The street runs north-south but has a quarter-ish-mile gap. I placed the pin not far from the southern section of the street. The dashed line was drawn from the pin, past (and nearly parallel to) the southern section, then connected to the southern tip of the northern section. Interestingly enough, the distance looked like it was pin-to-southern-section.
(5) A north-south road in rural Iowa taking advantage of the 1-mile grid. I placed the pin near the center of the circle, slightly less than one mile from the nearest point of the road. It drew the dashed line northwest and showed a distance of 2002 meters. I would have expected due west, and ~1500 meters.
(6) A road that runs north-south (with a bit of southeast a half mile south of the circle), that happened to just barely peek inside the circle on the far west. I placed the pin near the outer edge of the circle, roughly northwest. It drew the dashed line nearly due south (several miles!) but reported a distance of 281 meters.
Sometimes the distances seem reasonable even if the dashed line is drawn to a different point on the road. Sometimes the distances and the dashed lines both seem to be off. Intersections seem to have something to do with it, but there also seems to be something else going on too.
For testing, if you're interested, the intersection of "White Road" and "North Alburnett Road" in Iowa (between Marion and Alburnett) is great. It's sparse, gives you nice straight roads, with just a few driveways and other points-on-polyline to confuse(?) algorithms. If you get C Ave Extension just barely in the circle on the west, that's #6.
And for what it's worth, I had fun trying to figure this out!
Find road 27 W
Find road 59 S
Find road 26 W
Find road 59 S
Find road 58 S