Now, the concept Geo-tagging data is not new. With GPS and cellular-network based geolocation available nearly everywhere, geographic information is showing up everywhere that it is applicable; cell phones, web sites, rss feeds, etc... It is the backbone of the "geoweb". There are numerous programs for geotagging your data, and you can even geotag your pictures from your iPhone, if you so choose.
The Trackstick comes with software for geo-tagging your photos based on timestamps. You can embed the geolocation information directly in the image metadata, or you you can export KMZ files that can be imported with Google Earth.
Now, this is where I got intrigued... If you can view the exported KMZ in Google Earth, what's stopping you from using that same exported data in the Google Earth browser plugin?
Well, nothing is stopping you. You can view this information directly in the browser using the Google Earth browser plugin. It works on both Mac and Windows, in most browsers (see the Google Earth API documentation for a list of supported browsers).
Below you can see a sample of the output. This is the record of a New Year's fishing trip with my brother and brother-in-law. I'm the one in the red jacket. None of the fish were big enough to keep, but it was a fun outing nonetheless.
Or, you can directly interact with the KMZ output and browser plugin here:
http://www.tricedesigns.com/portfolio/geoblog/2009.01.01/
Or, load the KMZ in Google Earth here (must have Google Earth installed):
http://www.tricedesigns.com/portfolio/geoblog/2009.01.01/fishing_geoblog.kmz
I like to refer to it as Geo-blogging, for lack of a better term. It shows where I went on the trip and documents when and where pictures were taken. If you click on an image, it will show additional details about when and where that specific picture was taken.
Loading the KMZ file is easy. I started with the code from my previous blog post on Exploring the Google Earth API, and just started ripping out everything that I didn't need. You can see the full HTML source code below. Basically, all that it does is instantiate the Google Earth browser plugin, and then use a networkLink object to load the KMZ file.
A KMZ file is basically a zip archive containing a KML markup file and any other assets that you want embedded in it. When the KMZ is exported from the Trackstick Manager software, the thumbnail images and full-size images are embedded within it. To reduce load time in the browser, I removed the full-size images from the archive and linked them to the images on the server. I also got rid of some of the extraneous KML markup that cluttered the display. I left it as simply the images with their clickable descriptions, and the red outline of the driven path.
Full HTML Source:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fishing Geo-blog</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ENTER_API_KEY_HERE"></script>
<script type="text/javascript">
google.load("earth", "1");
google.load("maps", "2.99");
var ge = null;
var geocoder;
var _position = [0,0,0,0];
function init() {
geocoder = new GClientGeocoder();
google.earth.createInstance("map3d", initCB, failureCB);
}
function initCB(object) {
ge = object;
ge.getWindow().setVisibility(true);
var networkLink = ge.createNetworkLink("");
networkLink.setFlyToView(true);
var link = ge.createLink("");
link.setHref( "http://www.tricedesigns.com/portfolio/geoblog/2009.01.01/fishing_geoblog.kmz?cachebuster=" + Math.random() );
networkLink.setLink(link);
ge.getFeatures().appendChild(networkLink);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
}
function failureCB(object) {
alert('load failed');
}
</script>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style></head>
<body onload='init()' id='body' scroll="no">
<div id='map3d_container' style="position:absolute;;border:0px;width:100%;height:100%;">
<div id='map3d' style='width:100%;height:100%;'></div>
</div>
</body>
</html>
___________________________________
Andrew Trice
Principal Architect
Cynergy Systems
http://www.cynergysystems.com]]>