Gleichzeitige Darstellung von Fotos mit Geotags und GPS-Tracks mit Google Earth bzw. Maps API

Zusammenfassung

Dieser Artikel beschreibt die Anforderungen, sowie die Entstehung und Umsetzung eines kleinen Google Earth/Maps-Mashups zur gemeinsamen Darstellung von GPS-Tracks und Fotos mit Geotags (Picasaweb Album) im Internetbrowser.

Einleitung

Seit einiger Zeit gehören ich zu den stolzen Besitzern des GPS-Trackers M-241 von Holux. Falls ich ihn nicht (wie bei meinem letzten Urlaub) zu Hause vergesse, nehme ich Ihn auf Trekking-/Fahrradtouren mit, um meine Fotos später einfacher mit Geotags zu versehen und gleichzeitig meinen zurückgelegten Weg zu tracken.

Screenshot Google Earth View

In der Regel läuft es so ab, dass ich nach einer solchen Tour die GPS-Daten auf mein Notebook lade, den Track aufbereite und in ein kml-File konvertiere. Gleichzeitig geotagge ich meine Fotos anhand des Tracks. Die schönsten, interessantesten und besten Fotos landen dann schließlich online bei Picasaweb Albums. In dem Glauben, dass sich einige meiner Freunde, Bekannten und Familie für meine Bilder und Touren interessieren, habe ich einen Weg gesucht diese Informationen gebündelt auf möglichst einfachen Weg zu verteilen. Dabei ist mir aufgefallen, dass es bisher noch keine Lösung gab, die meinen Anforderungen genügte. So sieht man zwar auf Picasaweb die Location der Fotos auf einer Google Map, aber weder der Track ist zu sehen, noch ist das ganze direkt in 3D in Google Earth zu sehen. Umgekehrt lässt sich zwar der Track als einfache URL verschicken, jedoch ist der Empfänger gezwungen Google Earth zu installieren und außerdem muss er in der Lage sein, das kml-File in Google Earth zu importieren und darzustellen. Eine kombinierte Darstellung ist nur duch ein händisch erstelltes kmz-File möglich, was einerseits ein recht umständliches Unterfangen ist und andererseits werden diese kmz sehr schnell sehr groß, wenn die Fotos direkt im File integriert ist.

Anforderung

Mein Ziel war es daher, möglichst einen einzigen Link zu verschicken, den der Empfänger öffnen und, ohne spezielle Softwareinstallationsorgien, anschauen kann. Dabei sollten sowohl der GPS-Track als auch alle Fotos eines meiner öffentlichen Picasaweb Alben als ein gemeinsames Mashup im Internetbrowser dargestellt werden. Im folgenden beschreibe ich daher einen selbstgestrickten “webservice” den Ihr euch auf eurem eigenen Server laden könnt. Diesem Webservice werden mit einer URL folgende Parameter übergeben:

Screenshot Google Maps View

• Picasa Album ID
• Picasa Benutzername
• kml-Dateiname
• Darstellungstyp (Openstreet Map, Google Maps Kartenansicht, Google Earth usw.)

Der Service wertet die Parameter aus, startet das entsprechende Google Maps/Earth-Plugin, lädt sowohl Picasa Foto-Layer als auch den GPS-Track und stellt ihn in der gewünschten Ansicht dar. Ein Beispiel seht ihr hier: http://public.binksma.de/earth.htm?kmlFile=Wispertal.kmz&user=pbinksma&albumID=5360264654852078769&type=osm (Tip: klickt mal auf den “Earth”-Button).

Umsetzung

Das Ganze besteht im Wesentlichen nur aus drei Komponenten:

• index.html
  Diese Datei dient dem Einstieg. sie generiert über ein HTML-Formular aus den eingegebenen Daten eine URL wie die oben gezeigt.
• earth.htm
  Dieses HTML-Seite wird vom Hyperlink refernziert. Sie ist sehr schlicht gehalten und übergibt eigentlich nur die Google Maps-API, startet das Maps/Earth-Plugin, bindet das erforderliche Javascript-File ein und stellt die Karte in voller Fenstergrüße dar.
• Earth.js
  In diesem Javascript-File steckt die “Technik”. Es werden die Overlays entsprechend den URL-Parameter geladen und als Overlay in die Kartendarstellung eingebunden, die verschiedenen Kartentypen werden eingebunden usw.

Der earth.htm können/müssen/sollten folgende Paramet übergeben werden:

• kmlFile: Der Name des GPS-Track im kmz oder kml-Format. Der Track selbst muss über eine URL im Internet aufrufbar sein. Bei meiner Installation handelt es sich um einen Unterodner “tracks” (Details hierzu findet ihr weiter unten).
• user:  Der Benutzername bei Picasaweb unter dem eure öffentlichen Alben abgerufen werden können.
• albumID: Die Nummer eures Webalbums. Diese findet ihr z.B. im Link des RSS-Feeds zu eurem Webalbum.
• type: Die Startansicht. Standard, falls nicht als Parameter angegeben, ist earth. Folgende Werte sind zulässig:
  • earth – Für die Darstellung mit Google Earth im Browser. Achtung: der Benutzer muss hierfür beim ersten mal das Google Earth-Plugin installieren
  • map – Die “normale” Google Maps Darstellung
  • hybrid – Startet die Google Maps Satellitenbild-Ansicht mit Labels, also Straßen- und Ortsnamen
  • terrain – Zeigt eine physische Karte
  • osm – Zeigt Karten des Openstreet Map – Projektes mit Hilfe des Mapnik-Renderers

Die Parameter für das KML-File, dem Typ und den Picasa-Daten sind optional. Weden Sie nicht angegeben, so wird entsprechende Overlay einfach nicht geladen.

Installation und Erläuterung

Bevor ihr die Files auf euren Webserver hochladet. Müsst ihr einige Anpassungen vornehmen. Diese Bereiche werden im Folgenden rot dargestellt.

earth.htm

Zunächst werden einige globale Variablen deklariert.

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

Mit Hilfe dieser beiden Variablen und der Funktion wird die URL, mit der earth.htm aufgerufen wurde, geparst und die einzelnen GET-Parameter (also type, ablumID usw.) in ein Array gespeichert um später auf diese Werte zugreifen zu können.

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];
}

Die init()-Funktion wird nach dem laden der earth.htm-Seite aufgerufen. Zu Anfang werden die Parameter der URL genommen und daraus die Links zu den kmz-Overlays in Picasaweb und dem GPS-Track gebastelt. Wichtig! Ersetzt die kmlUrl durch den Pfad zu dem Verzeichnis, wo ihr zukünftig eure GPS-Track ablegen werdet.

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

Die earth.html ist die HTML-Seite die Ihr in eurem Browser aufruft. Mit allen o.g. Parametern. Auch hier müsst ihr eine Anpassung vornehmen und meinen Google Maps API-Key durch euren eigenen zu ersetzten. Der unten gezeigte Key funktioniert nämlich nur, wenn die Seite unter “http://public.binksma.de” liegt. Andernfalls bekommt beim Aufruf von earth.htm nur eine Fehlermeldungen zu sehen. Um einen solchen Key zu bekommen, müsst ihr euch bei Google anmelden und dieses Formular ausfüllen.

<!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

Mit der index.htm könnt ihr auf sehr einfach einen Link mit allen Parametern erzeugen. Ihr müsst vorher ein Picasaweb Album angelegt haben und die kml/kmz-Datei in das tracks-Verzeichnis hochgeladen haben. Nun müsst ihr einfach die im Formular abgefragten Infos eintragen und auf den “Link erzeugen”-Button klicken. Auch in diesem Fall müsst ihr die rot hervorgehobenen Bereiche auf eure URLs anpassen.

<!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>

Einschränkungen und Known Bugs

Wie ihr sehen könnt, ist das Ganze recht rudimentär. Es wird nur maximal ein Picasaweb Album und maximal ein GPS-Track geladen. Es gibt so gut wie keine Fehler- und Konsitenzprüfung. Wenn also etwas mit den Parametern nicht stimmt, kann es zu unschönen Fehlermeldungen kommen. Es ist auch nicht geplant das Ganze für Flickr und andere Anbieter aufzubohren. Noch ist es geplant z.B. GPX-Files einlesen zu können.

Wenn ihr jedoch das Bedürfnis habt Verbesserungen vorzunehmen, so seit ihr natürlich herzlich eingeladen. Ich poste gerne Links zu euren Anleitungen oder baue diese Änderungen ggf. auch direkt in meinen Code.

Download

Ich habe ein Zip-File zusammengestellt und zum testen einen meiner GPS-Tracks hineingepackt:

Earth.zip (25.07.2009)

Bevor ihr die Files auf euren Server ladet müsst ihr die oben beschriebenen Anpassungen vornehmen, sonst wird es nicht funktionieren.

Viel Spaß beim Probieren
Patrick

Screenshot Google Earth View