Have you ever seen a photo on Google Street View and thought ? Well, I have. So I started a project to get Street View photos at random and turning them into wallpapers. "Damn, this would make for a nice wallpaper" First problem is that Street View photos are cluttered with interface controls. I soon found out it's a problem that had been already tackled by another kind of people that need clean Street view pictures: journalists. Karl Hodge listed all the that should be hidden to get a clean picture. Andy Dickinson went one step further and created a Chrome to hide all those elements at once with a single click. elements extension Now, if I only wanted a couple of pictures from Street View, that extension would have sufficed. But I get tired of my wallpapers very quickly. My perfect day starts with a good wallpaper that I have never seen before. I needed a solution that could automatically generate many photos to save me from boredom. The good news for anyone who wants to automate Google Maps stuff is that there are APIs for that. They aren't free of charge, but Google gives free monthly credit to developers. That was more than enough for my small project. In my case, the perfect API to be the . It has a function to return a photo from a given location. The call is as simple as . Problem is that the maximum size allowed is 640x640. Not ideal for a wallpaper. seemed Street View Static API this After some research, I found another API called . It has a that allows web developers to include Street View panoramas on their sites. Google even provides a that was almost exactly what I was looking for. Maps JavaScript API Street View Service demo Street View Service is flexible enough to allow for the disabling of all interface controls, so no CSS hacking was needed. And as a very welcome bonus, it also permits removing the street names! Unfortunately, that API doesn't provide a way to get a picture from the panorama the same way the Static API. So the solution I made was to create a simple page with a clean panorama and take a screenshot. Here is the final version of the page's source. Clean Street View <!DOCTYPE html> < > html < > head < = > meta charset "utf-8" < > title </ > title < > style { : ; } , { : ; : ; : ; } /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map height 100% /* Optional: Makes the sample page fill the window. */ html body height 100% margin 0 padding 0 </ > style </ > head < > body < = > div id "map" </ > div < > script { urlParams = URLSearchParams( .location.search); latitude = (urlParams.get( )); longitude = (urlParams.get( )); panorama = google.maps.StreetViewPanorama( .getElementById( ), { : { : latitude, : longitude }, : , : , : , : , : , : , : }); } ( ) function initPano // Note: constructed panorama objects have visible: true // set by default. const new window const parseFloat 'lat' const parseFloat 'lng' var new document 'map' position lat lng addressControl false linksControl false panControl false fullscreenControl false zoomControl false enableCloseButton false showRoadLabels false </ > script < = > script async defer src "https://maps.googleapis.com/maps/api/js?key=ADD_YOUR_KEY_HERE&callback=initPano" </ > script </ > body </ > html The page gets the query string parameters and and displays a full screen clean Street View panorama of the location. This page alone can be used as an alternative to the Clean Street View extension, with the advantage of having the street names removed, but the drawback of needing a Google API key (which, by the way, demands a credit card). lat lng At this point, I needed to somehow save that picture so I could use it later. And here is the part I apologize to all JavaScript developers out there. Although I could create the page (basically because almost all the code was in the Google's demo), I couldn't do the screenshot part. To be fair, I even tried. I resorted to Python. In Python, one way to render a page that runs some JavaScript is using . It's a library that allows for task automation on browsers. Originally created for web application testing, Selenium can be used for a variety of tasks, including , boring stuff automation and taking screenshots from pages :-) Selenium web scraping I won't get into the details of how Selenium work. But If you have never used it, it will open a browser and do whatever your code says. In my case, all I needed to do was to open my custom page with some values in the parameters in a fullscreen browser, take a screenshot and save the image file somewhere. Here is a sample code. time selenium webdriver lat = lng = options = webdriver.chrome.options.Options() options.add_argument( ) options.add_argument( ) options.add_argument( ) driver = webdriver.Chrome( , options=options) driver.get(page_path) time.sleep( ) driver.save_screenshot(str(lat) + + str(lng) + ) import from import # Fenway Park's coordinates 42.345573 -71.098326 # Webdriver setup "--log-level=3" # minimal logging "--headless" # hide browser's GUI "--window-size=1920,1080" "chromedriver.exe" # Get and save image 1 # wait for image to load "_" ".png" Only being able to save a screenshot of a specific location wasn't enough, though. I wanted photos from many random locations. This is another reason I quickly jumped to Python. I wouldn't be able to do that in JavaScript. Sorry again JS folks... Generating random coordinates that return valid Street View photos is harder than it seems. The API wouldn't help me with that, so I was left with the brute force approach. Fortunately, Google lets you check if a given pair of coordinates has a Street View photo free of charge through the . Street View Image Metadata API Still, picking random coordinates and checking if they are valid on Street View is quite literally picking drops in the ocean. To alleviate that, I restricted the search of coordinates to be only inside some polygons on Earth's land surface. And what polygons did I use? I drew two big polygons, one around the Americas and the other encompassing Africa, Asia, Europe and Oceania. It's still very much brute force because I'm not generating the points straight from the polygons, but checking if a totally random coordinate pair is inside one of the polygons. It turns out it can be done with the function, which implements a algorithm. And I thought this was a trivial mathematical problem... matplotlib.path.contains_point point-polygon Once a point is inside one of the polygons, I proceed to check if the point has a valid Street View panorama. Here is the final Python code: sys glob time csv requests matplotlib.path mplt_path selenium webdriver os path random uniform API_URL = API_KEY = WIDTH = HEIGHT = getattr(sys, , ): script_path = path.dirname(sys.executable) : script_path = path.dirname(path.abspath(__file__)) paths = [] poly_file glob.glob( ): open(poly_file, newline= ) f: data = list(csv.reader(f)) paths.append(mplt_path.Path(data, closed= )) status = status != : onland = onland: lat, lng = uniform( , ), uniform( , ) p paths: p.contains_point((lat, lng)): onland = locstring = str(lat) + + str(lng) r = requests.get(API_URL + + API_KEY + + locstring) status = r.json()[ ] options = webdriver.chrome.options.Options() options.add_argument( ) options.add_argument( + str(WIDTH) + + str(HEIGHT)) options.add_argument( ) driver = webdriver.Chrome( , options=options) page_path = path.join( script_path, + str(lat) + + str(lng) ) driver.get(page_path) time.sleep( ) driver.save_screenshot( + str(lat) + + str(lng) + ) import import import import import import as from import from import from import # fmt: off "https://maps.googleapis.com/maps/api/streetview/metadata" # Not billed "ADD_YOUR_KEY_HERE" # get a key at https://developers.google.com/maps/documentation/streetview/get-api-key 1920 1080 # fmt: on if "frozen" False else # Setup on land polygons for in "polygons\*.csv" with "" as True # Get a valid Street View coordinate False while "OK" False # Pick a random point that is on land while not -180 180 -90 90 for in if True break # Check if random point has a Street View panorama "," "?key=" "&location=" "status" # Webdriver setup "--log-level=3" # minimal logging "--window-size=" "," "--headless" "chromedriver.exe" "clean_street_view.html?lat=" "&lng=" 1 # wait for image to load "images\\" "_" ".png" I must say that I'm very satisfied with the results! Most of the time, I get empty roads in the middle of rural areas. These bring me the feel of solitude I was looking for. No more dull wallpapers again. If want more implementation details, check out the repository. GitHub
![featured image - Using Google Street View Photos as Wallpapers [A How-To Guide]](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FzPiXlTDRqUbdIQt6o86mdthOjFP2-lwf3u30.webp?alt=media&token=d9c3f7f4-1729-41cf-90ac-2f91d9536639&auto=format&fit=max&w=3840)
