Abstract

This article describes the requirements, as well as the development of a small Mashup which makes use of the google maps and google earth API/plugin in order to display GPS tracks and photos with geotags (Picasaweb album)  in your Internet browser.

Introduction

Screenshot Google Maps View

Screenshot Google Maps View

For quite a while I am proud owners of the GPS-Tracker Holux M-241. When I do not forget it at home (like in my last vacation *gmph*), I usually take it with me on trekking and bicycle tours to geotag my photos and to record my tours. On my return, I download the recorded GPS data to my PC and convert it to a kml-file. At the same time I use geosetter to add geotags to my photos. After that the most beautiful images will be uploaded to Picasaweb Albums. In the naive belief, that some of my friends and family are interested in my photos and the tours, I was looking for an easy-to-use way of distributing the data to them. However I could not find anything like that on the web. Either existing solutions were to complicated, my friend had to install google earth and had to load hugh track/photo-kmz-files into their google earth-client, or it was not possible to get GPS-Track and photos in together in one google maps-view. So my idea was to use the new google earth browser plugin, to display my geotagged photos with GPS-Track. The advantages are:

  • no need to install the google earth plugin (just the google earth plugin for your browser)
  • the receiver do not need to know how to use google earth (i.e. opening kmz-files etc.)
  • the receiver does not have to download huge kmz-photo-tracks
  • you can update your photos and the track even after you have send it to your friend
  • it is a very fast way to publish and distribute the information

Hereafter I will describe a simple “webservice” which you can install on your own webhost (no php, db or anything else needed). Following parameters are passed with the URL to this web service:

Screenshot Google Earth View

Screenshot Google Earth View

  • Picasa album ID
  • Picasa username
  • kml filename
  • Maptype (Openstreet Map, Google Maps view, Google Earth etc.)

The service processes the parameters, launches the suitable Google Maps/Earth plug-in, fetches the Picasa photo-Layer as well as the GPS track and displays them in the specified maptype. You find an example here: http://public.binksma.de/earth.htm?kmlFile=Wispertal.kmz&user=pbinksma&albumID=5360264654852078769&type=osm (tip: click on the “Earth” button).

Implementation

There are three main components:

  • index.htmlThis file works as a link generator. It is a HTML-form where you have to enter the kml-filename and a kmz-link to your picasaalbum.
  • earth.htmThis file acutally loads the Google Maps-API, initiate the Maps/Earth plug-in, loads the necessary Javascript file and displays the map.
  • Earth.jsThis javascript processes the parameters passed with the URL, loads the kml/kmz-files and will show them as overlays in the current map view.

Following URL-parameters are passed to earth.html:

  • kmlFile: The name of the GPS track in kmz or kml format. The track itself must be callable via URL, in other words the file has to be uploaded somewhere. On my installation I place all kmz-files into a subfolder named “tracks” (see below).
  • user: The username on Picasa Webalbums where your public albums are available
  • albumID: The number of your web album. You find it in the link of the RSS feed to your web album.
  • type: The default mapview. If the type is not set, earth.js will use the google earth-view as default. Following type-values are allowed:
    • earth – Google Earth in the browser. On the first use, the enduser has to install the earth-plugin.
    • map – The “normal” Google Maps representation
    • hybrid – Launching the Google Maps satellite picture view with labels, so street name and town name will be visible.
    • terrain – Shows the google maps “terrain” view
    • osm – Uses Openstreet Map (Mapnik-renderer)

The parameters listed above are optional. When they are not given, only the plain map will be displayed.

Installation and explanation

Before you upload the files on your web server you have to do some little modifications. Parts which have to be changed are red.

earth.js

First some global variables are declared and parameters will be parsed from the URL.

var ge = null;
var map;
var kmlUrl;
var PicasaKml;

HTTP_GET_VARS=new Array();
strGET=document.location.search.substr(1,document.location.search.length);

if(strGET!=''){
 gArr=strGET.split('&');
 for(i=0;i<gArr.length;++i){
 v='';vArr=gArr[i].split('=');
 if(vArr.length>1){v=vArr[1];}
 HTTP_GET_VARS[unescape(vArr[0])]=unescape(v);
 }
}

function GET(v)
{
 if(!HTTP_GET_VARS[v]){return 'undefined';}
 return HTTP_GET_VARS[v];
}

The init()-function will be called, directly after earth.html has been loaded. First the parameters of the URL are taken and links to the Picasawebalbum and the kmz-files will be generated. Important! Replace kmlUrl with the path to the directory where you will put your GPS tracks in future.

function init() {
//parse URL and set variables
if (GET('kmlFile')!=='undefined') {kmlUrl = 'http://public.binksma.de/tracks/'+GET('kmlFile');}
if (GET('albumID')!=='undefined' && GET('user')!=='undefined')
{
PicasaKml = 'http://picasaweb.google.de/data/feed/base/user/'+GET('user')+'/albumid/'+GET('albumID')+'?alt=kml&kind=photo&hl=de';
}
map = new GMap2(document.getElementById('map'));
//     map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.setCenter(new GLatLng(0, 0), 1);

//add picas-overlay and trackoverlay to map views
if(kmlUrl) {
kmlXml = new GGeoXml(kmlUrl);
map.addOverlay(kmlXml);
kmlXml.gotoDefaultViewport(map);
}
if(PicasaKml) {
PicasaXml = new GGeoXml(PicasaKml);
if (!kmlXml) {
PicasaXml.gotoDefaultViewport(map);
}
map.addOverlay(PicasaXml);
}

// add the Earth map type
map.addMapType(G_SATELLITE_3D_MAP);

//add pyhsical map
map.addMapType(G_PHYSICAL_MAP);

//remove sat-map
map.removeMapType(G_SATELLITE_MAP);

//integrates OSM
var copyright = new GCopyright(1,
new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)), 0,
'(<a rel="license" href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>)');
var copyrightCollection =
new GCopyrightCollection('Kartendaten &copy; 2009 <a href="http://www.openstreetmap.org/">OpenStreetMap</a> Contributors');
copyrightCollection.addCopyright(copyright);

var tilelayers_mapnik = new Array();
tilelayers_mapnik[0] = new GTileLayer(copyrightCollection, 0, 18);
tilelayers_mapnik[0].getTileUrl = GetTileUrl_Mapnik;
tilelayers_mapnik[0].isPng = function () { return true; };
tilelayers_mapnik[0].getOpacity = function () { return 1.0; };
var mapnik_map = new GMapType(tilelayers_mapnik,
new GMercatorProjection(19), "Mapnik",
{ urlArg: 'mapnik', linkColor: '#000000' });
map.addMapType(mapnik_map);

//adds controls for maptypes
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());

switch (GET('type')){
case "earth": map.setMapType(G_SATELLITE_3D_MAP); break;
case "map": map.setMapType(G_NORMAL_MAP); break;
case "hybrid": map.setMapType(G_HYBRID_MAP); break;
case "terrain": map.setMapType(G_PHYSICAL_MAP); break;
case "osm": map.setMapType(mapnik_map); break;
default: map.setMapType(G_SATELLITE_3D_MAP); break;
}
// obtain a pointer to the Google Earth instance attached to your map.
map.getEarthInstance(initCallback);
}

earth.htm

earth.html is the page which is opened in your web brower. Again you have to modify a part of the file. This time you have to replaye my Google Maps API-Key with yours. The Key shown below works only if the page is called fom a URL starting with http://public.binksma.de. Otherwise you will get an error message from google. To get your own API-Key, you have to register at Google for free.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAZcVaFt717tlZYq3FYuA6uhRCOtkvU6y8k7og6HdvFjbumG9AkxT2JGgNue6CvL14OceTfUIUm33M1g"> </script>
  <script src="Earth.js" type="text/javascript"></script>
  <script type="text/javascript">google.load("maps", "2.x");</script>
  </head>
  <body onload="init()" onunload="GUnload()">
    <div id="map" class="map" style="width:100%;height:100%; border: 1px solid silver;"></div>
  </body>
</html>

index.htm

With index.htm you can generate a link to earth.html in a quite simple way. After you have uploaded your geotagged pictures to Picasaweb albums and after you have uploaded the kml/kmz track, just enter the infos into the form and click on the “link generate” button.

Again, you have to modify the index.htm.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script type="text/javascript">
  function generateLink ()
  {
    if (document.getElementById("picasaKml").value !== "") {
      var pKml = document.getElementById("picasaKml").value;
      var userExp = /\/user\/(.*?)\//;
      var Ergebnis = userExp.exec(pKml);
      var user = RegExp.$1
      var albumIDExp = /\/albumid\/(.*?)\?/;
      var Ergebnis = albumIDExp.exec(pKml);
      var albumID = RegExp.$1
      //get the selected radio button value
      var selType

      for (var i=0; i<document.formular.type.length; i++)  {
          if (document.formular.type[i].checked)  {
            selType = document.formular.type[i].value
          }
      }
      location.href = "http://public.binksma.de/earth.htm?kmlFile="+document.getElementById("kmlFile").value+"&user="+user+"&albumID="+albumID+"&type="+selType;
    }
  }
  </script>

</head>
<body>
<h1>Google Earth URL-Generator</h1>
<img src="explanation.jpg">
<span style="float:left;"><ol>
<li>Das kml/kmz-File mit den Track-Informationen auf binksma.de in das Verzeichnis /html/public/tracks hochladen.</li>
<li>Gegebenenfalls ein öffentliches Picasawebalbum erstellen, Fotos geotaggen und in das Album hochladen.</li>
<li>KML-Link des Albums kopieren</li>
<li>Formular ausfüllen und auf "Link erzeugen" klicken</li>
</ol>
<form name="formular" id="formular">
<p>Picasa Album KML:<br><input id="picasaKml" type="text" size="30" maxlength="100"></p>
<p>Name des KML/KMZ-File:<br><input id="kmlFile" type="text" size="30" maxlength="100"></p>
<p>Wähle die Standard-Kartenansicht:<br>
<input type="radio" name="type" id="type" value="earth">Google Earth<br>
<input type="radio" name="type" id="type" value="map">Google Maps<br>
<input type="radio" name="type" id="type" value="hybrid">Satellitenbild<br>
<input type="radio" name="type" id="type" value="terrain">Physische Landkarte<br>
<input type="radio" name="type" id="type" value="osm">OpenStreetMap<br>
</p>
<p><input type="button" onClick="generateLink ()" value=" Link erzeugen "></p>
</form></span>
</body>
</html>

Restrictions and Known of bug

As you can see, the whole thing is quite rudimentary. Only one Picasaweb album and one GPS track can be displayed at the same time. There is virtually no error-handling. If something goes wrong with the URL-parametres, it will probably result in some ugly error messages. Neither it is planned to support other picture-hoster like flickr or zoomer nor will be support for other GPS-Dataformats like GPX.

Your are warmly invited to implement your own improvements and to report about your work on this blog.

Download

I have put together a Zip file with all filed described above and with one of my GPS-Tracks for your own tests

Earth.zip (25.07.2009)

Before you upload the files to your server you have to make the modifications decribed above, otherwise the whole thing will not work.

Have fun, playing with google earth 🙂

Patrick

5 Responses to “View your geotagged photos and GPS tracks with Google Earth or Maps API”

  1. Um, consider adding images or more spacing to your weblog entries to break up their chunky look.

  2. Michael Gruber
    July 24th, 2010 at 04:33

    Tolle, praktische Sache. – Genau sowas habe ich schon lange gesucht. (Und ich finde nicht, dass man “images or more spacing” zufügen sollte, wie mein Vorredner schreibt!)

    Trotzdem der Hinweis auf zwei kleine ‘Schreibfehler’ auf dieser Seite hier:

    1) Der hier eingangs zitierte (und schön erklärte) “earth.js”-File ist verwirrenderweise als “earth.htm” überschrieben, genauso wie der dann folgende ‘echte’ “earth.htm”-File.

    2) In dem schönen Beispiellink oben ist ein Leerzeichen zwischen “…earth.htm?” und “kmlFile=Wispertal…”, wodurch ein Klick auf den BeispielLink nur eine leere Karte statt das Beispiel anzeigt.

    Aber das sind ja nur Kleinigkeiten – Ansonsten ist dieser “Webservice” schön einfach und sehr nützlich.

    Vielen Dank für’s Veröffentlichen!

  3. Michael Gruber
    July 24th, 2010 at 23:59

    Noch ‘ne Frage:

    Kann man den Code so umbauen, dass statt der MiniBilder auf der Map nur einzelne (klickbare) Marker gezeigt werden?

    (Bei einer Map mit sehr vielen Bildern ist das möglicherweise übersichtlicher.)

  4. Hallo Michael,

    danke für den Hinweis und für die Blumen;) Ich habe beide Fehler korrigiert.

    Viele Grüße
    Patrick

  5. Spontan hätte ich gesagt, dass die Bilder Bestandteil der angezeigten KML-Datei ist. Man müsste also über die Google Maps API das geladenen nachträglich modifizieren bzw. Teile der KML-Datei ausblenden. Was sagt denn die Referenz-Dokumentation von google hierzu?

Leave a Reply