Using OpenStreetMap tiles with Flickr

Update August 4th, 2011: I've changed the script to use any of the three OpenStreetMap tile servers, instead of hard coding it just to one.

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
<?php
do {
    // Open the log file
    $a = fopen( '/tmp/test.log', 'a' );

    // Read the URL line
    $input = fgets( STDIN );
    if ( $input == '' )
    {
        continue;
    }

    // Split the data so that we can access the host and
    // query string elements
    $parts = explode( ' ', $input );
    $urlParts = parse_url( $parts[0] );
    $queryParts = array();
    if ( isset( $urlParts['query'] ) )
    {
        parse_str( $urlParts['query'], $queryParts );
    }

    // The block to test for Yahoo! Maps:
    if ( preg_match( '@maps\d?.yimg.com@', $urlParts['host'] ) )
    {
        if ( !isset( $queryParts['r'] ) || $queryParts['r'] == 0 )
        {
            // This is the format that Flickr uses

            // Do the math to calculate the OSM tile
            // coordinates from the Yahoo!Maps one
            $z = 18 - $queryParts['z'];
            $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
        {
            // 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
            $range = range('a', 'c');
            $server = $range[rand(0, sizeof($range)-1)];
            $newUrl = "http://{$server}.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:

flickrosm.png

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

Shortlink

This article has a short URL available: http://drck.me/osm-flickr-8k4

Comments

Nice solution - didn't know you could do that with Squid! Another option (the one I use for my older, nont GPS pictures) is GeoSetter (http://www.geosetter.de/en/). It allows you to edit / save the co-ordinated directly into the files. It's a little buggy/crashy/slow, but it works nicely most of the time :)

I love this, but using Squid (which really isn't that great of a caching proxy) is just too heavy. Have you looked at creating a Greasemonkey script?

@Stefan: GeoSetter is a Windows application, it uses Google Maps and it requires a GPS track. I have none of those prerequisites.

@Samat: I could have used Greasemonkey, but I found that a pain to use in the past, I don't know JavaScript so well, and it would have had nothing to do with PHP :-P Using Squid was the fastest way to a solution!

Add Comment

Name:
Email:

Will not be posted. Please leave empty instead of filling in garbage though!
Comment:

Please follow the reStructured Text format. Do not use the comment form to report issues in software, use the relevant issue tracker. I will not answer them here.


All comments are moderated

Life Line