GPX Viewer

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

Mit der Seite Show GPX können Sie sich den Inhalt einer GPX-Datei ohne Upload ansehen und die Möglichkeiten des GPX Viewers austesten.

Beispiel 4

Beschreibung

Das Script liest eine oder mehrere GPX-Dateien, wertet sie aus und zeichnet Tracks, Routen und Wegpunkte in eine Open-Street-Map- oder 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.

Es werden zwei Versionen des Scripts angeboten, eine auf dem Google Maps API basierende, die einen API-Key benötigt, und eine auf Leaflet basierende mit den Open-Street-Maps-Kartenmaterial. Als Default wird die Leaflet-Version verwendet, mit der Steuervariable Mapapi kann die Google-Maps-API-Version gewählt werden.

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

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 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:

Art der Karte Klasse
Kartendarstellung:
(nur mit Google Maps API)
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:
(nur mit Google Maps API)
class="gpxview:Name_der_GPX-Datei.gpx:Hybrid"
Oberflächenansicht:
(nur mit Google Maps API)
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):
benötigt Key
class="gpxview:Name_der_GPX-Datei.gpx:OSM_Cycle"
Open Street Map (Landscape):
benötigt Key
class="gpxview:Name_der_GPX-Datei.gpx:OSM_Landscape"
Open Street Map (Outdoors):
benötigt Key
(nur in Leaflet-Version)
class="gpxview:Name_der_GPX-Datei.gpx:OSM_Outdoors"
Open Street Map (Open Topo): class="gpxview:Name_der_GPX-Datei.gpx:Open_Topo"
TopPlusOpen:
(nur in Leaflet-Version)
class="gpxview:Name_der_GPX-Datei.gpx:TopPlusOpen"
Open Sea Map:
(nur in Leaflet-Version)
class="gpxview:Name_der_GPX-Datei.gpx:Open_Sea"
Hiking:
(nur in Leaflet-Version)
class="gpxview:Name_der_GPX-Datei.gpx:Hiking"
Cycling:
(nur in Leaflet-Version)
class="gpxview:Name_der_GPX-Datei.gpx:Cycling"
Keine Karte:
(nur in Leaflet-Version)
class="gpxview:Name_der_GPX-Datei.gpx:Keine_Karte"

Siehe hierzu die Beispielseite 1.

Anmerkung

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

Voraussetzungen

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-, Temperatur-, 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:

Profil
ID des DIVsFunktion
mapKarte / Satellitenbild
map_hpHöhenprofil gegen Weg
map_hptHöhenprofil gegen Zeit
map_spSteigungsprofil gegen Weg
map_sptSteigungsprofil gegen Zeit
map_vpGeschwindigkeitsprofil gegen Weg
map_vptGeschwindigkeitsprofil gegen Zeit
map_hrpHerzfrequenzprofil gegen Weg
map_hrptHerzfrequenzprofil gegen Zeit
map_cadpTrittfrequenzprofil gegen Weg
map_cadptTrittfrequenzprofil gegen Zeit
map_atemppTemperaturprofil gegen Weg
map_atempptTemperaturprofil gegen Zeit
map_wptWeg gegen Zeit
map_profilesEin 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_atempp" style="width:500px;height:300px">
 <noscript>
  <p>Zum Anzeigen des Temperaturprofils gegen den Weg wird Javascript benötigt.</p>
 </noscript>
</div>
<!-- ... -->
<div id="map_atemppt" style="width:500px;height:300px">
 <noscript>
  <p>Zum Anzeigen des Temperaturprofils gegen die Zeit wird Javascript benötigt.</p>
 </noscript>
</div>
<!-- ... -->
<div id="map_wpt" 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

Über Steuervariablen kann das Aussehen der Karte und das Verhalten des Scripts weiter beeinflusst werden. Man kann u. A. 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 in der Datei "GPX2GM_Defs.js" 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.

Ü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

VariableBedeutungWert, Defaultwert unterstrichen
BestaetigungAbfrage, ob dem Einbinden externer Inhalte (Kartenbilder und evtl. auch Scripte) zugestimmt wirdtrue/false
MapapiApi, mit dem die Karte angezeigt wird.
Openstreetmaps mit Leaflet: osm,
Google Maps und OSM mit dem Google Maps API: gm
"osm"/"gm"
Verarbeitung der GPX-Datei
Tracks_verbindenTracks in Profilgrafik verbindentrue/false
Tracks_dateiuebergreifend_verbindenTracks in Profilgrafik dateiübergreifend verbindentrue/false
TracksortTracks in Profilgrafik nach Startzeit sortiert anordnentrue/false
DisplaycolorLinienfarbe aus GPX-Datei übernehmen (z.Zt. nur Garmin)true/false
Laengen3dBei Entfernungsberechnung auch Höhenunterschiede berücksichtigentrue/false
TkorrAnzeige der Zeit nach der Zeitzone des Browserstrue/false
TdiffZeitoffset für Zeitanzeige im Infofenster in Stunden0
UsegpxboundsSkalierung nach dem Bounds-Tagtrue/false
ReadspeedSpeed-Tag auswerten, wenn vorhandentrue/false
SpeedfaktorEichfaktor für den Wert des Speed-Tags3.6
UnwraplonLon-Werte beim Übergang über die 180°-Grenze korrigieren.true/false
HglattHöhenprofil für die Anzeige glättentrue/false
HglattlaenLänge des Glättungsintervalls für das Höhenprofil in Meter, für die Berechnung der Steigung und bei Bedarf für die Anzeige500
VglattGeschwindigkeitsprofil glättentrue/false
VglattlaenLänge des Glättungsintervalls für das Geschwindigkeitsprofil in Meter100
HfaktorEichfaktor für die Höhe1
SfaktorEichfaktor für die Steigung1
VfaktorEichfaktor für die Geschwindigkeit1
WfaktorEichfaktor für die Strecke1
TfaktorEichfaktor für die Temperatur1
ToffsetEichoffset für die Temperatur0
BildpfadPfad zum Bild""
GpxpfadPfad zur GPX-Datei""
Anzeige
ScrollwheelzoomZoomen mit Scrollrad an/austrue/false
FullscreenbuttonBlendet oben rechts in der Karte ein Vollbildsymbol ein, mit dem sie auf volle Größe vergrößert werden kanntrue/false
Trafficbutton
(nur mit Google Maps API)
Zeigt einen Button zum Einblenden des Trafficlayers auf Google-Kartentrue/false
TrafficonloadZeigt den Trafficlayers sofort antrue/false
CurrentlocationbuttonZeigt einen Button zum Anzeigen der aktuellen Positiontrue/false
ShowmaptypecontrollZeigt den Kartenwähler antrue/false
LegendeLegende an/austrue/false
Legende_fnmDateinamen in Legende zeigen/nicht zeigentrue/false
Legende_fnm_lmHinter Dateinamen in Legende Datum (d) oder Zeit (t) der letzten Änderung zeigen ""/"d"/"t"/"dt"
Legende_rrHöhenmeter in Legende zeigen/nicht zeigentrue/false
Legende_trkTrackanzeige beim Öffnen der Seite an/austrue/false
Legende_rteRoutenanzeige beim Öffnen der Seite an/austrue/false
Legende_wptWegpunktanzeige beim Öffnen der Seite an/austrue/false
Legende_infoTrack- und Routeninfos in der Legendenzeile anzeigentrue/false
TrackoverTrack- oder Routeninfo anzeigen, wenn Maus über Linietrue/false
TrackclickTrack- oder Routeninfo anzeigen, wenn Mausklick auf Linietrue/false
TcolsTrackfarben"#ff0000,#00ff00,#0000ff,#eeee00,
#ff00ff,#00ffff,#000000"
RcolsRoutenfarben"#800000,#008000,#000080,#808000,
#800080,#008080,#808080"
OcolFarbe von Track oder Route bei Mouseover. Bei "" wird die Track- bzw. Routenfarbe genommen (nur osm)"#000"
OwidthLinienstärke Track und Route bei Mouseover3
TwidthLinienstärke Track2
RwidthLinienstärke Route2
TopacTransparenz Trackfarbe0.8
RopacTransparenz Routenfarbe0.8
DoclangSprache des Dokuments"auto"/"de"/"en"/"fr"/"es"/"it"/"nl"
UnitLängeneinheiten in m/km (si), mile/ft (en us), NM/ft (air), sm/ft (water), Temperatur in °F (us)"si"/"us"/"en"/"air"/"water"
LinktargetSteuert, wie Links geöffnet weden:
"": im aktuellen Fenster,
"popup": in einem Popup-Fenster,
beliebiger String: in einem neuen Fenster/Tab, der String wird als target-Attribut verwendet
""/"popup"/"targetname"
Wegpunkte
ShwpnameInhalt des name-Feldes in Wegpunktinfo anzeigentrue/false
ShwpcmtInhalt des cmt-Feldes in Wegpunktinfo anzeigentrue/false
ShwpdescInhalt des desc-Feldes in Wegpunktinfo anzeigentrue/false
ShwptimeZeit in Wegpunktinfo anzeigentrue/false
ShwplatlonGeokoordinaten in Wegpunktinfo anzeigentrue/false
ShwpshadowWegpunkticons mit Schatten anzeigentrue/false
Shwptooltip
(nur osm)
Inhalt des name-Feldes über Wegpunkt anzeigentrue/false
WpclusterWegpunkte, die zu dicht zusammen liegen, als Cluster anzeigentrue/false
BildwegpunkticonIconname für Bildwegpunkte, bei "" wird Iconname aus GPX-Datei verwendet"Bild"
GroesseminibildGröße des Vorschaubildes bei Bildwegpunkten60
DefaulticonIcon, das gezeigt wird, wenn in der GPX-Datei kein oder ein unbekanntes Icon gewählt wurde.Iconname/""
Tracks
ShtrnameInhalt des name-Feldes in Trackinfo anzeigentrue/false
ShtrcmtInhalt des cmt-Feldes in Trackinfo anzeigentrue/false
ShtrdescInhalt des desc-Feldes in Trackinfo anzeigentrue/false
ShtrxStrecke in Trackinfo anzeigentrue/false
ShtrcadTrittfrequenz in Trackinfo anzeigentrue/false
ShtrhrPuls in Trackinfo anzeigentrue/false
ShtratempTemperatur in Trackinfo anzeigentrue/false
ShtrtZeit in Trackinfo anzeigentrue/false
ShtrtwobZeit in Bewegung in Trackinfo anzeigentrue/false
ShtrtabsAbsolute Zeit statt Zeit nach Start im Infofenster bei Maus über Profilgrafik, Klick auf Profilgrafik oder Track anzeigen (k) oder als Achsenbeschriftnung bei der Profilgrafik (p)"k", "p", "kp"/""
ShtrtgesGesamtzeit des Tracks anzeigentrue/false
ShtrtgeswobGesamtzeit in Bewegung anzeigentrue/false
MovevminMindestgeschwindigkeit für Bewegung1
ShtrvGeschwindigkeit in Trackinfo anzeigentrue/false
ShtrpacePace in Trackinfo anzeigentrue/false
ShtrhHöhe in Trackinfo anzeigentrue/false
ShtrrrKumulierte Steigungsmeter in Trackinfo anzeigentrue/false
ShtrsSteigung in Trackinfo anzeigentrue/false
ShtrvmittDurchschnittsgeschwindigkeit in Trackinfo anzeigentrue/false
ShtrvmittwobDurchschnittsgeschwindigkeit unter Berücksichtigung von Pausen in Trackinfo anzeigentrue/false
ShtrvmittpaceDurchschnittsgeschwindigkeit in Min/km in Trackinfo anzeigentrue/false
ShtrvmittpacewobDurchschnittsgeschwindigkeit in Min/km unter Berücksichtigung von Pausen in Trackinfo anzeigentrue/false
ShtrlatlonGeokoordinaten des Trackpunkts anzeigentrue/false
ArrowtrackAnzeigen eines Pfeils über dem Track, der die Bewegungsrichtung anzeigttrue/false
ArrowtrackcolFarbe des Pfeils, wenn leer wird Trackfarbe genommen"#rgb"/""
Arrowsymbol
(nur osm)
Symbol des Pfeils"➤"
ShtrstartMarkierung am Trackanfangtrue/false
ShtrzielMarkierung am Trackendetrue/false
TrcolmodTracks in Abhängigkeit von Höhe ("h"), Steigung ("s"), Geschwindigkeit ("v"), Trittfrequenz ("cad") oder Herzfrequenz ("hr") farbcodieren"h"/"s"/"v"/
"hr"/"cad"/""
Trackmarker
(nur osm)
Abstand zwischen den Markern in km. Leer: kein Marker.""
Routen
ShrtstartMarkierung am Routenanfangtrue/false
ShrtzielMarkierung am Routenendetrue/false
ShrtcmtInhalt des cmt-Feldes in Routeninfo anzeigentrue/false
ShrtdescInhalt des desc-Feldes in Routeninfo anzeigentrue/false
ArrowrouteAnzeigen eines Pfeils über der Route, der die Bewegungsrichtung anzeigttrue/false
ArrowroutecolFarbe des Pfeils, wenn leer wird Trackfarbe genommen"#rgb"
Arrowsymbol
(nur osm)
Symbol des Pfeils"➤"
Routemarker
(nur osm)
Abstand zwischen den Markern in km. Leer: kein Marker.""
Profile
ScalingVorgabe der Min- und Maxwerte in den Profildiagrammen. Siehe Text.
Farben der Profilgrafik:
PlotframecolRahmenfarbe"black"
PlotgridcolGitterfarbe"gray"
PlotlabelcolFarbe der Achsenbeschriftung"black"
PlotmarkercolFarbe des Markers in der Profilgrafik"black"
ProfilfillopacSättigung der Farbe unter der Profilkurve0 bis 1

Mit der Seite ShowGPX können Sie unter Einstellungen die Wirkung der Steuervariablen testen.

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 hidden 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" oder das Attribut "hidden" 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

Lokaler Betrieb ohne Server

Mit einem Update Mitte 2019 hat der Firefox als letzter Browser den Zugriff von lokalem HTML auf lokale Dateien unterbunden. Daher funktionieren die Beispiele in der ZIP-Datei nur noch, wenn sie über einen Web-Server aufgerufen werden. Abhilfe liefert beim Firefox eine Konfigurationsänderung:

Welche Risiken damit verbunden sind, kann ich aber nicht abschätzen.

API Keys

Wenn Sie die Google-Maps-Version (Mapapi="gm") verwenden, benötigen Sie einen Google Maps API Key und evtl. auch einen Key für die OSM Cycle und OSM Landscape. Wenn Sie die Leaflet-Version (Default) verwenden, benötigen Sie keinen Key bzw. evtl. den Key für OSM Cycle, OSM Landscape oder OSM Outdoor von Thunderforest.

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

OSM-Karten und das Leaflet-API verlangen keinen API-Key. Nur die die Karten OSM Cycle, OSM Landscape und OSM Outdoors 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";
// Key für OSM Outdoors
JB.GPX2GM.OSM_Outdoors_Api_Key = "hierDenKeyEintragen";

Wenn kein Key eingetragen ist, wird die entsprechende Karte nicht angeboten.

Datenschutz

In der Leaflet-Version werden beim Aufrufen der Seite Kartenbilder von openstreetmap.de, openstreetmap.org, www.arcgis.com, opentopomap.org und evtl. auch von thunderforest.com geladen.

In der Google-Maps-Version werden zusätzlich noch Scripte und Karten von Google 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.

Rechtliches

Der GPX-Viewer steht unter der Lizenz CC BY-NC-SA 4.0 (Namensnennung - Nicht-kommerziell - Weitergabe unter gleichen Bedingungen 4.0 International) (License Deed, Lizenzvertrag). Sollten Sie eine Nutzung beabsichtigen, die über die gewährte Lizenz hinausgeht (z.B. Nutzung auf kommerzielle Seiten), nehmen Sie bitte mit mir Kontakt auf.

Das Script greift auf das Leaflet-API bzw. auf das Google Maps API zu. Seine Funktion hängt damit von der Bereitstellung dieser Dienste ab. Die rechtlichen Bestimmungen von Leaflet und 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.

Wenn Sie mein Projekt mit einer kleinen Spende unterstützen möchten, können sie das gerne über Paypal.me tun.