A map mashup feasibility study

I like Google Maps. I like the way Google Maps offers rather detailed maps of the US, UK and Japan. I do not like the way in which it does not yet do so elsewhere, though. That is one reason why I like grassroots projects such as Open Streetmap, where insane people with GPS devices team up to put their track logs to good use, mapping the world as they go. Or drive. Or ride their bicycles.

Anyway, they render road maps of their own, as a collaborative effort, and anyone can join in. They also publish them on the web and have a Google Mapish effort running to visualize them, atop free but thoroughly unaesthetic satellite imagery from Landsat. In these days of web site mashups, I find it a bit surprising that they have not already adapted their tile generator to bundle up with Google's superior imagery, but figured they might lack the time, or devote most of it to other (more tedious and less gratifying) tasks instead. Either way, I kind of smelled an opportunity to do some fun hackery, and bring the projects closer to one another.

First I compared images between (Google) Maps and (Open) Streetmaps (Yes, I'm going to abbreviate from now on) to verify that they had picked the same resolution / zoom levels. For at least two zoom settings, they had, so I assume somebody has made their homework and paved the way for this potential mashup, should someone who would take it on happen to come along. Nice -- less work for me. (The Streetmaps tile server seems to offer a huge set of URL parameters, all tweakable, so had they not already done so, it would at least have been possible to do anyway.) These images are scaled down a bit, by the way, to fit the small confines of my blog:

So far, so good. I also noted that their tiles were rather closely aligned to what comes from Google Maps, at least for the above tile I studied -- Google Maps on the left (image copyright © 2005, DigitalGlobe), Streetmap on the right.

A decent match, but is it a pixel perfect match? The best way of finding out is to flip back and forth between them, to spot the tiny misalignments, should there be any. Sure enough, they were a few pixels out of alignment with one another. Good thing the bounding box was given as two latitude/longitude readings in the URL so we can adjust it to a better fit.

To aid me in doing so, I drew up a tiny web page, making use of a usually annoying CSS (or maybe Mozilla) misfeature, that makes things flicker horribly when you try to make an image disappear on hovering it. The problem, and in this particular case also the solution, is that if you specify a CSS img.hideme:hover { display:none; } CSS rule, Mozilla will first hide the image as you hover it with the mouse. On the next peek however, the image is no longer considered being hovered (after all, the mouse does not hover an image now, since there is no image there any more). Hence the image gets shown again. Repeat cycle.

So I made my own Flickr (ha), to realign the images until I eventually found a good setting, featured in the fourth image. The background of each image is set to the Google Maps image. (Your browser might not flicker on hovering each image -- mine does, though. Remember that this is just using the web as a primitive tool, rather than conveying something to an audience.)

Next, to do a site mashup without invasively mofifying any images, we would need the street map tiles to be transparent, except for the streets themselves. The tiles served by the Streetmap tile server are generated as JPEG images (a format that does not support transparency), but on a closer peek on the (huge!) URLs and some trial and error, I managed to have the tile server generate PNG images just by slipping it an additional query parameter FORMAT=PNG with the others. An even more polite and cautious person than myself would first have asked the good Streetmap people for permission before taking on such hackery, but I believe they might pardon me this time.

So, let's do the final image superpositioning, which also concludes this study:

Categories:

• GoogleMaps
• OpenStreetmap
• mashup
• CSS
• study