Geocologning · Geocaching in Köln · » track

Im letzten Artikel habe ich beschrieben, wie man eine einfach Google Maps Karte in seine eigene Webseite integriert. Aufbauend auf dem Artikel werden wir nun eine erweiterte Karte generieren, diesmal wird eine Linie mit mehreren Punkte erzeugt.

In dem Artikel erwähnte ich ja bereits, dass man eine Polyline zwischen beliebig vielen Punkten einzeichnen kann. Folgende Methode nutzten wir, um eine Polylines zwischen zwei Punkten einzuzeichnen:

var polyline = new GPolyline([
    new GLatLng(50.864803, 7.003784),
    new GLatLng(50.936255, 6.959152)
], "#ff0000", 10);

Auf ähnliche Weise wollen wir nun eine Tour aus einer GPX-Datei in der Karte anzeigen. Zunächst sehen wir uns dazu einen Ausschnitt aus einer GPX-Datei ein. GPX ist ein XML-basiertes Format, und damit auch menschenlesbar:

  <trk>
    <name>ACTIVE LOG</name>
    <trkseg>
      <trkpt lat="50.8832728" lon="6.9834976">
        <ele>44.3580322</ele>
        <time>2008-03-18T13:13:50Z</time>
      </trkpt>
      <trkpt lat="50.8832509" lon="6.9833117">
        <ele>44.8386230</ele>
        <time>2008-03-18T13:13:59Z</time>
      </trkpt>
      <trkpt lat="50.8832505" lon="6.9832326">
        <ele>44.3580322</ele>
        <time>2008-03-18T13:14:03Z</time>
      </trkpt>
      <trkpt lat="50.8832217" lon="6.9831215">
        <ele>43.3966064</ele>
        <time>2008-03-18T13:14:08Z</time>
      </trkpt>
      [...]
    </trkseg>
  </trk>

Ich habe den Anfang der GPX-Datei weggelassen, wir steigen direkt in das XML-Tag <trk> ein. Dieses Element enthält einen vom GPS aufgezeichneten Track. Innerhalb des <trkseg> Knotens sieht man alle <trkpt> Knoten, dieses sind die einzelnen vom GPS aufgezeichneten Position, inklusive Uhrzeit (diese kann zum Beispiel genutzt werden, um Fotos mit den Koordinaten zu verknüpfen, beim sogenannten Geotagging). Hat man das GPS-Gerät also so konfiguriert, dass solche Tracks aufgezeichnet werden, könnte man sich die Datei in einem Texteditor öffnen, die Koordinaten rauskopieren und dann in Liste von GLatLng Objekte kopieren, etwa so:

var polyline = new GPolyline([
    new GLatLng(50.8832728, 6.9834976),
    new GLatLng(50.8832509, 6.9833117),
    new GLatLng(50.8832505, 6.9832326),
    new GLatLng(50.8832217, 6.9831215)
], "#ff0000", 10);

Das ist natürlich bei langen Tracks recht langwierig, außerdem wird das Skript dadurch sehr lang. Daher bietet Google die Möglichkeit, Polylines über eine andere Methode zu erzeugen. Die Punkte werden dazu nach einem bestimmten Algorithmus enkodiert. Der Algorithmus wird hier erklärt. Das muss man aber nicht unbedingt verstehen, denn hier gibt es ein Tool zum Erzeugen der enkodierten Version. Das Erzeugen der Polyline sieht dann so aus:

var encodedPolyline = new GPolyline.fromEncoded({
    color: "#ff0000",
    weight: 10,
    points: "mcquHy}ri@Bb@?NDT",
    levels: "BBBB",
    zoomFactor: 32,
    numLevels: 4
});

Der fett markierte Teil stellt nun die vier oben definierten Punkte dar. Die Beispieldatei zu diesem Teil gibts hier.

Mit diesem Rüstzeug kann man dann die Umwandlung der GPX-Datei angehen. Manuell ginge das jetzt schon, automatisieren sollte man das jetzt noch irgendwie. Dazu gibt es ziemlich viele Wege. Möglich wäre zum Beispiel eine XSL-Transformation, die die GPX-Datei in eine Reihe von Punkte umwandelt (also quasi alle unnötigen XML-Tags entfernen). Oder man liest die GPX-Datei direkt per Javascript ein und erzeugt damit on the fly die Polyline, ein Beispiel wie man das machen kann findet sich hier. Oder man schreibt sich ein Programm in einer beliebigen Programmiersprache, welches die Umwandlung vornimmt.

Das habe ich gemacht: Mit den Informationen, die ich bereits bei der Recherche für den Artikel über Geotagging gesammelt hatte, ging das Recht schnell. GPX-Datei mit XML-Beans einlesen, eine Klasse zur Encodierung der Polyline ergoogeln und einbinden, ein kleines Webmodul stricken, welches genau die Umwandlung durchführt und in XML aufbereitet, diese XML-Information über JQuery (mit AJAX) einlesen, fertig. Dazu später mehr…

Ich wollte meine Beiträge zu den Geocaching - Touren, die wir so machen, mit eine Grafik der gelaufenen Wege anhübschen. Google Maps bietet dazu gute Möglichkeiten, man braucht nicht viel, nur einen Google-Maps-API Key, und eine Seite, auf der die Tracks aufgebaut werden. Diese Seite integriert man dann einfach in den Beitrag per IFrame oder verlinkt sie, fertig.

Als Referenz für diese Artikelreihe sollen folgende Quellen dienen:

• Google Maps API Referenz
• Google Maps Developer Guide
• JQuery Referenz

Zunächst braucht man also eine einfache HTML-Seite, die die Karte ausliefert. Der grobe Rahmen sieht so aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:v="urn:schemas-microsoft-com:vml">
<head>
	<title>Google Maps</title>
	<script src="jquery.js"></script>
	<script src="jquery.xpath.js"></script>
	<script src=".../maps?file=api&v=2&key=xxx">
	</script>
	<script type="text/javascript">
		var map;
		function initialize() {
 		if (GBrowserIsCompatible()) {
 			//hier gehts weiter
 		}
 	}
	</script>
</head>
<body onload="initialize()" onunload="GUnload()">
	<div id="map" style="width:500px;height:500px;">
	</div>
</body>
</html>

Eingebunden werden die Hauptbibliothek von JQuery, das XPath Plugin (werden später benötigt) und die Google Maps API.

Dieser Artikel zeigt zunächst einige kurze Beispiele für Google Maps (siehe dazu auch die Developer Guide, dort sind Beispiele für die einzelnen Funktionen angegeben). Der Code kann einfach oben an die Stelle “hier gehts weiter” reinkopiert werden - die Datei kann man lokal einfach abspeichern und öffnen, dafür wird noch kein Google API Code benötigt:

Map anlegen, bei Köln zentrieren und Maßstab festlegen (Zoom gibt quasi den Maßstab an, hohe Zahlen ist weiter weg, kleine Zahlen nah dran)

map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(50.889391,6.977005));
map.setZoom(13);

Karte auf Satellitenansicht umstellen und einige Controller hinzufügen

map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setMapType(G_SATELLITE_MAP);

Marker hinzufügen

marker=new GMarker(new GLatLng(50.892802,6.96722))
map.addOverlay(marker);

Linie zwischen zwei Punkten (Luftlinie von mir zuhause bis in die Innenstadt)

var polyline = new GPolyline([
    new GLatLng(50.864803, 7.003784),
    new GLatLng(50.936255, 6.959152)
], "#ff0000", 10);
map.addOverlay(polyline);

Mit dem Werkzeug an der Hand ist es eigentlich schon fast fertig. Jetzt könnte man für jede Tour eine solche Seite anlegen, und alle Wegpunkte in eine GPolyline (dem Konstruktur wird ein Array von Punkten übergeben, es kann also eine beliebig lange Linie erzeugt werden) hinzufügen.

Einfacher wäre natürlich, wenn man die GPX-Datei, die von den meisten Navis erzeugt werden, irgendwie direkt einbinden könnte. Dafür braucht man aber etwas Anwendungslogik: Die GPX-Datei muss eingelesen werden und in ein Google-Maps lesbares Format umgewandelt werden (also zum Beispiel in eine Reihe von GLatLng Punkten, oder in eine enkodierte Version dieser Punktmenge). Wie man das machen kann (mithilfe einer kleinen Java-Applikation und JQuery) zeige ich in dem nächsten Artikel.

Hier die oben aufgebaute Beispielseite, eingebunden im IFrame:

Diese Seite könnt ihr auch hier aufrufen, und Euch dort den Source ansehen. Dort ist der API Key von geocologning.de eingebunden, dieser funktioniert natürlich nur unter meiner Domain.