Making a location badge using OsmAnd and the MapQuest Open static map API

I'm about to embark on my second Biking Across Kansas tour. When I did it last year, I used Google Latitude to create a little "My Location" badge which I put here on my blog to let people track me across the state. The Google one looks like this:

However at some point during the last year I noticed that OsmAnd added a feature that allows it to periodically ping a web service of your choosing with the current location of the phone. This allows me to build my own location publishing service.

I did a little searching for how other people have used this feature in OsmAnd and found a few people talking about feeding the data into a Google map display. The example in the OsmAnd wiki posts the location to a Google doc which then somehow magically updates a Google map display. No offense to Google but I'd rather use OSM based products. Fortunately the good people over at MapQuest Open provide a service that suits this situation: The static map API.

Behold my creation (and location):

Note that this is no longer an active link since BAK is over. This is just a screenshot of what it looked like.

Now for the details. The system has two components. A web service to collect the location information from the phone and a display page that creates a pretty map to look at.

I hacked together some PHP in about an hour. Not the biggest fan of PHP and I'm pretty sure I'm doing some things wrong but I got something working and don't have time to make any improvements before I leave for BAK in under 12 hours so there you have it. The code is on github.

The location web service takes the GET request from the phone and writes the information contained in it to a file. The display page reads the file, pulls out the coordinates and uses them to construct a URL that retrieves a static map image from the MapQuest Open static map API. It isn't an interactive map, just a quick "I am here" image. However I have wrapped the image in a link that takes youto an interactive map on openstreetmap.org. Throw that into an iframe tag and you're good to go!

Possible future improvements might include the following

• Perform a nominatim query to get a nearby city name and display that
• Better controls over the accuracy of the position displayed. The google badge lets you only reveal which city you are in if you wish. Currently I only allow rounding coordinates to a given number of decimals (default is two)
• Dynamic sizing of the map based on parameters passed in to the iframe from the parent page. This example is rather huge and not really a "badge" but that's what I want in this situation.
• Track more than just the last location ping and display distance traveled between updates or something else interesting. The static map API is pretty flexible with displaying multiple POIs or even lines or shapes.
• ...
• PROFIT!

I am packing my bags as I finish this post so I don't really have time to brainstorm anything else. I'm sure others will have ideas :)

See you in 500 miles!