/ Flatiron School

Building the Sunset Somewhere app

Sunset Somewhere is a web app that Matthias Loker, Amy Johnson and I built at The Flatiron School. The idea is to show a big beautiful photo of a place where the sun is setting right now. It doesn’t aim to show you a sunset taking place at this moment but instead shows a photo of a place where it is currently setting, but which was taken in the past.

So where is the sun setting?

We started by finding a way to figure out where the sun sets around the world. Because of the axial tilt of the earth the sunset makes it’s own constantly moving curve across the planet that doesn't follow a longitude or any other path but it's own. (As we all should.)

There are tools to find out where the sun sets at a specific latitude and longitude but not one to show you all the places it is currently setting. So to get locations, we use a list of the 1000 most populous cities and query the Weather Underground API every 4 days to get sunset times in those cities. We used the most populous cities because they would be more likely to have photos.

Finding photos

We knew we wanted to show big beautiful photos so we chose to use the Flickr API. Instagram has more photos but they don’t store photos at full size as originally shot or anywhere near the resolution we wanted. The Flickr API has lots of options to let you search for photos including three different ways to search by location, bounding box, woe-id, or a latitude, longitude, and radius. We went with lat/lon because it was a good match for the city sunset time data which also has a lat/lon.

To search for the photos, we used the photos.search method. Flickr has lots of API calls you can make but this is the main search. It has lots of options and can be used in conjunction with other API calls to get even more data if needed. We use the options to do a tag search for ’sunset’, a lat/lon, the maximum allowed radius of 32 kilometers, and a few other options. We were able to get a lot out of the extras field. It will give you the direct photo URL on the server so you don’t have to construct the URL from the other data. When you upload to Flickr they store the photo in a bunch  of sizes and you can choose which one to use.**

Showing a photo

All this comes together when you load the page. We

  1. choose place at random from the list of where the sun is setting right now.
  2. Collect a list of all the #sunset photos from there.
  3. Show one of those at random to give as much variety as possible.

We want to show a large full screen image so we use the 1600 pixel size  (The ‘h’ size as Flickr calls it.) and we only want landscape photos because, well, it’s a landscape. (It also makes the layout much less complicated.) The 1600 pixel image isn’t always available so the the last step is to check for that and that width > height and 1) Show a photo 'Ooohh' or 2) Choose another at random 'Ahhhh'...

** Note: There are more sizes available than the documentation currently shows. You can see they have the n, c, z, etc sizes. These correspond to the sizes on a photo's 'all sizes' page. Some photos only have the ones you see on the docs. But a lot of photos that were uploaded within the last few years have additional sizes. These are ‘h’ at 1600 on the longest side and ‘k’ at 2048 on the longest side. The API docs for the extras field say you can get the URL for some sizes with the notation url_n, url_z, url_c, etc. Even though they don’t mention h & k they are also available. With that we were able to get 1600px images for the app.