Aktuell: Version 4.3 vom 28. 2. 2010
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.
Das Script liest eine GPX-Datei 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 Tracks, Routen und Wegpunkte sichtbar sind. Der Kartenausschnitt kann nachträglich verändert werden.
Die Wegpunkte werden folgendermaßen behandelt:
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. Man erhält ihn auf den Google Maps API Seiten. 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"> 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.
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>Zum Anzeigen der Karte wird Javascript benötigt.</noscript> </div>
"Name_der_GPX-Datei.gpx" ersetzen sie einfach durch den Namen Ihrer GPX-Datei. 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.
Ich empfehle, HTML-Seite, GPX-Datei und eventuelle Fotos im selben Ordner abzulegen.
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 entsprechenden 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.
Außerdem können auch mehrere Karten auf einer Seite angezeigt werden. Siehe hierzu die Beispielseite 3.
Oft enthält die GPX-Datei zu den Tracks auch Höheninformationen. Um das Höhenprofil 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>Zum Anzeigen der Karte wird Javascript benötigt.</noscript> </div> <!-- ... --> <div id="map_hp" style="width:500px;height:300px"> <noscript>Zum Anzeigen des Profils wird Javascript benötigt.</noscript> </div>
Die Zuordnung des Profils zur Karte erfolgt über die ID, wobei die ID des Profils aus der ID der Karte durch Anhängen von "_hp" gewählt werden muss. Z.B. ID der Karte: id="map", ID des Profils: id="map_hp".
Ebenso kann das Steigungsprofil angezeigt werden:
<div id="map_sp" style="width:500px;height:300px"> <noscript>Zum Anzeigen des Profils wird Javascript benötigt.</noscript> </div>
Dabei erfolgt die Zuordnung zur Karte durch Anhängen von "_sp" an die ID. Damit das Steigungsprofil nicht zu "zackelig" wird, sollten die Höhendaten sorgfältig geglättet werden, z.B. mit GPS-Track-Analyse.NET.
Durch Anhängen von "_vp" an die ID erhält man das Geschwindigkeitsprofil:
<div id="map_vp" style="width:500px;height:300px"> <noscript>Zum Anzeigen des Profils wird Javascript benötigt.</noscript> </div>
Siehe hierzu auch die Beispielseite 4.
Am Anfang des Scriptes befinden sich einige Steuervariablen, mit denen das Aussehen der Karte 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überhinaus können 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. Man kann die Variablen aber auch nur im Scriptbereich der Seiten einfügen, deren Darstellung verändert werden soll. Im Script sind die Variablen mit kleinem, auf der html-Seite mit großem Anfangsbuchstaben geschrieben.
| 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_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 | Trackinfo anzeigen, wenn Maus über Track | true/false |
| Shtrcmt | Auch Inhalt des cmt-Feldes in Trackinfo anzeigen | true/false |
| Displaycolor | Trackfarbe aus Datei übernehmen (z.Zt. nur Garmin) | true/false |
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.
28. 2. 2010 Jürgen Berkemeier