Beschreibung
Das Script liest eine oder mehrere GPX-Dateien, 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 die entsprechende Seite in einen Popup-Fenster bzw., wenn der URL ein "~" vorangestellt wird, im aktuellen Fenster 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. Mit meinem Tool Wann und wo können Bildwegpunkte erstellt werden.
- 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.
- Eng zusammen liegende Wegpunkte können zu einem Wegpunktcluster zusammengefasst werden.
- Normaler Wegpunkt
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 die entsprechende Seite in einen Popup-Fenster bzw., wenn der URL ein "~" vorangestellt wird, im aktuellen Fenster geöffnet,
- oder es werden Trackinformationen angezeigt, wenn das LINK-Feld leer ist.
- Tracks können auch in Abhängigkeit von der Höhe, der Steigung, der Geschwindigkeit, der Trittfrequenz oder der Herzfrequenz eingefärbt werden. Die Auswahl erfolgt über die Steuervariable "Trcolmod".
- Tracks als Profil
- Je nach Inhalt der GPX-Datei können Höhe, Steigung, Geschwindigkeit, Herz- und Trittfrequenz 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.
- Wenn bei weniger als 30% der Trackpunkte die Werte für die Höhe, die Herz- oder die Trittfrequenz (Cadenz) fehlen, werden die Werte für die Höhe und den Puls durch Interpolation ermittelt, die fehlenden Werte für die Trittfrequenz werden auf 0 gesetzt.
- Tracks auf der Karte
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 Routeninformationen angezeigt, wenn das LINK-Feld leer ist.
Einbinden des Scriptes
Damit Routen und Tracks in die Karte eingezeichnet werden können, sollte die Seite den Dokumententyp "HTML 5" haben und UTF-8 kodiert sein:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
...
Das Script muss dann folgendermaßen eingebunden werden:
<script type="text/javascript" src="GM_Utils/GPX2GM.js"></script>
Wenn das Script in einem anderen Ordner liegt, muss 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 Dateien darstellen, müssen die Dateinamen durch ein Komma getrennt werden:
<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 (Deutscher Stil) | class="gpxview:Name_der_GPX-Datei.gpx:OSMDE" |
| Open Street Map (Cycle Map) | class="gpxview:Name_der_GPX-Datei.gpx:OSM_Cycle" |
| Open Street Map (Landscape) | class="gpxview:Name_der_GPX-Datei.gpx:OSM_Landscape" |
| Open Street Map (Open Topo) | class="gpxview:Name_der_GPX-Datei.gpx:OPENTOPO" |
Siehe hierzu die Beispielseite 1.
Anmerkung
Ich empfehle, HTML-Seite, GPX-Datei und eventuelle Fotos im selben Ordner abzulegen.
Voraussetzungen
- Eine GPX-Datei mit den Tracks, den Routen oder den Wegpunkten.
- Die Scripte, die Bilder für die Icons und den Marker sowie die Beispiele als ZIP-Archiv GPXViewer5.21.zip. Die Scripte und die CSS-Datei müssen im gleichen Ordner (z.B. GM_Utils) abgelegt werden, die Bilder für die Icons im Unterordner Icons (z.B. GM_Utils/Icons).
Zusätzliche Einflussnahmen 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:skaliere:center_lat,center_lon,radius">
Auf center_lat,center_lon mit Radius skalieren</button>
<button type="button" class="gpxview:map:lade:Beispiel1.gpx:Hybrid">1. Karte laden</button>
<button type="button" class="gpxview:map:lade:Beispiel2.gpx:Karte">2. 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-, Geschwindigkeits-, Herzfrequenz- und Trittfrequenzprofile 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 erfolgt, muss das Karten-DIV eine ID haben, z.B. "map". Die DIVs für die Profile benötigen dann eine ID, die sich wie folgt zusammensetzt:
| 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_hrp | Herzfrequenzprofil gegen Weg |
| map_hrpt | Herzfrequenzprofil gegen Zeit |
| map_cadp | Trittfrequenzprofil gegen Weg |
| map_cadpt | Trittfrequenzprofil gegen Zeit |
| map_wp | Weg gegen Zeit |
| map_profiles | Ein die Profile umschließendes Element für die Skalierung |
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_hrp" style="width:500px;height:300px">
<noscript>
<p>Zum Anzeigen des Herzfrequenzprofils gegen den Weg wird Javascript benötigt.</p>
</noscript>
</div>
<!-- ... -->
<div id="map_hrpt" style="width:500px;height:300px">
<noscript>
<p>Zum Anzeigen des Herzfrequenzprofils gegen die Zeit wird Javascript benötigt.</p>
</noscript>
</div>
<!-- ... -->
<div id="map_cadp" style="width:500px;height:300px">
<noscript>
<p>Zum Anzeigen des Trittfrequenzprofils gegen den Weg wird Javascript benötigt.</p>
</noscript>
</div>
<!-- ... -->
<div id="map_cadpt" style="width:500px;height:300px">
<noscript>
<p>Zum Anzeigen des Trittfrequenzprofils 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.
Werden die Profile in ein Element mit der ID map_profiles gelegt, werden die Profile bei Größenänderung dieses Elements in ihrer Größe angepasst. Sie hierzu das Beispiel 4.
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. 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 "JB.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 Ende der Datei "GPX2GM_Defs.js" aktivieren und anpassen oder die Zeilen in einen Scriptbereich vor der Einbindung des Scriptes setzen.
Liste der Steuervariablen
| Variable | Bedeutung | Wert |
|---|---|---|
| Bestaetigung | Abfrage, ob Google Maps genutzt werden darf | true/false |
| Verarbeitung der GPX-Datei | ||
| Tracks_verbinden | Tracks in Profilgrafik verbinden | true/false |
| Tracks_dateiuebergreifend_verbinden | Tracks in Profilgrafik dateiübergreifend verbinden | true/false |
| Tracksort | Tracks in Profilgrafik nach Startzeit sortiert anordnen | true/false |
| Displaycolor | Linienfarbe aus GPX-Datei übernehmen (z.Zt. nur Garmin) | true/false |
| Laengen3d | Bei Entfernungsberechnung auch Höhenunterschiede berücksichtigen | true/false |
| Tkorr | Korrektur der Zeitangaben zur Ortszeit | true/false |
| Tdiff | Zeitoffset für Zeitanzeige im Infofenster in Stunden | 0 |
| Usegpxbounds | Skalierung nach dem Bounds-Tag | true/false |
| Readspeed | Speed-Tag auswerten, wenn vorhanden | true/false |
| Speedfaktor | Eichfaktor für den Wert des Speed-Tags | 3.6 |
| Hglatt | Höhenprofil für die Anzeige glätten | true/false |
| Hglattlaen | Länge des Glättungsintervalls für das Höhenprofil in Meter, für die Berechnung der Steigung und bei Bedarf für die Anzeige | 500 |
| Vglatt | Geschwindigkeitsprofil glätten | true/false |
| Vglattlaen | Länge des Glättungsintervalls für das Geschwindigkeitsprofil in Meter | 100 |
| Hfaktor | Eichfaktor für die Höhe | 1 |
| Sfaktor | Eichfaktor für die Steigung | 1 |
| Vfaktor | Eichfaktor für die Geschwindigkeit | 1 |
| Wfaktor | Eichfaktor für die Strecke | 1 |
| Bildpfad | Pfad zum Bild | "" |
| Gpxpfad | Pfad zur GPX-Datei | "" |
| Anzeige | ||
| Showmaptypecontroll | Kartenwähler an/aus | true/false |
| Scrollwheelzoom | Zoomen mit Scrollrad an/aus | true/false |
| Fullscreenbutton | Blendet oben rechts in der Karte eine kleine Lupe ein, mit der sie auf Fullscreen vergrößert werden kann | true/false |
| Trafficbutton | Zeigt einen Button zum Einblenden des Trafficlayers auf Google-Karten | true/false |
| Trafficonload | Zeigt den Trafficlayers sofort an | true/false |
| Currentlocationbutton | Zeigt einen Button zum Anzeigen der aktuellen Position | 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 |
| Trackover | Track- oder Routeninfo anzeigen, wenn Maus über Linie | true/false |
| Trackclick | Track- oder Routeninfo anzeigen, wenn Mausklick auf Linie | true/false |
| Tcols | Trackfarben | "#ff0000,#00ff00,#0000ff,#eeee00, #ff00ff,#00ffff,#000000" |
| Rcols | Routenfarben | "#800000,#008000,#000080,#808000, #800080,#008080,#808080" |
| Ocol | Farbe von Track oder Route bei Mouseover | "#000" |
| Owidth | Linienstärke Track und Route bei Mouseover | 3 |
| Twidth | Linienstärke Track | 2 |
| Rwidth | Linienstärke Route | 2 |
| Topac | Transparenz Trackfarbe | 0.8 |
| Ropac | Transparenz Routenfarbe | 0.8 |
| Doclang | Sprache des Dokuments | "auto"/"de"/"en" |
| Unit | Längeneinheiten in m/km, mile/ft, NM/ft, sm/ft | "si"/"enus"/"air"/"water" |
| Wegpunkte | ||
| Shwpname | Inhalt des name-Feldes in Wegpunktinfo anzeigen | 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 |
| Shwpshadow | Wegpunkticons mit Schatten anzeigen | true/false |
| Wpcluster | Wegpunkte, die zu dicht zusammen liegen, als Cluster anzeigen | true/false |
| Bildwegpunkticon | Iconname für Bildwegpunkte, bei "" wird Iconname aus GPX-Datei verwendet | "Bild" |
| Groesseminibild | Größe des Vorschaubildes bei Bildwegpunkten | 60 |
| Tracks | ||
| 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 |
| Shtrcad | Trittfrequenz in Trackinfo anzeigen | true/false |
| Shtrhr | Puls in Trackinfo anzeigen | true/false |
| Shtrt | Zeit in Trackinfo anzeigen | true/false |
| Shtrtwob | Zeit in Bewegung in Trackinfo anzeigen | true/false |
| Shtrtabs | Absolute Zeit statt Zeit nach Start im Infofenster (Maus über Profilgrafik) anzeigen | true/false |
| Shtrtges | Gesamtzeit des Tracks anzeigen anzeigen | true/false |
| Shtrtgeswob | Gesamtzeit in Bewegung anzeigen anzeigen | true/false |
| Movevmin | Mindestgeschwindigkeit für Bewegung | 1 |
| 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 |
| Shtrvmittwob | Durchschnittsgeschwindigkeit unter Berücksichtigung von Pausen in Trackinfo anzeigen | true/false |
| Shtrvmittpace | Durchschnittsgeschwindigkeit in Min/km in Trackinfo anzeigen | true/false |
| Shtrvmittpacewob | Durchschnittsgeschwindigkeit in Min/km unter Berücksichtigung von Pausen in Trackinfo anzeigen | true/false |
| Arrowtrack | Anzeigen eines Pfeils über dem Track, der die Bewegungsrichtung anzeigt | true/false |
| Arrowtrackcol | Farbe des Pfeils, wenn leer wird Trackfarbe genommen | "#rgb"/"" |
| Shtrstart | Markierung am Trackanfang | true/false |
| Shtrziel | Markierung am Trackende | true/false |
| Trcolmod | Tracks in Abhängigkeit von Höhe ("h"), Steigung ("s"), Geschwindigkeit ("v"), Trittfrequenz ("cad") oder Herzfrequenz ("hr") farbcodieren | "h"/"s"/"v"/ "hr"/"cad"/"" |
| Routen | ||
| Shrtstart | Markierung am Routenanfang | true/false |
| Shrtziel | Markierung am Routenende | true/false |
| Shrtcmt | Inhalt des cmt-Feldes in Routeninfo anzeigen | true/false |
| Shrtdesc | Inhalt des desc-Feldes in Routeninfo anzeigen | true/false |
| Arrowroute | Anzeigen eines Pfeils über der Route, der die Bewegungsrichtung anzeigt | true/false |
| Arrowroutecol | Farbe des Pfeils, wenn leer wird Trackfarbe genommen | "#rgb" |
| Profile | ||
| Scaling | Vorgabe der Min- und Maxwerte in den Profildiagrammen. Siehe Text. | |
| Farben der Profilgrafik: | ||
| Plotframecol | Rahmenfarbe | "black" |
| Plotgridcol | Gitterfarbe | "gray" |
| Plotlabelcol | Farbe der Achsenbeschriftung | "black" |
| Plotmarkercol | Farbe des Markers in der Profilgrafik | "black" |
| Profilfillopac | Sättigung der Farbe unter der Profilkurve | 0 bis 1 |
Anzeigen von Bildwegpunkten und Wegpunkten ohne GPX-Datei
Wenn die Geokoordinaten von Bildpunkten bekannt sind (s. auch Wann_und_wo), können diese auch ohne eine GPX-Datei angezeigt werden. Dazu muss nach dem Map-Div folgender HTML-Code eingefügt werden, wobei "map" die ID des Kartendivs ist:
<div id="map" class="gpxview::Karte">
<noscript><p>Zum Anzeigen der Karte wird Javascript benötigt.</p></noscript>
</div>
<div id="map_img">
<a href="Bild1.jpg" data-geo="lat:nnn.nnnnnnn,lon:nnn.nnnnnnn">Beschreibung</a>
<a href="Bild2.jpg" data-geo="lat:nnn.nnnnnnn,lon:nnn.nnnnnnn">Beschreibung</a>
<!-- ... weitere Bilder ... -->
<!-- oder -->
<img src="Bild3.jpg" data-geo="lat:nnn.nnnnnnn,lon:nnn.nnnnnnn" alt="Beschreibung" />
<img src="Bild4.jpg" data-geo="lat:nnn.nnnnnnn,lon:nnn.nnnnnnn" alt="Beschreibung" />
<!-- ... weitere Bilder ... -->
</div>
Im Map-Div darf auch der Name einer GPX-Datei angegeben werden, muss aber nicht. Siehe hierzu auch Beispiel 11. Wenn die Bilder nur über die Karte gezeigt werden sollen, muss man dem umgebenden DIV die CSS-Eigenschaft "display:none" geben. In diesem Fall empfehle ich die Variante mit "<a href=..."
Ebenso können auch Wegpunkte angezeigt werden (Beispiel 11b):
<div id="map" class="gpxview::Karte">
<noscript><p>Zum Anzeigen der Karte wird Javascript benötigt.</p></noscript>
</div>
<div id="map_wp">
<div data-geo="lat:nnn.nnnnnnn,lon:nnn.nnnnnnn">Beschreibung</div>
<div data-geo="lat:nnn.nnnnnnn,lon:nnn.nnnnnnn">Beschreibung</div>
<!-- ... weitere Wegpunkte ... -->
</div>
Beispiele
- Beispiel 1
Nur eine Karte. - Beispiel 2
Weitere Karten mit Button anzeigen. - Beispiel 2b
Weitere Karten mit Auswahlmenü anzeigen. Mit Richtungspfeilen. - Beispiel 3
Wie 2, mit mehreren Karten. - Beispiel 3b
Wie 2b, mit mehreren Karten. - Beispiel 4
Karte und Profile gegen Weg. - Example 4
English version of Beispiel 4 with mile and ft as units of length. - Beispiel 4b
Wie 4, mit farbcodiertem Track. - Beispiel 5
Karte und Profile gegen Zeit. - Beispiel 5b
Karte und Profile gegen absolute Zeit. - Beispiel 6
Wie 4, mit mehreren GPX-Dateien. - Beispiel 7
Drei kleine Karten, die vergrößert werden können. - Beispiel 9
Wegpunktcluster. - Beispiel 10
Karten und Profile mit Seemeile und Fuß als Einheiten. - Beispiel 11 und
Beispiel 11b
Bildwegpunkte ohne GPX-Datei. - Und was sonst noch möglich ist, hier sind aber Javascriptkenntnisse notwendig:
- Verschiedene Möglichkeiten, Bilder zu zeigen: Foto 1, Foto 2, Foto 3, Foto 4, Foto 5.
- Nachträgliches Setzen und Manipulieren von Wegpunkten: Beispiel 8
- Anbieten aller GPX-Dateien in einem Ordner über ein Klappmenü (Beispiel 12) oder alle laden (Beispiel 12b)
- Bei meinem kleinen Tourenportal kommt der GPX-Viewer auch zum Einsatz.
Links
- Google Maps
- Google Maps API
- Schlüssel für JavaScript API anfordern
- OpenStreetMap - Deutschland
- OSM-Keys über Thunderforest
- Wikipediaartikel über das GPS Exchange Format - GPX
- GPSBabel
- Wann und wo wurde das Foto aufgenommen
Erstellen von Bildwegpunkten. - Show GPX
Inhalt einer GPX-Datei anzeigen, Testseite für die Möglichkeiten des GPX-Viewers.
Der Google Maps API Key
Seit einiger Zeit erscheint in der Fehler-, Javascript- oder Browserkonsole die Warnung NoApiKeys. Inzwischen sieht man auch die Meldung Hoppla! Ein Fehler ist aufgetreten. Google Maps wurde auf dieser Seite nicht richtig geladen. Technische Details dazu entnimmst du der JavaScript-Konsole und in der Konsole dann die Fehlermeldung MissingKeyMapError. Abhilfe schafft jetzt nur noch die Beantragung eines API-Keys. In den Praxistipps von chip.de finden Sie eine Anleitung dazu. Dieser Key muss dann in die Datei "GPX2GM_Defs.js" eingetragen werden:
// Google Maps API Key
JB.GPX2GM.GM_Api_key = "hierDenKeyEintragen";
Seit dem 22. 6. 2016 verlangt Google diesen Schlüssel für neu eingebundene Karten. Siehe auch Building for Scale: Updates to Google Maps APIs Standard Plan.
API Key für OSM-Karten
Die Karten OSM Cycle und OSM Landscape verlangen einen API-Key, den man bei Thunderforest beantragen muss. Auch diese Keys müssen in die Datei "GPX2GM_Defs.js" eingetragen werden:
// Key für OSM Cycle
JB.GPX2GM.OSM_Cycle_Api_Key = "hierDenKeyEintragen";
// Key für OSM Landscape
JB.GPX2GM.OSM_Landscape_Api_Key = "hierDenKeyEintragen";
Wenn kein Key eingetragen ist, wird die entsprechende Karte nicht angeboten.
Datenschutz
Beim Aufrufen der Seite mit der Karte werden Javascripte von Google, das Google Maps API, sowie Kartenbilder von openstreetmap.de, openstreetmap.org oder thunderforest.com geladen. Hierbei werden aus technischen Gründen Daten der Besucher, z.B. deren IP-Adresse, an den Anbieter übertragen. Daher wird der Seitenbesucher gefragt, ob der Dienst genutzt werden darf. Bei Zustimmung wird dieses im LocalStorage des Browsers gespeichert und bei weiteren Besuchen unterbleibt die Abfrage. Auch sollte im Seitenimpressum oder in der Datenschutzerklährung hierauf hingewiesen werden und die Möglichkeit angeboten werden, die Zustimmung zurückzuziehen. Siehe hierzu mein Impressum.
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 5.21
- Unterstützung der Garminfarbe DarkYellow.
- Im Zeit-Profil kann die Zeit auch absolut angezeigt werden.
- Verbesserung der Genauigkeit bei der Berechnung der Höhenmeter und der zurückgelegten Strecke.
- Kürzel für Weg-Zeitprofil von _wp nach _wpt geändert.
- Defaultwert für Speedfaktor auf 3.6 gesetzt.
- Weitere Steuervariablen: Tcols, Rcols, Ocol, Popup_Pars.
- Abfrage, ob Dienst genutzt werden darf, Steuervariable Bestaetigung.
- Version 5.20
- Die Farbe für die Richtungspfeile (Arrowtrack) kann unabhängig von der Trackfarbe gewählt werden; Steuervariablen Arrowtrackcol und Arrowroutecol.
- Open Topo Map eingebaut.
- Bei Wegpunkten im html können auch bounds angeben werden, s. Beispiel 11b.
- Über die Steuervariable Tracksort kann die Sortierung der Tracks gesteuert werden.
- Über die Steuervariable Currentlocationbutton wird ein Button zum Anzeigen der aktuellen Position eingeblendet.
- Über die Steuervariable Movevmin kann die Mindestgeschwindigkeit für die Berechnung der Zeit in Bewegung eingestellt werden.
- Version 5.19.1
- Korrektur eines Fehlers beim Übertragen des Google-Maps-API-Keys: Fehlendes http-Protokoll bei der API-Key-Abfrage nachgetragen.
- Der Trafficlayer wird bei erneutem Klick wieder ausgeblendet.
- Der Trafficlayer kann sofort eingeblendet werden (neue Steuervariable Trafficonload).
- Version 5.19
- Warten-Text wird durch Bild ersetzt, wenn wait-String leer.
- Neue Steuervariable Gpxpfad.
- Neue Steuervariable Trackclick.
- Ein/Ausblenden des Trafficlayers von Google Maps, neue Steuervariable Trafficbutton.
- Neue Icons: hiking, cycling.
- Kartentyp Oberflaeche ist auch unter Oberfläche, Gelaende und Gelände ansprechbar.
- Bei Wegpunktclustern wird im Icon die Anzahl der Clusterelemente angezeigt.
- Für die OSM-Karten Cycle und Landscape kann ein API-Key angegeben werden.
- Diverse Links und URLs auf https umgestellt.
- Steuervariablen Overviewmapcontrol und Largemapcontrol entfernt. Die Optionen werden nicht mehr unterstützt.
- Einige Fehler korrigiert.
- Version 5.18.1
- Beseitigung eines Fehlers in der Plot-Funktion.
- Version 5.18
- Beseitigung eines Fehlers beim Zoomen, der auftrat, wenn die Karte beim Laden der Seite ausgeblendet war.
- Beseitigung eines Fehlers bei der Anzeige von Bildwegpunkten, wenn auf der Seite mehrere Karten waren.
- Diverse Umstellungen auf modernere und performantere Methoden, daher wird der Internetexplorer in Version 8 oder älter nicht mehr unterstützt.
- Version 5.17
- Letzte Version, die noch den Internetexplorer 8 unterstützt.
- Option für die Verwendung eines Google Maps API-Keys eingebaut. Der Key kann in der Datei "GPX2GM_Defs.js" definiert werden.
- Auf Wunsch können über Tracks und Routen Pfeile eingeblendet werden, die die Bewegungsrichtung anzeigen. Steuervariablen: Arrowtrack und Arrowroute. Siehe Beispiel 2b.
- Version 5.16
- Durck Klick auf ein Symbol in der Legende kann die Karte auf den jeweiligen Track oder die jeweilige Route skaliert werden. Siehe Beispiel 2b.
- Fehlende englische Texte eingefügt.
- Version 5.15
- Lage des Infofensters und des Zurückpfeils der Clusteransicht an die neue Lage der Zoomelemente angepasst.
- Korrektur bei der Berechung der An- und Abstiegsmeter.
- Fehlende englische Texte eingefügt.
- Mehrere Tracks werden auch Dateiübergreifend nach ihrer Startzeit soriert.
- Weitere Icons (campground und summit).
- Neue Steuervariable (Hglatt) um das Höhenprofil auf Wunsch zu glätten.
- Neue Steuervariablen (Shtrtges und Shtrtgeswob um im Trackinfo die Gesamtzeit und die Gesamtzeit in Bewegung anzeigen.
- Neue Steuervariable (Shtrtwob) um bei Mouseover im Profil die Zeit in Bewegung anzuzeigen.
- Wenn das Map-Div ein Title-Attribut hat, wird dessen Inhalt anstelle des/der Dateinamen in der Kartenlegende gezeigt.
- Version 5.14.1
- Korrektur bei der Positionierung des Infofensters, da Google die Zoomsteuerung von links oben nach rechts unten verlegt hat.
- Neues Beispiel (12), das alle GPX-Daten aus einem Ordner über ein Klappmenü anbietet.
- Version 5.14
- Teilweise Unterstützung des HTTPS-Protokolls. OSM-Karten können aber nicht über HTTPS geladen werden.
- Neue Steuervariable Tkorr, um die Zeitkorrektur auszuschalten.
- Das Link-Element wird auch berücksichtigt.
- Bei Bildwegpunkten in Wegpunktclustern wird bei Mouseover der Name bzw. der Dateiname des Bildes ohne Extension angezeigt.
- Bei Bildwegpunkten kann auf Wunsch ein anderes Icon verwendet werden; neue Steuervariable Bildwegpunkticon.
- Beim Klick in die Profilgrafik wird in der Karte ein Infofenster dauerhaft eingeblendet.
- Weitere Icons (harbor und anchor).
- Korrektur eines Fehlers bei der Erstellung der Wegpunktcluster.
- Korrektur eines Fehlers bei der Zeitberechnung in Verbindung mit Tracks_dateiuebergreifend_verbinden.
- Begrenzung der Zeitzonenanfragen an Google auf maximal 10 pro Sekunde
- Version 5.13
- Bildwegpunkte können auch ohne GPX-Datei direkt im HTML definiert werden.
- Zusätzliche Einheiten "air" (NM) und "water" (sm).
- Rescale-Button auf Zentrum und Radius erweitert.
- Bei den Zeitangaben in den Infofenstern werden die Zeitzone und eine mögliche Sommerzeit berücksichtigt.
- Neue Steuervariablen für die Linieneigenschaften auf der Karte.
- Korrektur eines Fehlers bei der Berechnung der Höhenmeter.
- Version 5.12.1
- Neue Steuervariable Plotmarkercol für die Farbe des Markers in der Profilgrafik.
- Kleine Korrekturen bei der Skalierung des Farbbalkens.
- Version 5.12
- Beschriftungen auch in Englisch (Steuervariable Doclang). Siehe Example 4.
- Neue Steuervariable für Filetrennzeichen: Dateitrenner.
- Neue Steuervariable um den Kartenwähler auszublenden: Showmaptypecontroll.
- Beim Nachladen von Karten ohne Kartentyp wird nicht mehr auf die Defaultkarte geschaltet, sondern die aktuelle Karte beibehalten.
- Neue GPX-Tags: cadence und heartrate neben cad und hr.
- Neue Steuervariablen Wfaktor, Hfaktor, Sfaktor und Vfaktor.
- Längenskalierung auch in Meile, Seemeile und Fuß (Steuervariable Unit). Siehe Beispiel 10 und Example 4.
- Behebung eines Fehlers: bei Skalierung der Farbkodierung wird Scaling berücksichtigen.
- Behebung eines Fehlers bei Wegpunktclustern und nur einem Wegpunkt in der GPX-Datei.
- Version 5.11
- OSM-Karte auch im deutschen Stil (OSMDE).
- Durchschnittgeschwindigkeitsangabe im Infofenster auch in Minuten/km (Pace) (Shtrvmittpace).
- Durchschnittgeschwindigkeitsangabe im Infofenster auch unter Berücksichtigung von Pausen (Shtrvmittwob, und Shtrvmittpacewob).
- Tracklinien farbcodieren in Anhängigkeit von Höhe, Steigung, Geschwindigkeit, Herzfrequenz oder Trittfrequenz (Trcolmod). Siehe Beispiel 4b.
- Behebung eines Fehlers bei der Anzeige von Bildwegpunkten.
- Version 5.10.1
- Behebung eines Fehlers in Verbindung mit kurzen Tracks bei der Beschriftung der X-Achse der Profile.
- Version 5.10
- Umstellung der Zeitachse bei Zeitprofilen von Sekunden auf Stunden und Minuten.
- Behebung eines Fehlers in Verbindung mit Markierungen bei Start oder Ziel.
- Version 5.9.1
- Korrektur bei Wegpunktclustern.
- Kleine Korrekturen bei der Darstellung der Infofenster.
- Version 5.9
- Eng zusammen liegende Wegpunkte können zu einem Cluster zusammen gefasst werden, Steuervariable Wpcluster. Siehe Beispiel 9.
- Profilgrafiken können wie die Map ihre Größe bei Änderung der Fenstergröße anpassen. Siehe Beispiel 4.
- Weitere Icons.
- Fehler beim Defaultschatten korrigiert.
- Überarbeitung der Formatierung der Infofenster.
- Blockierung der max-width-Angabe bei Bildern.
- Version 5.8.3
- Puls und Cadenz ins Markermove-Infofenster aufgenommen, Steuervariablen: Shtrhr und Shtrcad.
- Neue Steuervariable Bildpfad.
- Kleine Korrekturen bei der Darstellung der Infofenster.
- Version 5.8.2
- Korrekur eines Fehlers bei der Darstellung von Markern ohne Schatten.
- Version 5.8.1
- Korrekuren am Design der Legende und der Infofenster.
- Korrekuren am Design der Infofenster.
- Korrekuren am Design der Beschriftung der y-Achse der Profilgrafiken.
- Neues Steuerflag in der Scaling-Struktur.
- Den Icons ihren Schatten zurückgegeben. Der Schatten kann mit der Steuervariablen Shwpshadow abgeschaltet werden.
- Version 5.8
- In der Profilgrafik kann der Marker nach Mouseover auch mit den Pfeiltasten bewegt werden.
- In der Profilgrafik kann der Marker auch Touchscreens bewegt werden.
- Karte OSM Landscape hinzugefügt.
- Bei Bildwegpunkten wird der Dateinamen nicht mehr als Titel angezeigt.
- Die Herzfrequenz (HR) und die Trittfrequenz (CAD) können auch als Profilgrafik angezeigt werden.
Eine Bitte: Ich hatte leider nur wenige Testdateien, wenn HR oder CAD nicht gelesen werden können, würde ich mich freuen, wenn Sie mir die GPX-Datei für Testzwecke zusenden. - Wird die Größe des Map-Divs in % angegeben, passt sich die Karte an Größenänderungen an.
- Auf Wunsch (Steuervariable Fullscreenbutton) kann ein Button eingeblendet werden, mit dem die Map auf Fullscreen vergrößert werden kann.
- Höhen, Herzfrequenz und Cadenz-Daten werden bei Fehlstellen immer korrigiert. Die Steuervariable Hkorr hat keine Wirkung mehr.
- Diverse kleinere Korrekturen.
- Version 5.7
- Die Fläche unter den Profilkurven kann in Linienfarbe eingefärbt werden. Die neue Steuervariable Profilfillopac gibt die Sättigung an.
- Mit der neuen Steuervariablen Groesseminibild kann die Größe des Vorschaubildes bei Bildwegpunkten verändert werden.
- Der Bereich für Mausklick auf und Überfahren von Tracks und Routen wurde vergrößert.
- Die beim Wechsel auf die Version 5 vergessene Auswertung des Linktags bei Tracks und Routen wurde wieder eingebaut.
- Verbesserung der Speicherverwaltung.
- Korrektur einiger kleiner Fehler.
- Version 5.6.1
- Korrektur eines Fehlers in Verbindung mit Tracks, die nur aus einem Punkt bestehen.
- Version 5.6
- Neue Steuervariablen: Tracks_dateiuebergreifend_verbinden, Plotframecol, Plotgridcol und Plotlabelcol.
- Zum Schließen des Infofensters kann man "irgendwo" in die Map klicken.
- Einbau einer Callback-Funktion, die bei Klick auf einen Wegpunkt aufgerufen wird. Siehe hierzu die Fotobeispiele.
- Das Tag speed wird auch als gpxx:speed gelesen.
- Korrekturen kleiner Fehler.
- Version 5.5
- Neue Steuervariable, um bei Wegpunkten die Anzeige des Namens zu steuern (Shwpname).
- Neue Steuervariable, um im Infofenster die absolute Zeit anzuzeigen (Shtrtabs).
- Bei kleinen Karten werden keine Kontrollelemente für Zoom oder Kartenwahl gezeigt.
- Positionierung des Infofensters (Maus über Profilgrafik) verbessert.
- Formatanweisungen in CSS-Datei GPX2GM.css ausgelagert.
- Korrekturen kleiner Fehler.
- Version 5.4
- Neue Steuervariable um auf Wunsch die Skalierung der Karte über die Werte im Bounds-Tag zu steuern (Usegpxbounds).
- Korrekturen in den Beispieldateien.
- Version 5.3
- Weitere Steuervariable: Eichfaktor für die Werte des Speed-Tags (Speedfaktor).
- Fehlerkorrektur: Beim Aus- und Einschalten von Tracks, Routen und Wegpunkten wird der Kartentyp nicht mehr auf den Defaulttyp zurückgesetzt.
- Version 5.2
- Auf Wunsch Wegpunkt bei Start und Ziel, Steuervariablen: Shtrstart, Shtrziel, Shrtstart, Shrtziel.
- Copyrighteinblendung bei OSM und Cycle Map.
- Beim Aus- und Einschalten von Tracks, Routen und Wegpunkten wird die Karte nicht neu ausgerichtet.
- Die OSM-Karte T & H wird nicht mehr angeboten und wurde daher aus der Auswahl entfernt.
- Version 5.1
- Karte wird nach Schließen des Infofensters wieder zurückgeschwenkt.
- Korrektur eines Fehlers bei nicht automatischer Skalierung der Profilgrafiken.
- Diverse kleine Korrekturen und Optimierungen.
- Hilfsscripte werden erst bei Bedarf nachgeladen.
- Das Script belegt nur noch den globalen Namen "JB". Daher müssen bei diesem Update noch einmal alle Scripte ausgetauscht werden.
- Version 5
- Umstellung auf die Google Maps API V3.
- Neue Steuervariable Scrollwheelzoom.
- 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.
Da auch die Möglichkeit besteht, die GPX-Daten auf OSM-Karten zu zeigen, müssen auch die Lizenzbedingungen von OSM eingehalten werden.
