PhpRiot
News Archive
PhpRiot Newsletter
Your Email Address:

More information

Using OpenStreetMap tiles with Flickr

Note: This article was originally published at Planet PHP on 1 March 2011.
Planet PHP

Using OpenStreetMap tiles with Flickr

London, UK Tuesday, March 1st 2011, 09:20 GMT

I like taking pictures, and I usually take a GPS so that I can place them on a map on my Flickr page. On my last excursion however, the battery of my GPS had died, so I did not have location information available to store in my pictures' EXIF headers. Flickr can use the EXIF headers to then show the images on the map.

Because I did not have the location information to automatically place my pictures on the map, I wanted to do that by hand. Flickr, being owned by Yahoo!, uses Yahoo! Maps. Yahoo! Maps however, is not terribly great in the country side. Actually, it is mostly empty, especially compared to OpenStreetMap's version. This made placing photos onto the map by hand quite impossible. So I set out to have only OpenStreetMap tiles as back ground in Flickr like they already do for Bejing and some other places.

Inspired by the Upside-Down-Ternet I installed Squid, and set the url_rewrite_program_ to a PHP script (with execute bit on):

url_rewrite_program /home/derick/bin/redirect.php

Squid will fire up a few of those scripts (depending on the url_rewrite_children setting) and then supplies them with URLs to rewrite. Each line of input is an URL to rewrite, and the script should echo a rewritten URL.

The script itself is rather simple. It just needs to account for two different formats because the Yahoo!Maps URLs are different from the Flickr ones (as indicated by the r argument in the original URL). I'm including the script here (and as download):

#!/usr/local/php/5.3dev/bin/php $newUrl\n"); } else { // This is the format that Yahoo!Maps uses // Do the math to calculate the OSM tile // coordinates from the Yahoo!Maps one $z = $queryParts['z'] - 1; $x = $queryParts['x']; $y = pow(2, $z - 1) - $queryParts['y'] - 1; // Assemble new URL and write log line $newUrl = "http://b.tile.openstreetmap.org/$z/$x/$y.png"; fwrite($a, "REDIR: $parts[0] = $newUrl\n"); } } else { $newUrl = $parts[0]; fwrite($a, "NORMAL: $newUrl\n"); } // Output the rewritten (or original) URL echo $newUrl, "\n"; } while (true);

After I configured my browser to use the Squid proxy running on localhost, Flickr is now shown with OpenStreetMap tiles as background:

And with the OpenStreetMap tiles in the background, I could place my photos on the correct location on the map.