Friday, 29 October 2010

Google Earthing

This morning I was still trying to do google earth / kml stuff. I spent quite a while trying to find out why google earth wasn't loading my external javascript files, only to find out that it was. Strangely, while fiddler intercepts google earth's requests for image and kml requests, it doesn't seem to intercept the requests for javascript files.

My guess would be that fiddler can't intercept requests made through google earth's internal webkit browser, which is what is used to display the info bubbles.

Then I spent a lot of time trying to get things working. One of the problems was that I needed to load the css <link>s from an html page that I was fetching using jquery's AJAX function. I set the datatype to 'html' in the AJAX call, but in the data object that jquery creates with the response, it only contained the contents of the <body> from the fetched html page.

So there was no way for me to get the <link>s from the <head> of the fetched page as jquery (or webkit) had stripped the <head> away.

So I tried using a datatype of xml for the AJAX request instead. I had to get the page I was requesting to send an xml content type header as well to get that to work. Now the data object that jquery created with the response did include the full document, so I could get the <link>s from the <head> as well as the contents of the <body>.

However, when I used jquery to get the <link>s from the xml and then appended them to the <head> of the page I wanted to manipulate, they had no effect. I spent quite a while trying to figure the problem out.

Eventually I found that if I created a jquery object with each <link> (to convert it to an html object), and then took it's outerHTML and converted that to an html object using jquery, and appended that to the page, it would work.
//Doesn't work
$(data).find('head > link').appendTo($('head'));
//Does work
$(data).find('head > link').each(function(){$('head').append(this.outerHTML);});

But then I found that the css wasn't being applied to a list (<ul>) that I was appending to the <body>. Again, I spent quite a while trying to find what the problem was, and it was similar to the problem I had with the <link>s not working.
//HTML appears to appended, but you can't access the appended html with jquery and the css rules aren't applied to it either
$('#contentContainer').append($(data).find('body > div'));
//Works properly
$('#contentContainer').append($(data).find('body > div')[0].outerHTML);

Then I also had lots of anti-fun trying to find out how to get google earth to zoom in to a placemark, and then open that placemark's info bubble. Unfortunately it seems that it is currently impossible. I think for the moment I am going to go with opening the info bubble and zooming to the placemark at the same time (this is possible).

This looks horrible as the info bubble keeps resizing and fills up most of the screen while google earth is zooming into the placemark. But if there's no better option, what can you do?

With most of my changes that I've made to try and make browsing my data in Google Earth a similar experience to browsing in google maps, I will have broken the Google Maps implementation. So when I have the Google Earth implementation working as best I can, I'll then have to go back and fix the Google Maps implementation.

About 4.40pm today the sun started to come out (it had been overcast all day, just like yesterday), so I quickly grabbed my photo stuff and went out to try and get some nice sunset photos. I figured that the large amount of cloud around should look very nice when lit up from underneath by the setting sun.

But about 5 minutes after I'd left, the sun went back behind the clouds. I hang around until about 5.30pm when I figured that the sun probably wasn't going to come out again, and so they'd be no sunset, and then went back home. I did take some blurry leaf photos while I was waiting for the sun though.

Also in the evening, I watched an episode of Masked Rider and Birdman Rangers Jetman with Belly.

No comments: