Yvan Seth's Hole in the Internet

On the 25th, while I prepared my Market Quest entry, I was pondering maps. Specifically: how to get multiple point markers onto a Google Map. I hoped there was a simple way to specify multiple (latitude,longitude) pairs in the URI to achieve this. I was not fortunate enough to find any such thing. What did happen though was that I started playing with the Google Maps API and became a little too absorbed in my fiddling, as I am want to do.

The API is ostensibly simple, for what it achieves. With a little bit of code from the Google site I had a map up and running with multiple points within minutes. Then minutes turned into hours as I started fiddling and poking it, simplicity goes out the window when I try to get HTML/JS/DOM to do what I want. I'm a bit slow when it comes to the web monkeying. The end result is this map:

The map above relates to the Smithfield Market part of our day and marks highlights of the trip. (Assuming it worked for you, I suspect there might be a IE issue with my dodgey javascript. If I happen to crash your browser I uselessly offer my sincere apologies.) Where I have put in photo markers the points are almost exactly where I stood to take the photo when viewing in highest resolution satellite imagery (except the first Charterhouse Street photo, which was taken about 20 metres south-westish of the point).

If you look at the source for this page you'll see the map is included in an iframe (shudder). The iframe was chosen so that I could plug it into a blosxom entry like this without violating HTML rules too much. Additionally it keeps the example neat in one small file. To see the details of the map HTML have a look at /yvangmap/yvangmap.html. If you dig into that HTML you'll then want to follow a reference to /yvangmap/yvangmap.js, where you'll find some rather icky javascript. From there you can follow to /yvangmap/yvangmap.xml, this file defines the points and is parsed by the javascript.

I must say that doing this reminds me why I don't like playing with HTML and javascript! So I'm leaving it in the current state, since I already wasted enough time with it. I've played with mapping+photos before and might revive some of the stuff I did a while back for comparison, I go on about this some more in a moment. I do like being able to define my own icons, the API gives you quite a lot of control and I'm just scratching the surface (I knocked up the bodgey icons myself, but I stole the camera pixel art from: Bitcons).

Beware: asynchronous. That a is important. If you're a bit dumb, like I often am, you might forget that that little aye has important side effects. You see, this (simplified) code wont work as a foolish kind of human might expect:

function loadYvanMap(mapId, controlId) 
{
    // On load create the map.
    var markers = new Array();
    var map = new GMap2(document.getElementById(mapId));
    map.addControl(new GMapTypeControl());
    map.addControl(new GLargeMapControl());
    map.setCenter(new GLatLng(51.521, -0.1013), 16);
 
    // Populate the 'markers' array from XML data.
    GDownloadUrl("yvangmap.xml", function (data, responseCode) {
            var xml = GXml.parse(data);
            var markertrees = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markertrees.length; i++) 
            {
                markers.push(xmlMarkerToGMarker(markertrees[i])); 
            }
        });

    // XXX: Wrong! Wrong! Wrong!  Do not forget the terrible 'aigh'.

    // Put the markers on the map.
    for (var i = 0; i < markers.length; ++i)
    {
        map.addOverlay(markers[i]);
    }
}

It fails to work because it of that nasty little aye. You see, the GDownloadUrl method is asynchronous. Enough said. This is why, in the working code, my loadYvanMap function calls only the GDownloadURL function and the xmlResponseHandler function does the real work. Not "nice" but it does the job and there is only so much javascript I can write before I have to start sacrificing kittens

This reminds me: a while back I was playing with a manual overlay of Google satelite imagery with Ordnance Survey maps and a path. The aim being to have a detailed "here's where we walked" photo album feature. As usual with such dalliances I had to put it aside because work rules my time and I never got back to it (this was 5 months ago, it was still summer, sigh). Maybe with a renewed interest in maps I'll get back to that one. The main exercise was to learning how SVG worked, and I did get a good andle on it. I wrote an SVG file to create a graphical element for controlling map opacity/order and used a bunch of CSS2 and DOM/javascript stuff in a misguided attempt to see where such toys are at nowadays... still mostly rancid, especially when it comes to cross-browser compatibility. The evil Flash is safe, for now. It can be fun though. Making images by editing text with vim reeks slightly of perversity in a way that agrees with me (ahh... latex, and other such goodness). On top of perversity javascript (ECMA script, really) in SVG can lend some deviancy, letting you add code to animate image components and do many other wonky things. The controller SVG file I wrote has an API that can be accessed from the parent page via the DOM. It could be set up so that graphical element events on the SVG (clicks on particular control images, etc) could effect changes to other elements in the document. Nothing fancy, but kind of neat.

Back to methods of presenting multiple points on Google maps, there is another: Google Earth's Keyhole Markup Language. The KML lets you specify your points in an XML file and is the format for setting markers (and much other more complex data) in Google Earth - however Google Maps can now handle KML format files. It doesn't allow quite the same flexibility as I have with the map above, but comes with the huge bonus of not having to muck about with Javascript. It doesn't think much of my icons though! I can't be bothered sorting out the problem(s) there, something along the lines of only icons with power-of-2 dimensions being acceptable (and only square icons maybe?). I knocked up this KML file based on my custom XML file linked above: yvangmap.kml. To use it just present the URL as a query to Google Maps: http://maps.google.com/?q=http://malignity.net/yvangmap/yvangmap.kml&t=h. I assume it would work with Google Earth as well, but I don't have a Google Earth to test with.

As is the way of things I came across something that does exactly what I was doing with my weirdo SVG/JS+Maps+Photos mucking around but using Google stuff: Mallory Cave Hike. I haven't looked into how automatic it is, it seems to involve Picasa at some point though and that path looks pretty GPSy to me.

Now what I really need is a good camera, a GPS unit, and some kind of mobile device (My Symbian phone with a bluetooth GPS unit might be enough, plus some non-shite or handrolled-shite software. The phone's built-in GPS is too shoddy without network-assist.). If the process could be mostly automated, mapped photo albums would worth doing. Without added automation this is all an exercise in wasting hours and not worth the effort of repeating (though it is much easier to repeat than to do the first time, of course).