See photos from the other side of the world

Months ago, I was at a hack day in Edinburgh, and a team were working on a idea they called black and white. I ended up doing a version of it as a simple webpage.

It was based on color.com, the photo sharing service that shows you photos that others have taken around you. They thought this was daft – after all you know what’s around you, your already there. What you don’t know is what’s at the other side of the world. They wanted a service were you could take a photo, and you would get one back from the other side of the world.

They said they would be happy with just a mere fraction of the mind-boggling $41Million that color.com raised – really, just a tiny fraction and they’d be very content. (Same goes for me please!)

They then tried to write iPhone and Android apps, via an amusing journey during which they fired one of their team mates by twitter half way through, who then turned out to be their flatmate. “You fired your own flatmate via twitter? Couldn’t you have just left a note?” “That’s how we roll.”

Why not do a proof of concept with a simple webpage and the Flickr API, I thought? And finally I did. You can play with it here, and the code is on github.

So how does it work? To display the map it uses OpenLayers, a Javascript library that allows you to put maps from many sources on a webpage and allow an user to interact with them. It has a built in class for showing OpenStreetMap, the world map that anyone can edit in a wikipedia fashion.

Then we use a service from MaxMind to locate the user and set the initial position on the map. You can include a Javascript file in your code, which will contain several functions that return geographical information. All the information is hardcoded at the server side so the resultant file is only about 500 bytes in size and will work in any Javascript capable browser.

When the user clicks go, a simple bit of PHP converts the coordinates to the other side of the world then sets up the 2nd page. This calls another bit of PHP by AJAX to actually load the photos. This means the page displays quickly to the user.

The Flickr API is nice and clear, and returns XML that is easy to turn into useful JSON. It does seem to error a lot tho – it’ll say it has 200 pages of results but the results XML will be empty. We do a bounding box search, set quite wide to ensure it finds some results. That is a bit kludgy – it could do something like start with a narrow bounding box, but if no results come back you could expand to a much larger one. You wouldn’t want to do that more than once tho, for the sake of Flickrs server load and your page load times.

Then some simple Javascript helped by Jquery lets the user explore the photos!

What could be improved? We already have groupings so if some photos are on exactly the same location they will be shown with one marker, but what if two photos are very close together but the user is zoomed out? It will look like there is only one marker there – some clustering would help with that.

A slideshow mode that jumped from location to location to show all the photos would be cool to.

But there you go. When working on this I found a whole batch of photos from New Zealand that made it look fantastic: mountains, lakes, beaches and 20 men sitting on brightly painted tractors at some kind of parade – I want to go!

You can play with it here, and the code is on github.