Last week I made Infinite Street View, a little hack for viewing a stream of random street view snapshots near a place. If you’re curious about how it was made, read on!
Background
I often find myself using things like Flickr and Google Street View to get a quick visual sense of a place I haven’t been. Sometimes it’s for a constructive purpose, like trying to narrow an apartment search or deciding on a neighborhood to stay in during a vacation. Other times it’s just to satisfy my curiosity about a place that came up in a book or in conversation. Unfortunately, photo sites and Street View both have their limitations for this sort of casual exploration. Sites like Flickr are heavily biased towards coverage of the major landmarks, and if you’re talking about a tourist-friendly destination, you’re going to see hundreds of sunsets and retina-burning HDR shots. Street View is better on that score, but there’s no good way to get lots of views at a glance. You have to drag that little yellow homunculus onto the street and then plod along frame by frame.
Last week it finally occurred to me that building something to give you a clusterbomb of street view images in an area would be a pretty straightforward hack. The relevant pieces are all available from Google through APIs, so it was just a matter of writing some JavaScript and a UI to present results. I quickly settled on some form of infinite scroll as a good fit so that a user could just keep getting additional frames until they were satisfied.
Building it
The page itself couldn’t be simpler: it’s a text input and a dropdown with some preset radius values, and that’s it. All the meaningful stuff happens in the JavaScript, which works something like this:
Wrinkles
- The text input uses the Google Places Autocomplete to geocode user input as you type, and if you get no autocomplete results and submit the form it does a direct Google Places lookup instead. There is one aspect of the standard behavior that bugged me, which is that it doesn’t passively select the top result as you type, so if you type part of a place, see the result, and hit ‘Enter,’ it won’t select the result for you. Because of the structure of the Places Autocomplete events and results, standard key listeners don’t get the job done, but eventually I found a workaround that grabs the top result and geocodes it when the enter key is pressed (trying to force input to an autocomplete isn’t always desirable, but in this case it’s preferable because there’s a tight relationship between a place being known to Google and having Street View imagery).
- Getting a random point near a given latitude and longitude requires a bit more math than just adding a random number between r and -r to both latitude and longitude, because you should adjust for the curvature of the earth (longitudes converge at the poles). This probably wouldn’t have mattered on the scale of a few miles that this site deals with, but I’ll take any excuse to dredge up high school trig! If you want to geek out about spherical point randomization, haversines, and the like, check out Wolfram MathWorld’s writeup.
- I spent a bit of time trying to put together an alternate mobile version that takes up the full device screen width instead of an arbitrary fixed width, but because so much of what happens occurs post-load in JavaScript, and because I suck at responsive design, I struggled getting this to work and put it on the back burner.
- I experimented with having the images float to the left to occupy all available space, but I found it was a little overwhelming; I like the neat linear flow of the current single-column approach.
Publishing it
I sent out a tweet when I finished the initial version, and it turned out I wasn’t only the one who enjoyed this flavor of armchair tourism. It only took about 30 minutes for me to hit the free daily limit for the Google Street View Image API (25,000 calls), and 4 hours for me to hit the PAID daily limit (500,000 calls). I had to board up the site for the remainder of the day until Papa Goog gave me my next allowance.
As with all things I’ve done, I got lots of valuable feedback right away. I had skipped two forehead-slappingly necessary features in particular: making the images links to the appropriate spot on Google Maps, and adding a permalink hash so people could share URLs for places. Now, when the page loads, it checks for a permalink hash and loads results based on that location and radius if they’re provided (here’s the view around my old neighborhood in San Francisco). A user can also click on any image to see a Google Maps split screen of that exact location.
What I’d do differently next time:
- Write my own autocomplete wrapper that works off the Google Places autocomplete and genericizes it, so I have easier access and finer control over the autocomplete’s events and properties.
- Seduce and marry a lonely billionaire, so I can buy unlimited Google API credit.
- Make a mobile version that works.
- Make the permalink hash live-update instead of only getting referenced on the initial page load. I tried to do this, had some trouble, and didn’t have time to power through it.
Links
