Aktuell: Version 4.9.1 vom 11. 1. 2012
Infos über Updates auf Twitter

GPX Viewer

Auf dieser Seite möchte ich ein Script vorstellen, mit dem man einfach Tracks, Routen und Wegpunkte, die z.B. mit einem GPS-Empfänger aufgenommen wurden, auf seiner eigenen WWW-Seite darstellen kann. Die Daten müssen dazu als GPX-Datei vorliegen. Zur Anzeige wird die Kartendarstellung von Google Maps verwendet. Zusätzlich kann ein Höhenprofil, ein Steigungsprofil und ein Geschwindigkeitsprofil der Tracks erstellt werden. Zur Nutzung des Scriptes sind keine Javascriptkenntnisse nötig.

Beschreibung

Das Script liest eine oder mehrer GPX-Dateien aus Ihrem Webspace, wertet sie aus und zeichnet Tracks, Routen und Wegpunkte in eine Google Maps-Karte ein. Befinden sich in der GPX-Datei mehrere Tracks oder Routen, so werden sie als getrennte Linien in verschiedenen Farben gezeigt. Die Namen der Tracks bzw. Routen erscheinen dann in einer Legende. Der Kartenausschnitt wird so gewählt, dass alle Tracks, Routen und Wegpunkte sichtbar sind. Der Kartenausschnitt kann nachträglich verändert werden.

Der Inhalt der GPX-Datei wird folgendermaßen behandelt:

Wegpunkte
- Normaler Wegpunkt
  - Wegpunkte werden als Nadel angezeigt.
  - Befindet sich der Mauszeiger über dem Wegpunkt, wird der Name des Wegpunktes angezeigt.
  - Bei Klick auf den Wegpunkt wird
    - der Inhalt des LINK-Feldes ausgewertet und eine Popup-Fenster mit der entsprechenden Seite geöffnet,
    - der Inhalt des NAME-Feldes und des CMT-Feldes (Kommentar) angezeigt, wenn das LINK-Feld leer ist. Auf Wunsch kann auch der Inhalt des DESC-Feldes (Description) angezeigt werden.
  - Wegpunktsymbole können frei definiert werden. Dazu muss das Wegpunktsymbol den gleichen Namen haben, wie in der Script-Definition. Hierzu sind allerdings Kenntnisse in Javascript notwendig.
- Bildwegpunkt
  - Wird der Name eines Wegpunktes als Name eines Bildes erkannt, also wenn er auf ".jpg", ".jpeg", ".gif" oder ".png" endet, wird ein Bildwegpunkt angezeigt.
  - Befindet sich der Mauszeiger über dem Wegpunkt, wird ein kleines Vorschaubild angezeigt.
  - Bei Klick auf den Wegpunkt wird das Bild in Originalgröße angezeigt. Unter dem Bild wird der Inhalt des CMT-Feldes und auf Wunsch der Inhalt des DESC-Feldes angezeigt.
Tracks
- Tracks auf der Karte
  - Tracks werden als farbige Linien angezeigt. Tracksegmente werden nicht unterschieden.
  - Sind mehrere Tracks vorhanden, werden sie in unterschiedlichen Farben (bis zu 10) angezeigt.
  - Es können auch die Farbangaben aus der GPX-Datei verwendet werden. Dieses wird über die Steuervariable "Displaycolor" eingestellt.
  - Befindet sich die Maus über dem Track, ändert sich seine Farbe und es werden Trackinformationen angezeigt.
  - Bei Klick auf den Track
    - wird der Inhalt des LINK-Feldes ausgewertet und ein Popup-Fenster mit der entsprechenden Seite geöffnet,
    - oder es werden Trackinformationen angezeigt, wenn das LINK-Feld leer ist.
- Tracks als Profil
  - Je nach Inhalt der GPX-Datei können Höhe, Steigung und Geschwindigkeit gegen die zurückgelegte Strecke oder gegen die verstrichene Zeit grafisch dargestellt werden. Auch ein Weg-Zeit-Diagramm ist möglich.
  - Die Steigung wird durch Differenzieren der Höhenwerte nach dem Weg gewonnen. Die Stärke der Glättung kann eingestellt werden.
  - Bei Vorliegen des SPEED-Feldes wird dieses für den Geschwindigkeitsplot genommen, sonst werden die Werte durch Differenzieren des Weges nach der Zeit ermittelt. Die Stärke der Glättung kann eingestellt werden.
  - Die Farben der Linien in den Plots sind identisch mit denen der Tracks in der Karte.
  - Befinden sich mehrere Tracks in der Datei, kann mit der Steuervariablen "Tracks_verbinden" eingestellt werden, ob die Tracks in den Profilen mit fortlaufender Weg- bzw. Zeitachse dargestellt werden, oder ob für jeden Track die Zeit und der Weg bei Null beginnen.
  - Wenn nur ein Track gefunden wurde oder wenn die Steuervariable "Tracks_verbinden" den Wert "true" hat, kann man mit der Maus in den Profilgrafiken den Track abfahren und man sieht auf der Karte den zu den Profilwerten gehörenden Ort. Zusätzlich werden einige Infos eingeblendet.
Routen
- Routen werden als farbige Linien angezeigt. Die Routen werden als Verbindung der Zwischenziele dargestellt. Liegen die Routen im Garminformat vor, werden sie straßengenau gezeichnet.
- Sind mehrere Routen vorhanden, werden sie in unterschiedlichen Farben (bis zu 10) angezeigt.
- Es können auch die Farbangaben aus der GPX-Datei verwendet werden. Dieses wird über die Steuervariable "Displaycolor" eingestellt.
- Befindet sich die Maus über der Route, ändert sich ihre Farbe und es werden Routeninformationen angezeigt.
- Bei Klick auf die Route
  - wird der Inhalt des LINK-Feldes ausgewertet und ein Popup-Fenster mit der entsprechenden Seite geöffnet,
  - oder es werden Routeninfortmationen angezeigt, wenn das LINK-Feld leer ist.

Einbinden des Scriptes

Damit Routen und Tracks in die Karte eingezeichnet werden können, muss die Seite den Dokumententyp "XHTML 1.0 strict" haben. Außerdem muss der VML-Namespace im Dokument aufgenommen sein. Hierzu muss Ihre Seite folgendermaßen beginnen:

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

Um den GPX Viewer zu nutzen, wird ein Google Maps API Key benötigt. Dieser Key muss dem Script mitgeteilt werden. Danach muss auch noch das Script geladen werden. Bitte fügen sie folgenden Script-Block in den Head der Seite ein:

<script type="text/javascript">
  //<![CDATA[
    var key="Den_Google_Maps_API_Key_bitte_hier_einfügen";
  //]]>
</script>
<script type="text/javascript" src="GM_Utils/GPX2GM.js"></script>

Die Zeile mit "key=..." muss angepasst werden. Tragen Sie hier Ihren eigenen Key ein. Wenn das Script in einem anderen Ordner liegt, muss auch der Pfad zum Script noch angepasst werden.

Einfache Variante

Um nur Tracks, Routen oder Wegpunkte aus einer GPX-Datei auf ihrer Seite anzuzeigen, fügen sie folgenden HTML-Code auf Ihrer Seite da ein, wo die Karte erscheinen soll:

<div class="gpxview:Name_der_GPX-Datei.gpx" style="width:500px;height:300px">
 <noscript><p>Zum Anzeigen der Karte wird Javascript benötigt.</p></noscript>
</div>

"Name_der_GPX-Datei.gpx" ersetzen sie einfach durch den Namen Ihrer GPX-Datei. Möchten sie Inhalte aus mehreren Datein darstellen, müssen die Dateinamen durch ein Komma getrennt weren:

<div class="gpxview:GPX-Datei_1.gpx,GPX-Datei_2.gpx" style="width:500px;height:300px">
 <noscript><p>Zum Anzeigen der Karte wird Javascript benötigt.</p></noscript>
</div>

Die Höhen- und Breitenangaben können Sie natürlich an Ihr Layout anpassen.

Sie können hinter den Dateinamen noch einen weiteren Steuerparameter angeben. Dabei bedeutet:

Kartendarstellung:	class="gpxview:Name_der_GPX-Datei.gpx:Karte"
Satellitenfoto:	class="gpxview:Name_der_GPX-Datei.gpx:Satellit" class="gpxview:Name_der_GPX-Datei.gpx"
Beides:	class="gpxview:Name_der_GPX-Datei.gpx:Hybrid"
Oberflächenansicht:	class="gpxview:Name_der_GPX-Datei.gpx:Oberflaeche"
Open Street Map (Mapnik)	class="gpxview:Name_der_GPX-Datei.gpx:OSM"
Open Street Map (T&H)	class="gpxview:Name_der_GPX-Datei.gpx:OSM_TaH"
Open Street Map (Cycle Map)	class="gpxview:Name_der_GPX-Datei.gpx:OSM_Cycle"

Siehe hierzu die Beispielseite 1.

Anmerkung

Ich empfehle, HTML-Seite, GPX-Datei und eventuelle Fotos im selben Ordner abzulegen.

Voraussetzungen

Ein Google Maps API Key.
Bitte nicht meinen Key benutzen, dieser Key ist an meine Domain gebunden.
Eine GPX-Datei mit den Tracks, den Routen und bzw. oder den Wegpunkten.
Die Scripte, die Bilder für die Wegpunkte und den Marker sowie die Beispiele als ZIP-Archiv GPXViewer491.zip. Die Bilder für die Symbole und die Scripte müssen im gleichen Ordner (GM_Utils) abgelegt werden.

Zusätzliche Einflussnamen auf die Karten

Durch das Platzieren von Buttons mit entsprechendem Klassennamen kann man die Karten neu skalieren, so dass der ganze Track wieder sichtbar ist, und man kann neue Routen / Tracks / Wegpunkte mit entsprechendem Kartenausschnitt in das Kartenfenster laden:

<button type="button" class="gpxview:map:skaliere">Alles anzeigen</button>
<button type="button" class="gpxview:map:lade:Beispiel1.gpx:Hybrid">1. Karte laden</button>
<div id="map" class="gpxview:Beispiel1.gpx:Satellit" style="width:500px;height:300px">
 <noscript><p>Zum Anzeigen der Karte wird Javascript benötigt.</p></noscript>
</div>

Die Befehle sind folgendermaßen aufgebaut:
gpxview:id_der_Karte:Befehl:optionale_Parameter
Dem div, in dem die Karte angezeigt werden soll, muss eine id gegeben werden.
Siehe hierzu die Beispielseite 2.

Ebenso können neue Routen / Tracks / Wegpunkte mit entsprechendem Kartenausschnitt in das Kartenfenster über ein Auswahlmenü geladen werden (Beispielseite 2b):

<select class="gpxview">
 <option value="map:Beispiel1.gpx:Hybrid" selected="selected">Beispiel1.gpx</option>
 <option value="map:Beispiel2.gpx:Karte">Beispiel2.gpx</option>
</select>
<div id="map" class="gpxview:Beispiel1.gpx:Satellit" style="width:500px;height:300px">
 <noscript><p>Zum Anzeigen der Karte wird Javascript benötigt.</p></noscript>
</div>

Außerdem können auch mehrere Karten auf einer Seite angezeigt werden. Siehe hierzu die Beispielseite 3 und die Beispielseite 3b.

Profile

Zusätzlich zur Darstellung auf der Karte oder dem Satellitenbild können je nach Inhalt der GPX-Datei auch Höhen-, Steigungs- und Geschwindigkeitsprofile sowie ein Weg-Zeit-Diagramm angezeigt werden. Dabei ist die Darstellung gegen den zurückgelegten Weg oder gegen die verstrichene Zeit möglich. Da die Zuordnung zwischen Karte und Profilgrafik über die ID geht, muss das Karten-DIV eine ID haben, z.B. "map". Die DIVs für die Profile benötigen eine ID, die sich wie folgt zusamensetzt:

ID des DIVs	Funktion
map	Karte / Satellitenbild
map_hp	Höhenprofil gegen Weg
map_hpt	Höhenprofil gegen Zeit
map_sp	Steigungsprofil gegen Weg
map_spt	Steigungsprofil gegen Zeit
map_vp	Geschwindigkeitsprofil gegen Weg
map_vpt	Geschwindigkeitsprofil gegen Zeit
map_wp	Weg gegen Zeit

Um z.B. alle Profile anzeigen zu können, muss der HTML-Code folgendermaßen aussehen:

<div id="map" class="gpxview:Name_der_GPX-Datei.gpx" style="width:500px;height:300px">
 <noscript><p>Zum Anzeigen der Karte wird Javascript benötigt.</p></noscript>
</div>
<!-- ... -->
<div id="map_hp" style="width:500px;height:300px">
 <noscript><p>Zum Anzeigen des Höhenprofils gegen den Weg wird Javascript benötigt.</p></noscript>
</div>
<!-- ... -->
<div id="map_hpt" style="width:500px;height:300px">
 <noscript><p>Zum Anzeigen des Höhenprofils gegen die Zeit wird Javascript benötigt.</p></noscript>
</div>
<!-- ... -->
<div id="map_sp" style="width:500px;height:300px">
 <noscript><p>Zum Anzeigen des Steigungsprofils gegen den Weg wird Javascript benötigt.</p></noscript>
</div>
<!-- ... -->
<div id="map_spt" style="width:500px;height:300px">
 <noscript><p>Zum Anzeigen des Steigungsprofils gegen die Zeit wird Javascript benötigt.</p></noscript>
</div>
<!-- ... -->
<div id="map_vp" style="width:500px;height:300px">
 <noscript><p>Zum Anzeigen des Geschwindigkeitsprofils gegen den Weg wird Javascript benötigt.</p></noscript>
</div>
<!-- ... -->
<div id="map_vpt" style="width:500px;height:300px">
 <noscript><p>Zum Anzeigen des Geschwindigkeitsprofils gegen die Zeit wird Javascript benötigt.</p></noscript>
</div>
<!-- ... -->
<div id="map_wp" style="width:500px;height:300px">
 <noscript><p>Zum Anzeigen des Weg-Zeit-Diagramms wird Javascript benötigt.</p></noscript>
</div>

Die Karte und die Profile können sich an beliebigen Stellen der Seite befinden. Siehe hierzu auch die Beispielseite 4 mit Profilen gegen den Weg und die Beispielseite 5 mit Profilen gegen die Zeit.

Weitere Steuermöglichkeiten

Am Anfang des Scriptes befinden sich einige Steuervariablen, mit denen das Aussehen der Karte und das Verhalten des Scripts weiter beeinflusst werden kann, indem man ihre Werte auf true oder false setzt. Man kann u. A. zwischen großem und kleinem Zoomregler wählen, die Übersichtskarte einschalten, die Legende über der Karte abschalten, einstellen, welche Elemente beim Start gezeigt werden und mehrere Tracks in einer Datei im Höhenprofile aneinander ketten. Darüber hinaus kann auch das Aussehen von Tracks und Routen verändert werden.

Die Werte der Steuervariablen können im Script angepasst werden, so dass die Änderung auf allen Seiten wirkt. Ein Setzen der Variablen in der Datei "GPX2GM_Defs.js" ist ebenfalls möglich. Man kann die Variablen aber auch nur im Scriptbereich der Seiten einfügen, deren Darstellung verändert werden soll.

Über die Variable "Scaling" kann die Skalierung der Profildiagramme beeinflusst werden. Normalerweise ermittelt das Script automatisch die Min- und Maxwerte. Werden die Werte für min und max beide gesetzt, nimmt das Script diese für die Skalierung. Dazu können Sie die normalerweise auskommentierte Definition am Anfang des Scripts aktivieren und anpassen oder die Zeilen unter die Definition var key=... setzen.

Liste der Steuervariablen

Variable	Bedeutung	Wert
Largemapcontrol	Großer/kleiner Zoomregler	true/false
Overviewmapcontrol	Übersichtskarte an/aus	true/false
Legende	Legende an/aus	true/false
Legende_fnm	Dateinamen in Legende zeigen/nicht zeigen	true/false
Legende_rr	Höhenmeter in Legende zeigen/nicht zeigen	true/false
Legende_trk	Trackanzeige beim Öffnen der Seite an/aus	true/false
Legende_rte	Routenanzeige beim Öffnen der Seite an/aus	true/false
Legende_wpt	Wegpunktanzeige beim Öffnen der Seite an/aus	true/false
Tracks_verbinden	Tracks in Profilgrafik verbinden	true/false
Readspeed	Speed-Tag auswerten, wenn vorhanden	true/false
Trackover	Track- oder Routeninfo anzeigen, wenn Maus über Linie	true/false
Shwpcmt	Inhalt des cmt-Feldes in Wegpunktinfo anzeigen	true/false
Shwpdesc	Inhalt des desc-Feldes in Wegpunktinfo anzeigen	true/false
Shwptime	Zeit in Wegpunktinfo anzeigen	true/false
Shtrcmt	Inhalt des cmt-Feldes in Trackinfo anzeigen	true/false
Shtrdesc	Inhalt des desc-Feldes in Trackinfo anzeigen	true/false
Shtrx	Strecke in Trackinfo anzeigen	true/false
Shtrt	Zeit in Trackinfo anzeigen	true/false
Shtrv	Geschwindigkeit in Trackinfo anzeigen	true/false
Shtrh	Hähe in Trackinfo anzeigen	true/false
Shtrs	Steigung in Trackinfo anzeigen	true/false
Shtrvmitt	Durchschnittsgeschwindigkeit in Trackinfo anzeigen	true/false
Shrtcmt	Inhalt des cmt-Feldes in Routeninfo anzeigen	true/false
Shrtdesc	Inhalt des desc-Feldes in Routeninfo anzeigen	true/false
Displaycolor	Linienfarbe aus GPX-Datei übernehmen (z.Zt. nur Garmin)	true/false
Laengen3d	Bei Entfernungsberechnung auch Höhenunterschiede berücksichtigen	true/false
Hkorr	Korrktur fehlender Höhenwerte imTrack durch Interpolation	true/false
Hglattlaen	Länge des Glättungsintervalls für das Höhenprofil in Meter	500
Vglattlaen	Länge des Glättungsintervalls für das Geschwindigkeitsprofil in Meter	100
Vglatt	Geschwindigkeitsprofil glätten	true/false
Tdiff	Zeitoffset für Zeitanzeige im Infofenster in Stunden	0
Scaling	Vorgabe der Min- und Maxwerte in den Profildiagrammen. Siehe Text.

Versionen

Vor der Veröffentlichung des Scriptes unterziehe ich es umfangreichen Tests mit diversen GPX-Dateien in den gängigen Browsern. Sollten Sie trotzdem einen Fehler finden, würde ich mich über eine Mitteilung, evtl. mit der den Fehler verursachenden GPX-Datei, freuen. An dieser Stelle möchte ich mich für die Meldungen von Usern und für deren Dateien, die mir bei meinen Tests eine große Hilfe sind, ganz herzlich bedanken.

Infos über Updates auf Twitter @JBerkemeier.

Version 4.9.1
- Korrektur eines Fehlers bei Wegpunkten ohne Zeitangabe.
Version 4.9
- Darstellung der Daten aus mehreren Dateien.
- Quelle für OpenCycleMap aktualisiert.
- Korrektur eines Fehlers beim Überfahren der Profile mir der Maus.
- Korrektur eines Fehlers in der Farbgebung der Legende.
Version 4.8.1
- Korrektur eines Fehlers bei der Skalierung der Weg- bzw. Zeitachse in Verbindung mit der Option "Tracks verbinden".
Version 4.8
- Nachladen von Karten auch über Klappmenü (select/option) möglich.
- Kleine Korrekturen.
Version 4.7
- Korrektur fehlender Höhenwerte durch Interpolation, wenn weniger als 30%; kann über Hkor abgeschaltet werden.
- Weitere Icons, siehe GPX2GM_Defs.js.
- Weitere Steuervariablen mit Einfluss auf die Infobox.
- Umstrukturierung zur Vermeidung von Kollisionen mit anderen Scripten und Frameworks. Z.Zt. gibt es noch drei globale Objekte: GPX2GM_Icons, JB_gra und JB_plot.
Version 4.6.1
- Korrektur eines Darstellungsfehlers in der Kartenlegende, der nur im Chrome auftrat.
- Key kann nicht in GPX2GM_Defs.js definiert werden.
Version 4.6
- Über eine Steuervariable kann ein Zeitoffset eingestellt werden.
- Auf Wunsch kann bei Wegpunkten die Zeit angezeigt werden.
- Auf Wunsch kann bei Tracks die Durchschnittgeschwindigkeit angezeigt werden.
- Bei fehlenden Daten wird eine leere Profilgrafik angezeigt.
- Korrektur eines Fehlers bei der Behandlung von Tracks mit nur einem Punkt.
- Verbesserung bei der Achsenbeschriftung der Profilgrafiken
Version 4.5.2
- Korrektur eines Fehlers bei GPX-Dateien ohne Track.
- Korrektur eines Fehlers bei der Anzeige von Routen und deren Länge.
- Korrektur eines Fehlers bei der Anzeige der Startzeit.
Version 4.5.1
- Korrektur eines Fehlers beim Auslesen des DESC-Feldes.
Version 4.5
- Grafikfunktionen ausgelagert und auf Canvas umgestellt.
- Interne Datenstruktur neu organisiert.
- Extra Script-Datei für eigene Definitionen, z.B. Wegpunktsymbole, ausgelagert.
- Glättungsfunktion verbessert, Glättungsintervall kann angepasst werden.
- Profilgrafiken auch gegen die Zeit.
- Zeit im Infofenster im Format hh:mm:ss.
- Strecke, Steigung und Geschwindigkeit, wenn vorhanden, immer im Infofenster anzeigen.
- Auswertung des LINK-Feldes auch bei Tracks und Routen.
- Inhalt des DESC-Feldes kann auch im Infofenster angezeigt werden.
- Neue Steuervariablen Shwpcmt, Shwpdesc, Shtrdesc, Shrtcmt, Shtrdesc.
- Fehler bei leeren Tracks korrigiert.
Alle Versionen

Rechtliches

Die Verwendung des Scriptes auf nicht kommerziellen Seiten ist frei. Die Verwendung auf kommerziellen Seiten bedarf meiner Zustimmung. Das Script darf verändert werden, wenn meine Copyrightvermerke nicht entfernt werden und wenn diese Änderungen kenntlich gemacht werden. Über eine Nennung meines Namens oder einen Link auf diese Seite würde ich mich freuen.

Das Script greift auf die Google Maps API zu. Seine Funktion hängt damit von der Bereitstellung dieses Dienstes durch Google ab. Die rechtlichen Bestimmungen von Google müssen eingehalten werden.

11. 1. 2012 Jürgen Berkemeier