Google Maps Karte einbinden (Teil 2)
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…