CINXE.COM

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="GPS, GPX, GPX Viewer, Google Maps, OSM, Höhenprofil, Steigungsprofil, Geschwindigkeitsprofil, Cadenzprofil, Herzfrequenzprofil"> <meta name="description" content="Tracks, Routen und Wegpunkte aus einer GPX-Datei in Google Maps oder OSM mit Höhen-, Steigungs-, Geschwindigkeits-, Cadenz- und Herzfrequenzprofil auf der eigenen Homepage anzeigen."> <link rel="canonical" href="https://www.j-berkemeier.de/GPXViewer/"> <title>GPX Viewer</title> <link rel="stylesheet" href="../jb.css" type="text/css"> <style> header, section, footer, #Inhalt { width:52em; max-width:100% } footer { border-top: 1px solid #000040 } pre { border:1px solid #5050ff; color:#000000; margin:0; padding:0 10px 0 10px; white-space: pre-wrap; word-wrap: break-word; background-color:#e0e0ff; background-image: -webkit-linear-gradient(top,#e0e0ff 50%,#d0d0f0 50%); background-image: -moz-linear-gradient(top,#e0e0ff 50%,#d0d0f0 50%); background-image: -ms-linear-gradient(top,#e0e0ff 50%,#d0d0f0 50%); background-image: -o-linear-gradient(top,#e0e0ff 50%,#d0d0f0 50%); background-image: linear-gradient(to bottom,#e0e0ff 50%,#d0d0f0 50%); background-position: 0 0; background-repeat: repeat; background-size: 1rem 3.6rem; } pre code { font-family:Courier,monospace !important; font-size: 0.9rem !important; line-height: 1.8rem !important; } p code { font-size:120% } .defval { text-decoration:underline } ul { padding-left:1em;margin-left:1em; margin-bottom:1em } ul ul { padding-left:0em;margin-left:1em } ul ul ul { margin-bottom:0 } li { padding-left:0em;margin-left:0em } li strong { line-height:2em } .tabelle td { padding:0.2em 0.5em; vertical-align:top } section img { float:right;margin-right:1em; margin-left:1em; } section a, header a, aside a { font-weight:bold } img { max-width:100% } @media screen and (min-width:71em) and (min-height:41em) { #Inhalt { position:fixed; left:55em; top:11em; width:15em } #Inhalt h2 { text-align:center } } @media screen and (min-width:71em) { aside { position:fixed;top:2.5em;left:57em;text-align:right;width:12em } } @media screen and (max-width:50em) { .restab, .restab tr, .restab th, .restab td { display:block; border: none } .restab tr { border:1px solid #5050ff } .restab th { display: none } .restab th[colspan="3"] { display: block } .restab tbody td:nth-child(1)::before { content: var(--colheader1); font-weight: bold; } .restab tbody td:nth-child(2)::before { content: var(--colheader2); font-weight: bold; } .restab tbody td:nth-child(3)::before { content: var(--colheader3); font-weight: bold; } /*pre { overflow-x: scroll }*/ } [title]:focus::after { content: attr(title); position: absolute; margin-top: 2em; margin-left: -6.5em; padding: .2em; font-size: 0.8em; border: 1px solid black; background-color: #fff; color: #000; white-space:nowrap; } #iconoverview { margin:0; } #iconoverview > figure { display: inline-block; margin: .3em; padding: .1em; text-align: center; vertical-align: text-top; text-transform: capitalize } #iconoverview > figure img { float: none; margin: 0 } .link_to_current_section { list-style-type: "► "; } </style> <script> document.addEventListener("DOMContentLoaded", function() { const observer = new IntersectionObserver(function(entries) { entries.forEach(entry => { const linkselector = `#Inhalt [href='#${entry.target.id}']`; const linkelement = document.querySelector(linkselector); if(linkelement) { if(entry.isIntersecting) linkelement.parentNode.classList.add("link_to_current_section"); else linkelement.parentNode.classList.remove("link_to_current_section"); } }); }, { threshold: 0.1 }); document.querySelectorAll("section").forEach(element => observer.observe(element)); }); </script> </head> <body> <a id="skip-link" href="#main">zum Hauptinhalt</a> <nav id="sitenav" aria-labelledby="sitenav-label"> <h2 id="sitenav-label" class="visually-hidden">Site-Navigation</h2> <details> <summary>Menü</summary> <ul> <li><a href="/">Startseite</a> <li> <details> <summary>Tools</summary> <ul> <li><a href="../Ritzelrechner.html">Ritzelrechner</a></li> <li><a href="../ShowGPX.html">Show GPX</a></li> <li><a href="../Wann_und_wo.html">Wann und wo</a></li> <li><a href="../week-rollover-korrektur.html">Week-Rollover-Fehler korrigieren</a></li> <li><a href="../Energiekostenrechner.html">Energiekostenrechner</a></li> </ul> </details> <li> <details> <summary>Mathematik</summary> <ul> <li><a href="../Spiralen.html">Spiralen</a></li> <li><a href="../LogistischeAbbildung.html">Logistische Abbildung</a></li> <li><a href="../Mandelbrotmenge.html">Mandelbrotmenge</a></li> <li><a href="../Fouriersynthese.html">Fouriersynthese</a></li> <li><a href="../FktPlot.html">Funktionsplot</a></li> <li><a href="../Buchstabenmixer.html">Buchstabenmixer</a></li> </ul> </details> <li><a href="../Sudoku.html">Sudoku</a> <li><a href="../Touren/">Touren</a> <li aria-current="page"> <details> <summary>Scripte</summary> <ul> <li aria-current="page"><a href="#">GPX Viewer</a></li> <li><a href="../TableSort.html">Tabellensortierer</a></li> </ul> </details> <li><a href="../Impressum.html">Impressum</a></li> </ul> </details> </nav> <script src="../menu.js"></script> <header id="main"> <h1 id="intro">GPX Viewer</h1> <p>Mit dem <strong>GPX Viewer</strong> kann man einfach <strong>Tracks</strong>, <strong>Routen</strong> und <strong>Wegpunkte</strong>, die z.B. mit einem GPS-Empfänger aufgenommen wurden, auf einer WWW-Seite darstellen. Die Daten müssen dazu als <strong>GPX</strong>-Datei vorliegen. Zur Anzeige wird die Kartendarstellung von <strong>OpenStreetMap</strong> oder <strong>Google Maps</strong> verwendet. Zusätzlich kann ein <strong>Höhenprofil</strong>, ein <strong>Steigungsprofil</strong>, ein <strong>Geschwindigkeitsprofil</strong>, ein <strong>Cadenzprofil</strong> und ein <strong>Herzfrequenzprofil</strong> der Tracks erstellt werden. Zur Nutzung des Scriptes sind keine Javascriptkenntnisse nötig.</p> <p>Mit der Seite <a href="../ShowGPX.html">Show GPX</a> können Sie sich den Inhalt einer GPX-Datei ohne Upload ansehen und die Möglichkeiten des GPX Viewers austesten.</p> <p><a href="Beispiel4.html"><img src="Beispiel4_800.jpg" alt="Beispiel 4"></a></p> </header> <aside> <p><a href="#Versionen">Aktuelle Version 6.21 vom 29. 1. 2025</a></p> <div id="google_translate_element"><button type="button">Translate by Google</button></div> </aside> <nav id="Inhalt" aria-labelledby="Inhalt_heading"> <h2 id="Inhalt_heading">Inhalt dieser Seite</h2> <ul> <li><a href="#intro">GPX Viewer</a></li> <li><a href="#Beschreibung">Beschreibung</a></li> <li><a href="#Einbinden">Einbinden des Scriptes</a></li> <li><a href="#Einfache">Einfache Variante</a></li> <li><a href="#Voraussetzungen">Voraussetzungen</a></li> <li><a href="#Zusätzliche">Zusätzliche Einflussnahmen auf die Karten</a></li> <li><a href="#Profile">Profile</a></li> <li><a href="#Weitere">Weitere Steuermöglichkeiten/Steuervariablen</a></li> <li><a href="#Bilder">Anzeigen von Bildwegpunkten ohne GPX-Datei</a></li> <li><a href="#Beispiele">Beispiele</a></li> <li><a href="#Links">Links</a></li> <li><a href="#Local">Lokaler Betrieb ohne Server</a></li> <li><a href="#Apikey">API Keys</a></li> <li><a href="#Datenschutz">Datenschutz</a></li> <li><a href="#Versionen">Versionen</a></li> <li><a href="#Rechtliches">Rechtliches</a></li> <li><a href="GPXViewer6.21.zip">Download Version 6.21</a></li> </ul> </nav> <main> <section id="Beschreibung"> <h2>Beschreibung</h2> <p>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.</p> <p>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.</p> <p>Der Inhalt der GPX-Datei wird folgendermaßen behandelt:</p> <ul> <li><strong>Wegpunkte</strong> <ul> <li><img src="Waypoint.jpg" alt="">Normaler Wegpunkt <ul> <li>Wegpunkte werden als Marker angezeigt.</li> <li>Befindet sich der Mauszeiger über dem Wegpunkt, wird der Name des Wegpunktes angezeigt.</li> <li>Bei Klick auf den Wegpunkt wird <ul> <li>der Inhalt des LINK-Feldes ausgewertet und die entsprechende Seite wird im aktuellen Fenster, in einem neuen Fenster oder in einen Popup-Fenster geöffnet, je nach Wert der Steuervariablen Linktarget,</li> <li>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.</li> </ul></li> <li>Für die Wegpunktsymbole wird das SYM-Feld ausgewertet. <ul> <li>Hat das SYM-Feld drei oder weniger Zeichen, werden diese als Wegpunktsymbol genommen.</li> <li>Enthält das SYM-Feld ein Emoji (s. z.B. <a href="https://unicode.org/emoji/charts/full-emoji-list.html">Full Emoji List</a>), wird dieses als Wegpunktsymbol genommen.<br>Das Emoji muss z.B für ein 😀 (U+1f600) so eingebunden werden: <sym>&#x1f600;</sym>, oder direkt <sym>😀</sym>.</li> <li>Wird der Inhalt des SYM-Feldes in der Liste der bekannten Wegpunktsymbole gefunden, wird dieses genommen.</li> <li>Bei unbekanntem Symbol wird das Standardsymbol genommen.</li> <li>Wegpunktsymbole können auch frei definiert werden. Dazu muss das Wegpunktsymbol den gleichen Namen haben, wie in der Script-Definition in der Datei GPX2GM_Defs.js. Hierzu sind allerdings Kenntnisse in Javascript notwendig.</li> </ul> Diese Wegpunktsymbole werden unterstützt: <figure id="iconoverview"></figure> <script src="GM_Utils/GPX2GM_Defs.js"></script> <script> var dontshow = ["DefShadow","Bild","MoveMarker","Cluster","Kreis","CL","Streckenmarker"]; var GPXViewer_Icons = new JB.Icons("GM_Utils/"); var out = document.querySelector("#iconoverview"); for(var icon in GPXViewer_Icons) { if(dontshow.includes(icon)) continue; var img = document.createElement("img"); //img.title = icon; img.alt = "Grafik des Icons " + icon; img.src = GPXViewer_Icons[icon].icon.url; var figure = document.createElement("figure"); var figcaption = document.createElement("figcaption"); figcaption.innerHTML = icon; figure.appendChild(figcaption); figure.appendChild(img); out.appendChild(figure); } </script> </li> </ul></li> <li><img src="Picture-Waypoint.jpg" alt="">Bildwegpunkt <ul> <li>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 <a href="../Wann_und_wo.html">Wann und wo</a> können Bildwegpunkte erstellt werden.</li> <li>Befindet sich der Mauszeiger über dem Wegpunkt, wird ein kleines Vorschaubild angezeigt.</li> <li>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.</li> <li>Bei Klick in das Bild wird der Inhalt des LINK-Feldes ausgewertet und die entsprechende Seite wird im aktuellen Fenster, in einem neuen Fenster oder in einen Popup-Fenster geöffnet, je nach Wert der Steuervariablen Linktarget. (Nur in der OSM-Version)</li> </ul></li> <li>Eng zusammen liegende Wegpunkte können zu einem Wegpunktcluster zusammengefasst werden.</li> </ul></li> <li><img src="Track.jpg" alt=""><strong>Tracks</strong> <ul> <li>Tracks auf der Karte <ul> <li>Tracks werden als farbige Linien angezeigt. Tracksegmente werden nicht unterschieden.</li> <li>Sind mehrere Tracks vorhanden, werden sie in unterschiedlichen Farben (bis zu 10) angezeigt.</li> <li>Es können auch die Farbangaben aus der GPX-Datei verwendet werden. Dieses wird über die Steuervariable "Displaycolor" eingestellt.</li> <li>Befindet sich die Maus über dem Track, ändert sich seine Farbe und es werden Trackinformationen angezeigt.</li> <li>Bei Klick auf den Track wird <ul> <li>der Inhalt des LINK-Feldes ausgewertet und die entsprechende Seite wird im aktuellen Fenster, in einem neuen Fenster oder in einen Popup-Fenster geöffnet, je nach Wert der Steuervariablen Linktarget,</li> <li>oder es werden Trackinformationen angezeigt, wenn das LINK-Feld leer ist.</li> </ul></li> <li>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".</li> <li>Über die Steuervariablen Arrowtrack und Trackmarker (nur Leafletversion) können Richtungspfeile und Streckenmarkierungen über den Track gelegt werden.</li> </ul></li> <li>Tracks als Profil <ul> <li>Je nach Inhalt der GPX-Datei können Höhe, Steigung, Geschwindigkeit, Temperatur, Herz- und Trittfrequenz gegen die zurückgelegte Strecke oder gegen die verstrichene Zeit grafisch dargestellt werden. Auch ein Weg-Zeit-Diagramm ist möglich.</li> <li>Die Steigung wird durch Differenzieren der Höhenwerte nach dem Weg gewonnen. Die Stärke der Glättung kann eingestellt werden.</li> <li>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.</li> <li>Die Farben der Linien in den Plots sind identisch mit denen der Tracks in der Karte.</li> <li>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.</li> <li>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.</li> <li>Wenn bei weniger als 30% der Trackpunkte die Werte für die Höhe, Temperatur, die Herz- oder die Trittfrequenz (Cadenz) fehlen, werden die Werte für die Höhe, Temperatur und den Puls durch Interpolation ermittelt, die fehlenden Werte für die Trittfrequenz werden auf 0 gesetzt.</li> </ul></li> </ul></li> <li><img src="Route.jpg" alt=""><strong>Routen</strong> <ul> <li>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.</li> <li>Sind mehrere Routen vorhanden, werden sie in unterschiedlichen Farben (bis zu 10) angezeigt.</li> <li>Es können auch die Farbangaben aus der GPX-Datei verwendet werden. Dieses wird über die Steuervariable "Displaycolor" eingestellt.</li> <li>Befindet sich die Maus über der Route, ändert sich ihre Farbe und es werden Routeninformationen angezeigt.</li> <li>Bei Klick auf die Route wird <ul> <li>der Inhalt des LINK-Feldes ausgewertet und die entsprechende Seite wird im aktuellen Fenster, in einem neuen Fenster oder in einen Popup-Fenster geöffnet, je nach Wert der Steuervariablen Linktarget,</li> <li>oder es werden Routeninformationen angezeigt, wenn das LINK-Feld leer ist.</li> <li>Über die Steuervariablen Arrowroute und Routemarker (nur Leafletversion) können Richtungspfeile und Streckenmarkierungen über den Track gelegt werden.</li> </ul></li> </ul></li> </ul> </section> <section id="Einbinden"> <h2>Einbinden des Scriptes</h2> <p>Damit Routen und Tracks in die Karte eingezeichnet werden können, sollte die Seite den Dokumententyp "HTML 5" haben und UTF-8 kodiert sein:</p> <pre><code class="notranslate" translate="no"><!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> ...</code></pre> <p>Das Script muss dann folgendermaßen eingebunden werden:</p> <pre><code class="notranslate" translate="no"><script src="GM_Utils/GPX2GM.js"></script></code></pre> <p>Wenn das Script in einem anderen Ordner liegt, muss der Pfad zum Script noch angepasst werden. </p> </section> <section id="Einfache"> <h2>Einfache Variante</h2> <p>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:</p> <pre><code class="notranslate" translate="no"><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></code></pre> <p>"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:</p> <pre><code class="notranslate" translate="no"><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></code></pre> <p>Die Höhen- und Breitenangaben können Sie natürlich an Ihr Layout anpassen.</p> <p>Sie können hinter den Dateinamen noch einen weiteren Steuerparameter angeben. Dabei bedeutet:</p> <table class="tabelle restab" style=" --colheader1: 'Art der Karte: '; --colheader2: 'Klasse: '; "> <thead> <tr> <th>Art der Karte</th> <th>Klasse</th> </tr> </thead> <tbody> <tr> <td>Kartendarstellung:<br>(nur mit Google Maps API)</td> <td class="notranslate" translate="no">class="gpxview:Name_der_GPX-Datei.gpx:Karte"</td> </tr> <tr> <td>Satellitenfoto:</td> <td class="notranslate" translate="no">class="gpxview:Name_der_GPX-Datei.gpx:Satellit" <br />class="gpxview:Name_der_GPX-Datei.gpx"</td> </tr> <tr> <td>Beides:<br>(nur mit Google Maps API)</td> <td class="notranslate" translate="no">class="gpxview:Name_der_GPX-Datei.gpx:Hybrid"</td> </tr> <tr> <td>Oberflächenansicht:<br>(nur mit Google Maps API)</td> <td class="notranslate" translate="no">class="gpxview:Name_der_GPX-Datei.gpx:Oberflaeche"</td> </tr> <tr> <td>Open Street Map (Mapnik):</td> <td class="notranslate" translate="no">class="gpxview:Name_der_GPX-Datei.gpx:OSM"</td> </tr> <tr> <td>Open Street Map (Deutscher Stil):</td> <td class="notranslate" translate="no">class="gpxview:Name_der_GPX-Datei.gpx:OSMDE"</td> </tr> <tr> <td>Open Street Map (Cycle Map):<br>benötigt Key</td> <td class="notranslate" translate="no">class="gpxview:Name_der_GPX-Datei.gpx:OSM_Cycle"</td> </tr> <tr> <td>Open Street Map (Landscape):<br>benötigt Key</td> <td class="notranslate" translate="no">class="gpxview:Name_der_GPX-Datei.gpx:OSM_Landscape"</td> </tr> <tr> <td>Open Street Map (Outdoors):<br>benötigt Key<br>(nur in Leaflet-Version)</td> <td class="notranslate" translate="no">class="gpxview:Name_der_GPX-Datei.gpx:OSM_Outdoors"</td> </tr> <tr> <td>Open Street Map (Open Topo):</td> <td class="notranslate" translate="no">class="gpxview:Name_der_GPX-Datei.gpx:Open_Topo"</td> </tr> <tr> <td>TopPlusOpen:<br>(nur in Leaflet-Version)</td> <td class="notranslate" translate="no">class="gpxview:Name_der_GPX-Datei.gpx:TopPlusOpen"</td> </tr> <tr> <td>Open Sea Map:<br>(nur in Leaflet-Version)</td> <td class="notranslate" translate="no">class="gpxview:Name_der_GPX-Datei.gpx:Open_Sea"</td> </tr> <tr> <td>Hiking:<br>(nur in Leaflet-Version)</td> <td class="notranslate" translate="no">class="gpxview:Name_der_GPX-Datei.gpx:Hiking"</td> </tr> <tr> <td>Cycling:<br>(nur in Leaflet-Version)</td> <td class="notranslate" translate="no">class="gpxview:Name_der_GPX-Datei.gpx:Cycling"</td> </tr> <tr> <td>Keine Karte:<br>(nur in Leaflet-Version)</td> <td class="notranslate" translate="no">class="gpxview:Name_der_GPX-Datei.gpx:Keine_Karte"</td> </tr> </tbody> </table> <p>Siehe hierzu die <a href="Beispiel1.html">Beispielseite 1</a>.</p> <h3>Anmerkung</h3> <p>Ich empfehle, HTML-Seite, GPX-Datei und eventuelle Fotos im selben Ordner abzulegen.</p> </section> <section id="Voraussetzungen"> <h2>Voraussetzungen</h2> <ul> <li>Eine GPX-Datei mit den Tracks, den Routen oder den Wegpunkten.</li> <li>Die Scripte, die Bilder für die Icons und den Marker sowie die Beispiele als ZIP-Archiv <a href="GPXViewer6.21.zip">GPXViewer6.21.zip</a>. 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).</li> </ul> </section> <section id="Zusätzliche"> <h2>Zusätzliche Einflussnahmen auf die Karten</h2> <img src="Button.png" alt=""> <p>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:</p> <pre><code class="notranslate" translate="no"><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></code></pre> <p>Die Befehle sind folgendermaßen aufgebaut:</p> <pre><code class="notranslate" translate="no">      gpxview:id_der_Karte:Befehl:optionale_Parameter</code></pre> <p>Dem div, in dem die Karte angezeigt werden soll, muss eine id gegeben werden. <br/>Siehe hierzu die <a href="Beispiel2.html">Beispielseite 2</a>.</p> <p>Ebenso können neue Routen / Tracks / Wegpunkte mit entsprechendem Kartenausschnitt in das Kartenfenster über ein Auswahlmenü geladen werden (<a href="Beispiel2b.html">Beispielseite 2b</a>):</p> <pre><code class="notranslate" translate="no"><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></code></pre> <p>Außerdem können auch mehrere Karten auf einer Seite angezeigt werden. Siehe hierzu die <a href="Beispiel3.html">Beispielseite 3</a> und die <a href="Beispiel3b.html">Beispielseite 3b</a>.</p> </section> <section id="Profile"> <h2>Profile</h2> <p>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:</p> <img src="Profil.png" alt="Profil"> <table class="tabelle restab" style=" --colheader1: 'ID des DIVs: '; --colheader2: 'Funktion: '; "> <thead> <tr><th>ID des DIVs</th><th>Funktion</th></tr> </thead> <tbody> <tr><td class="notranslate" translate="no">map</td><td>Karte / Satellitenbild</td></tr> <tr><td class="notranslate" translate="no">map_hp</td><td>Höhenprofil gegen Weg</td></tr> <tr><td class="notranslate" translate="no">map_hpt</td><td>Höhenprofil gegen Zeit</td></tr> <tr><td class="notranslate" translate="no">map_sp</td><td>Steigungsprofil gegen Weg</td></tr> <tr><td class="notranslate" translate="no">map_spt</td><td>Steigungsprofil gegen Zeit</td></tr> <tr><td class="notranslate" translate="no">map_vp</td><td>Geschwindigkeitsprofil gegen Weg</td></tr> <tr><td class="notranslate" translate="no">map_vpt</td><td>Geschwindigkeitsprofil gegen Zeit</td></tr> <tr><td class="notranslate" translate="no">map_hrp</td><td>Herzfrequenzprofil gegen Weg</td></tr> <tr><td class="notranslate" translate="no">map_hrpt</td><td>Herzfrequenzprofil gegen Zeit</td></tr> <tr><td class="notranslate" translate="no">map_cadp</td><td>Trittfrequenzprofil gegen Weg</td></tr> <tr><td class="notranslate" translate="no">map_cadpt</td><td>Trittfrequenzprofil gegen Zeit</td></tr> <tr><td class="notranslate" translate="no">map_atempp</td><td>Temperaturprofil gegen Weg</td></tr> <tr><td class="notranslate" translate="no">map_atemppt</td><td>Temperaturprofil gegen Zeit</td></tr> <tr><td class="notranslate" translate="no">map_wpt</td><td>Weg gegen Zeit</td></tr> <tr><td class="notranslate" translate="no">map_profiles</td><td>Ein die Profile umschließendes Element für die Skalierung</td></tr> </tbody> </table> <p>Um z.B. alle Profile anzeigen zu können, muss der HTML-Code folgendermaßen aussehen:</p> <pre><code class="notranslate" translate="no"><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></code></pre> <p>Die Karte und die Profile können sich an beliebigen Stellen der Seite befinden. Siehe hierzu auch die <a href="Beispiel4.html">Beispielseite 4</a> mit Profilen gegen den Weg und die <a href="Beispiel5.html">Beispielseite 5</a> mit Profilen gegen die Zeit.</p> <p>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 <a href="Beispiel4.html">Beispiel 4</a>.</p> </section> <section id="Weitere"> <h2>Weitere Steuermöglichkeiten</h2> <p>Ü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.</p> <p>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.</p> <p>Ü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.</p> <h3>Liste der Steuervariablen</h3> <table class="tabelle restab" style=" --colheader1: 'Variable: '; --colheader2: 'Bedeutung: '; --colheader3: 'Wert, Defaultwert unterstrichen: '; "> <thead> <tr><th>Variable</th><th>Bedeutung</th><th>Wert, <span class="defval">Defaultwert unterstrichen</span></th></tr> </thead> <tbody> <tr><td class="notranslate" translate="no">Bestaetigung</td><td>Abfrage, ob dem Einbinden externer Inhalte (Kartenbilder und evtl. auch Scripte) zugestimmt wird</td><td><span class="defval">true</span>/false</td></tr> <tr><td class="notranslate" translate="no">Mapapi</td><td>Api, mit dem die Karte angezeigt wird.<br>Openstreetmaps mit Leaflet: osm,<br>Google Maps und OSM mit dem Google Maps API: gm</td><td><span class="defval">"osm"</span>/"gm" </td></tr> <tr><th colspan=3>Verarbeitung der GPX-Datei</th></tr> <tr><td class="notranslate" translate="no">Tracks_verbinden</td><td>Tracks in Profilgrafik verbinden</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Tracks_dateiuebergreifend_verbinden</td><td>Tracks in Profilgrafik dateiübergreifend verbinden</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Tracksort</td><td>Tracks in Profilgrafik nach Startzeit sortiert anordnen</td><td><span class="defval">true</span>/false</td></tr> <tr><td class="notranslate" translate="no">Displaycolor</td><td>Linienfarbe aus GPX-Datei übernehmen (z.Zt. nur Garmin)</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Laengen3d</td><td>Bei Entfernungsberechnung auch Höhenunterschiede berücksichtigen</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Tkorr</td><td>Anzeige der Zeit nach der Zeitzone des Browsers</td><td><span class="defval">true</span>/false</td></tr> <tr><td class="notranslate" translate="no">Tdiff</td><td>Zeitoffset für Zeitanzeige im Infofenster in Stunden</td><td><span class="defval">0</span></td></tr> <tr><td class="notranslate" translate="no">Usegpxbounds</td><td>Skalierung nach dem Bounds-Tag</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Readspeed</td><td>Speed-Tag auswerten, wenn vorhanden</td><td><span class="defval">true</span>/false</td></tr> <tr><td class="notranslate" translate="no">Speedfaktor</td><td>Eichfaktor für den Wert des Speed-Tags</td><td><span class="defval">3.6</span></td></tr> <tr><td class="notranslate" translate="no">Unwraplon</td><td>Lon-Werte beim Übergang über die 180°-Grenze korrigieren.</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Hglatt</td><td>Höhenprofil für die Anzeige glätten</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Hglattlaen</td><td>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</td><td><span class="defval">500</span></td></tr> <tr><td class="notranslate" translate="no">Vglatt</td><td>Geschwindigkeitsprofil glätten</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Vglattlaen</td><td>Länge des Glättungsintervalls für das Geschwindigkeitsprofil in Meter</td><td><span class="defval">100</span></td></tr> <tr><td class="notranslate" translate="no">Hfaktor</td><td>Eichfaktor für die Höhe</td><td><span class="defval">1</span></td></tr> <tr><td class="notranslate" translate="no">Sfaktor</td><td>Eichfaktor für die Steigung</td><td><span class="defval">1</span></td></tr> <tr><td class="notranslate" translate="no">Vfaktor</td><td>Eichfaktor für die Geschwindigkeit</td><td><span class="defval">1</span></td></tr> <tr><td class="notranslate" translate="no">Wfaktor</td><td>Eichfaktor für die Strecke</td><td><span class="defval">1</span></td></tr> <tr><td class="notranslate" translate="no">Tfaktor</td><td>Eichfaktor für die Temperatur</td><td><span class="defval">1</span></td></tr> <tr><td class="notranslate" translate="no">Toffset</td><td>Eichoffset für die Temperatur</td><td><span class="defval">0</span></td></tr> <tr><td class="notranslate" translate="no">Bildpfad</td><td>Pfad zum Bild</td><td><span class="defval">""</span></td></tr> <tr><td class="notranslate" translate="no">Gpxpfad</td><td>Pfad zur GPX-Datei</td><td><span class="defval">""</span></td></tr> <tr><th colspan=3>Anzeige</th></tr> <tr><td class="notranslate" translate="no">Scrollwheelzoom</td><td>Zoomen mit Scrollrad an/aus</td><td><span class="defval">true</span>/false</td></tr> <tr><td class="notranslate" translate="no">Fullscreenbutton</td><td>Blendet oben rechts in der Karte ein Vollbildsymbol ein, mit dem sie auf volle Größe vergrößert werden kann</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Trafficbutton<br>(nur mit Google Maps API)</td><td>Zeigt einen Button zum Einblenden des Trafficlayers auf Google-Karten</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Trafficonload</td><td>Zeigt den Trafficlayers sofort an</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Currentlocationbutton</td><td>Zeigt einen Button zum Anzeigen der aktuellen Position und der Bewegungsrichtung</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Showmaptypecontroll</td><td>Zeigt den Kartenwähler an</td><td><span class="defval">true</span>/false</td></tr> <tr><td class="notranslate" translate="no">Legende</td><td>Legende an/aus</td><td><span class="defval">true</span>/false</td></tr> <tr><td class="notranslate" translate="no">Legende_fnm</td><td>Dateinamen in Legende zeigen/nicht zeigen</td><td><span class="defval">true</span>/false</td></tr> <tr><td class="notranslate" translate="no">Legende_fnm_lm</td><td>Hinter Dateinamen in Legende Datum (d) oder Zeit (t) der letzten Änderung zeigen </td><td><span class="defval">""</span>/"d"/"t"/"dt"</td></tr> <tr><td class="notranslate" translate="no">Legende_rr</td><td>Höhenmeter in Legende zeigen/nicht zeigen</td><td><span class="defval">true</span>/false</td></tr> <tr><td class="notranslate" translate="no">Legende_trk</td><td>Trackanzeige beim Öffnen der Seite an/aus</td><td><span class="defval">true</span>/false</td></tr> <tr><td class="notranslate" translate="no">Legende_rte</td><td>Routenanzeige beim Öffnen der Seite an/aus</td><td><span class="defval">true</span>/false</td></tr> <tr><td class="notranslate" translate="no">Legende_wpt</td><td>Wegpunktanzeige beim Öffnen der Seite an/aus</td><td><span class="defval">true</span>/false</td></tr> <tr><td class="notranslate" translate="no">Legende_info</td><td>Track- und Routeninfos in der Legendenzeile anzeigen</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Trackover</td><td>Track- oder Routeninfo anzeigen, wenn Maus über Linie</td><td><span class="defval">true</span>/false</td></tr> <tr><td class="notranslate" translate="no">Trackclick</td><td>Track- oder Routeninfo anzeigen, wenn Mausklick auf Linie</td><td><span class="defval">true</span>/false</td></tr> <tr><td class="notranslate" translate="no">Tcols</td><td>Trackfarben</td><td><span class="defval">"#ff0000,#00ff00,#0000ff,#eeee00,<br>#ff00ff,#00ffff,#000000"</span></td></tr> <tr><td class="notranslate" translate="no">Rcols</td><td>Routenfarben</td><td><span class="defval">"#800000,#008000,#000080,#808000,<br>#800080,#008080,#808080"</span></td></tr> <tr><td class="notranslate" translate="no">Ocol</td><td>Farbe von Track oder Route bei Mouseover. Bei "" wird die Track- bzw. Routenfarbe genommen (nur osm)</td><td><span class="defval">"#000"</span></td></tr> <tr><td class="notranslate" translate="no">Owidth</td><td>Linienstärke Track und Route bei Mouseover</td><td><span class="defval">3</span></td></tr> <tr><td class="notranslate" translate="no">Twidth</td><td>Linienstärke Track</td><td><span class="defval">2</span></td></tr> <tr><td class="notranslate" translate="no">Rwidth</td><td>Linienstärke Route</td><td><span class="defval">2</span></td></tr> <tr><td class="notranslate" translate="no">Topac</td><td>Transparenz Trackfarbe</td><td><span class="defval">0.8</span></td></tr> <tr><td class="notranslate" translate="no">Ropac</td><td>Transparenz Routenfarbe</td><td><span class="defval">0.8</span></td></tr> <tr><td class="notranslate" translate="no">Doclang</td><td>Sprache des Dokuments</td><td><span class="defval">"auto"</span>/"de"/"en"/"fr"/"es"/"it"/"nl"</td></tr> <tr><td class="notranslate" translate="no">Unit</td><td>Längeneinheiten in m/km (si), mile/ft (en us), NM/ft (air), sm/ft (water), Temperatur in °F (us)</td><td><span class="defval">"si"</span>/"us"/"en"/"air"/"water"</td></tr> <tr><td class="notranslate" translate="no">Linktarget</td><td>Steuert, wie Links geöffnet weden:<br>"": im aktuellen Fenster, <br>"popup": in einem Popup-Fenster, <br>beliebiger String: in einem neuen Fenster/Tab, der String wird als target-Attribut verwendet</td><td><span class="defval">""</span>/"popup"/"targetname"</td></tr> <tr><th colspan=3>Wegpunkte</th></tr> <tr><td class="notranslate" translate="no">Shwpname</td><td>Inhalt des name-Feldes in Wegpunktinfo anzeigen</td><td><span class="defval">true</span>/false</td></tr> <tr><td class="notranslate" translate="no">Shwpcmt</td><td>Inhalt des cmt-Feldes in Wegpunktinfo anzeigen</td><td><span class="defval">true</span>/false</td></tr> <tr><td class="notranslate" translate="no">Shwpdesc</td><td>Inhalt des desc-Feldes in Wegpunktinfo anzeigen</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Shwptime</td><td>Zeit in Wegpunktinfo anzeigen</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Shwplatlon</td><td>Geokoordinaten in Wegpunktinfo anzeigen</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Shwpshadow</td><td>Wegpunkticons mit Schatten anzeigen</td><td><span class="defval">true</span>/false</td></tr> <tr><td class="notranslate" translate="no">Shwptooltip<br>(nur osm)</td><td>Inhalt des name-Feldes über Wegpunkt anzeigen</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Wpcluster</td><td>Wegpunkte, die zu dicht zusammen liegen, als Cluster anzeigen</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Bildwegpunkticon</td><td>Iconname für Bildwegpunkte, bei "" wird Iconname aus GPX-Datei verwendet</td><td><span class="defval">"Bild"</span></td></tr> <tr><td class="notranslate" translate="no">Groesseminibild</td><td>Größe des Vorschaubildes bei Bildwegpunkten</td><td><span class="defval">60</span></td></tr> <tr><td class="notranslate" translate="no">Defaulticon</td><td>Icon, das gezeigt wird, wenn in der GPX-Datei kein oder ein unbekanntes Icon gewählt wurde.</td><td>Iconname/<span class="defval">""</span></td></tr> <tr><th colspan=3>Tracks</th></tr> <tr><td class="notranslate" translate="no">Shtrname</td><td>Inhalt des name-Feldes in Trackinfo anzeigen</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Shtrcmt</td><td>Inhalt des cmt-Feldes in Trackinfo anzeigen</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Shtrdesc</td><td>Inhalt des desc-Feldes in Trackinfo anzeigen</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Shtrx</td><td>Strecke in Trackinfo anzeigen</td><td><span class="defval">true</span>/false</td></tr> <tr><td class="notranslate" translate="no">Shtrcad</td><td>Trittfrequenz in Trackinfo anzeigen</td><td><span class="defval">true</span>/false</td></tr> <tr><td class="notranslate" translate="no">Shtrhr</td><td>Puls in Trackinfo anzeigen</td><td><span class="defval">true</span>/false</td></tr> <tr><td class="notranslate" translate="no">Shtratemp</td><td>Temperatur in Trackinfo anzeigen</td><td><span class="defval">true</span>/false</td></tr> <tr><td class="notranslate" translate="no">Shtrt</td><td>Zeit in Trackinfo anzeigen</td><td><span class="defval">true</span>/false</td></tr> <tr><td class="notranslate" translate="no">Shtrtwob</td><td>Zeit in Bewegung in Trackinfo anzeigen</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Shtrtabs</td><td>Absolute 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)</td><td>"k", "p", "kp"/<span class="defval">""</span></td></tr> <tr><td class="notranslate" translate="no">Shtrtges</td><td>Gesamtzeit des Tracks anzeigen</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Shtrtgeswob</td><td>Gesamtzeit in Bewegung anzeigen</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Movevmin</td><td>Mindestgeschwindigkeit für Bewegung</td><td><span class="defval">1</span></td></tr> <tr><td class="notranslate" translate="no">Shtrv</td><td>Geschwindigkeit in Trackinfo anzeigen</td><td><span class="defval">true</span>/false</td></tr> <tr><td class="notranslate" translate="no">Shtrpace</td><td>Pace in Trackinfo anzeigen</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Shtrh</td><td>Höhe in Trackinfo anzeigen</td><td><span class="defval">true</span>/false</td></tr> <tr><td class="notranslate" translate="no">Shtrrr</td><td>Kumulierte Steigungsmeter in Trackinfo anzeigen</td><td><span class="defval">true</span>/false</td></tr> <tr><td class="notranslate" translate="no">Shtrs</td><td>Steigung in Trackinfo anzeigen</td><td><span class="defval">true</span>/false</td></tr> <tr><td class="notranslate" translate="no">Shtrvmitt</td><td>Durchschnittsgeschwindigkeit in Trackinfo anzeigen</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Shtrvmittwob</td><td>Durchschnittsgeschwindigkeit unter Berücksichtigung von Pausen in Trackinfo anzeigen</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Shtrvmittpace</td><td>Durchschnittsgeschwindigkeit in Min/km in Trackinfo anzeigen</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Shtrvmittpacewob</td><td>Durchschnittsgeschwindigkeit in Min/km unter Berücksichtigung von Pausen in Trackinfo anzeigen</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Shtrlatlon</td><td>Geokoordinaten des Trackpunkts anzeigen</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Arrowtrack</td><td>Anzeigen eines Pfeils über dem Track, der die Bewegungsrichtung anzeigt</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Arrowtrackcol</td><td>Farbe des Pfeils, wenn leer wird Trackfarbe genommen</td><td>"#rgb"/<span class="defval">""</span></td></tr> <tr><td class="notranslate" translate="no">Arrowsymbol<br>(nur osm)</td><td>Symbol des Pfeils</td><td><span class="defval">"➤"</span></td></tr> <tr><td class="notranslate" translate="no">Shtrstart</td><td>Markierung am Trackanfang</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Shtrziel</td><td>Markierung am Trackende</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Trcolmod</td><td>Tracks in Abhängigkeit von Höhe ("h"), Steigung ("s"), Geschwindigkeit ("v"), Trittfrequenz ("cad") oder Herzfrequenz ("hr") farbcodieren</td><td>"h"/"s"/"v"/<br>"hr"/"cad"/<span class="defval">""</span></td></tr> <tr><td class="notranslate" translate="no">Trackmarker<br>(nur osm)</td><td>Abstand zwischen den Markern in km. Leer: kein Marker.</td><td><span class="defval">""</span></td></tr> <tr><th colspan=3>Routen</th></tr> <tr><td class="notranslate" translate="no">Shrtstart</td><td>Markierung am Routenanfang</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Shrtziel</td><td>Markierung am Routenende</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Shrtcmt</td><td>Inhalt des cmt-Feldes in Routeninfo anzeigen</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Shrtdesc</td><td>Inhalt des desc-Feldes in Routeninfo anzeigen</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Arrowroute</td><td>Anzeigen eines Pfeils über der Route, der die Bewegungsrichtung anzeigt</td><td>true/<span class="defval">false</span></td></tr> <tr><td class="notranslate" translate="no">Arrowroutecol</td><td>Farbe des Pfeils, wenn leer wird Trackfarbe genommen</td><td>"#rgb"</td></tr> <tr><td class="notranslate" translate="no">Arrowsymbol<br>(nur osm)</td><td>Symbol des Pfeils</td><td><span class="defval">"➤"</span></td></tr> <tr><td class="notranslate" translate="no">Routemarker<br>(nur osm)</td><td>Abstand zwischen den Markern in km. Leer: kein Marker.</td><td><span class="defval">""</span></td></tr> <tr><th colspan=3>Profile</th></tr> <tr><td class="notranslate" translate="no">Scaling</td><td colspan="2">Vorgabe der Min- und Maxwerte in den Profildiagrammen. Siehe Text.</td></tr> <tr><td class="notranslate" translate="no"></td><td>Farben der Profilgrafik:</td><td></td></tr> <tr><td class="notranslate" translate="no">Plotframecol</td><td>Rahmenfarbe</td><td><span class="defval">"black"</span></td></tr> <tr><td class="notranslate" translate="no">Plotgridcol</td><td>Gitterfarbe</td><td><span class="defval">"gray"</span></td></tr> <tr><td class="notranslate" translate="no">Plotlabelcol</td><td>Farbe der Achsenbeschriftung</td><td><span class="defval">"black"</span></td></tr> <tr><td class="notranslate" translate="no">Plotmarkercol</td><td>Farbe des Markers in der Profilgrafik</td><td><span class="defval">"black"</span></td></tr> <tr><td class="notranslate" translate="no">Profilfillopac</td><td>Sättigung der Farbe unter der Profilkurve</td><td><span class="defval">0</span> bis 1</td></tr> </tbody> </table> <p>Mit der Seite <a href="../ShowGPX.html">ShowGPX</a> können Sie unter Einstellungen die Wirkung der Steuervariablen testen.</p> </section> <section id="Bilder"> <h2>Anzeigen von Bildwegpunkten und Wegpunkten ohne GPX-Datei</h2> <p>Wenn die Geokoordinaten von Bildpunkten bekannt sind (s. auch <a href="../Wann_und_wo.html">Wann_und_wo</a>), 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:</p> <pre><code class="notranslate" translate="no"><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>   <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" />  </div></code></pre> <p>Im Map-Div darf auch der Name einer GPX-Datei angegeben werden, muss aber nicht. Siehe hierzu auch <a href="Beispiel11/Beispiel11.html">Beispiel 11</a>. 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=..."</p> <p>Ebenso können auch Wegpunkte angezeigt werden (<a href="Beispiel11/Beispiel11b.html">Beispiel 11b</a>):</p> <pre><code class="notranslate" translate="no"><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>  </div></code></pre> </section> <section id="Beispiele"> <h2>Beispiele</h2> <ul> <li><a href="Beispiel1.html">Beispiel 1</a><br>Nur eine Karte.</li> <li><a href="Beispiel2.html">Beispiel 2</a><br>Weitere Karten mit Button anzeigen.</li> <li><a href="Beispiel2b.html">Beispiel 2b</a><br>Weitere Karten mit Auswahlmenü anzeigen. Mit Richtungspfeilen.</li> <li><a href="Beispiel3.html">Beispiel 3</a><br>Wie 2, mit mehreren Karten. </li> <li><a href="Beispiel3b.html">Beispiel 3b</a><br>Wie 2b, mit mehreren Karten.</li> <li><a href="Beispiel4.html">Beispiel 4</a><br>Karte und Profile gegen Weg.</li> <li><a href="Beispiel4_en.html">Example 4</a><br>English version of Beispiel 4 with mile and ft as units of length.</li> <li><a href="Beispiel4_fr.html">Exemple 4</a><br>Version française de l'exemple 4.</li> <li><a href="Beispiel4_es.html">Ejemplo 4</a><br>Versión española del ejemplo 4.</li> <li><a href="Beispiel4_it.html">Esempio 4</a><br>Versione italiana dell'esempio 4.</li> <li><a href="Beispiel4_nl.html">Voorbeeld 4</a><br>Nederlandse versie van voorbeeld 4.</li> <li><a href="Beispiel4b.html">Beispiel 4b</a><br>Wie 4, mit farbcodiertem Track.</li> <li><a href="Beispiel5.html">Beispiel 5</a><br>Karte und Profile gegen Zeit.</li> <li><a href="Beispiel5b.html">Beispiel 5b</a><br>Karte und Profile gegen absolute Zeit.</li> <li><a href="Beispiel6.html">Beispiel 6</a><br>Wie 4, mit mehreren GPX-Dateien.</li> <li><a href="Beispiel7.html">Beispiel 7</a><br>Drei kleine Karten, die vergrößert werden können.</li> <li><a href="Beispiel9.html">Beispiel 9</a><br>Wegpunktcluster.</li> <li><a href="Beispiel10.html">Beispiel 10</a><br>Karten und Profile mit Seemeile und Fuß als Einheiten.</li> <li><a href="Beispiel11/Beispiel11.html">Beispiel 11</a> und <br><a href="Beispiel11/Beispiel11b.html">Beispiel 11b</a> <br>Bildwegpunkte ohne GPX-Datei.</li> <li><a href="Beispiel14.html">Beispiel 14</a><br>Karte ohne GPX-Datei und ohne Wegpunkt.</li> <li>Und was sonst noch möglich ist, hier sind aber Javascriptkenntnisse notwendig: <ul> <li>Verschiedene Möglichkeiten, Bilder zu zeigen: <a href="Foto1.html"> Foto 1</a>, <a href="Foto2.html"> Foto 2</a>, <a href="Foto3.html"> Foto 3</a>, <a href="Foto4.html"> Foto 4</a>, <a href="Foto5.html"> Foto 5</a>, <a href="Beispiel11/Foto6.html"> Foto 6</a>, <a href="Beispiel11/Foto7.html"> Foto 7</a>.</li> <li>Nachträgliches Setzen und Manipulieren von Wegpunkten: <a href="Beispiel8.html">Beispiel 8</a>.</li> <li>Anbieten aller GPX-Dateien in einem Ordner über ein Klappmenü (<a href="Beispiel12.html">Beispiel 12</a>) oder alle laden (<a href="Beispiel12b.html">Beispiel 12b</a>).</li> <li>Nachträgliches Setzen eines Wegpunkts an die aktuelle Position: <a href="Beispiel13.html">Beispiel 13</a>.</li> <li>Synchronisieren eines Videos mit einem Track: <a href="Beispiel15/Beispiel15.html">Beispiel 15</a>.</li> <li><a href="Beispiel4_mit_Events.html">Beispiel mit Events</a>.</li> </ul></li> <li>Bei meinem kleinen <a href="../Touren/">Tourenportal</a> kommt der GPX-Viewer auch zum Einsatz.</li> </ul> </section> <section id="Links"> <h2>Links</h2> <ul> <li><a href="https://leafletjs.com">Leaflet</a></li> <li><a href="https://www.openstreetmap.de/">OpenStreetMap - Deutschland</a></li> <li><a href="https://www.thunderforest.com/">OSM-Keys über Thunderforest</a></li> <li><a href="https://maps.google.de">Google Maps</a></li> <li><a href="https://developers.google.com/maps/documentation/javascript/tutorial?hl=de">Google Maps API</a></li> <li><a href="https://developers.google.com/maps/documentation/javascript/get-api-key">Schlüssel für Google JavaScript API anfordern</a></li> <li><a href="https://de.wikipedia.org/wiki/GPS_Exchange_Format">Wikipediaartikel über das GPS Exchange Format - GPX</a></li> <li><a href="https://www.gpsbabel.org">GPSBabel</a></li> <li><a href="../Wann_und_wo.html">Wann und wo</a> wurde das Foto aufgenommen<br>Erstellen von Bildwegpunkten.</li> <li><a href="../ShowGPX.html">Show GPX</a><br>Inhalt einer GPX-Datei anzeigen, Testseite für die Möglichkeiten des GPX-Viewers.</li> </ul> </section> <section id="Local"> <h2>Lokaler Betrieb ohne Server</h2> <p>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:</p> <ul> <li>about:config öffnen</li> <li>security.fileuri.strict_origin_policy auf false setzen</li> </ul> <p>Welche Risiken damit verbunden sind, kann ich aber nicht abschätzen.</p> </section> <section id="Apikey"> <h2>API Keys</h2> <p>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.</p> <h3>Der Google Maps API Key</h3> <p>Seit einiger Zeit erscheint in der Fehler-, Javascript- oder Browserkonsole die Warnung <code>NoApiKeys</code>. Inzwischen sieht man auch die Meldung <code>Hoppla! Ein Fehler ist aufgetreten. Google Maps wurde auf dieser Seite nicht richtig geladen. Technische Details dazu entnimmst du der JavaScript-Konsole</code> und in der Konsole dann die Fehlermeldung <code>MissingKeyMapError</code>. Abhilfe schafft jetzt nur noch die Beantragung eines API-Keys. In den <a href="https://praxistipps.chip.de/google-maps-api-key-erstellen-so-gehts_94915">Praxistipps von chip.de</a> finden Sie eine Anleitung dazu. Dieser Key muss dann in die Datei "GPX2GM_Defs.js" eingetragen werden:</p> <pre><code class="notranslate" translate="no">// Google Maps API Key JB.GPX2GM.GM_Api_key = "hierDenKeyEintragen";</code></pre> <p>Seit dem 22. 6. 2016 verlangt Google diesen Schlüssel für neu eingebundene Karten. Siehe auch <a href="https://googlegeodevelopers.blogspot.de/2016/06/building-for-scale-updates-to-google.html">Building for Scale: Updates to Google Maps APIs Standard Plan</a>.</p> <h3>API Key für OSM-Karten</h3> <p>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 <a href="https://www.thunderforest.com">Thunderforest</a> beantragen muss. Auch diese Keys müssen in die Datei "GPX2GM_Defs.js" eingetragen werden:</p> <pre><code class="notranslate" translate="no">// 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";</code></pre> <p>Wenn kein Key eingetragen ist, wird die entsprechende Karte nicht angeboten.</p> </section> <section id="Datenschutz"> <h2>Datenschutz</h2> <p>In der Leaflet-Version werden beim Aufrufen der Seite Kartenbilder von <a href="https://www.openstreetmap.de">openstreetmap.de</a>, <a href="https://www.openstreetmap.org">openstreetmap.org</a>, <a href="https://www.arcgis.com">www.arcgis.com</a>, <a href="https://opentopomap.org">opentopomap.org</a> und evtl. auch von <a href="https://www.thunderforest.com">thunderforest.com</a> geladen.</p> <p>In der Google-Maps-Version werden zusätzlich noch Scripte und Karten von Google geladen.</p> <p>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 <a href="../Impressum.html">Impressum</a>.</p> </section> <section id="Versionen"> <h2>Versionen</h2> <p>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.</p> <ul> <li><a href="GPXViewer6.21.zip">Version 6.21</a> <ul> <li>Bei Trackmarkern kann der Abstand als Zahl (5) oder als String ("5") angegeben werden.</li> <li>Die Zoom-Lupen in der Legende stehen jetzt vor den Namen.</li> <li>Hintergrundfarbe von Tracks und Routen an deren Farbe angepasst.</li> </ul></li> <li>Version 6.20</a> <ul> <li>Neue Customevents: mouseover_Marker_Bild und mouseout_Marker_Bild.</li> <li>CurrentLocation-Icon mit Ausrichtung in Bewegungsrichtung.</li> <li>Neues Markericon: Marker_small.</li> </ul></li> <li>Version 6.19 <ul> <li>Neue Steuervariable Shtrname zur Anzeige des Tracknamens bei Klick auf Track oder in Profil.</li> </ul></li> <li>Version 6.18 <ul> <li>Neue Steuervariablen Shwplatlon und Shtrlatlon zur Anzeige der Geokoordinaten von Weg- oder Trackpunkten.</li> <li>Anzeige von Datum und Zeit im Format der eingestellten Sprache.</li> </ul></li> <li>Version 6.17.2 <ul> <li>Korrektur eines Fehlers bei der Zeitanzeige von Wegpunkten.</li> </ul></li> <li>Version 6.17.1 <ul> <li>Korrektur eines Fehlers bei Klick auf Track.</li> </ul></li> <li>Version 6.17 <ul> <li>Bei Klick auf Karte werden alle Popups geschlossen.</li> <li>Mit der ESC-Taste werden alle Popups geschlossen.</li> <li>Auf leaflet 1.9.2 umgestellt.</li> <li>Beschriftung der Karte und der Profile auch in niederländisch möglich: <code><html lang="nl"></code>. Danke an Gerrit Hardemann für die Übersetzungen.</li> <li>Korrekturen kleiner Fehler.</li> </ul></li> <li>Version 6.16 <ul> <li>Behandlung der Wegpunktsymbole überarbeitet. Siehe <a href="#Beschreibung">oben</a> unter Normaler Wegpunkt</li> </ul></li> <li>Version 6.15.1 <ul> <li>Korrektur enes Fehlers in der Kartenwählfunktion. Bei der Gelegenheit etwas Toleranz eingebaut.</li> </ul></li> <li>Version 6.15 <ul> <li>Neue Steuervariable <code>Defaulticon</code>, mit der das Defaultwegpunkticon vorgegeben werden kann.</li> <li>Neue Karte TopPlusOpen vom Bundesamt für Kartographie und Geodäsie.</li> <li>Kartenwählfunktion überarbeitet.</li> </ul></li> <li>Version 6.14 <ul> <li>Optimierung bei der Darstellung von Wegpunktclustern.</li> <li>Beschriftung der Karte und der Profile auch in italienisch möglich: <code><html lang="it"></code>. Danke an Paolo Ferrari für die Übersetzungen.</li> </ul></li> <li>Version 6.13 <ul> <li>Korrektur eines Fehlers bei der Darstellung von Wegpunktclustern.</li> </ul></li> <li>Version 6.12 <ul> <li>Emojis als Wegpunktsymbol.</li> <li>Neue Layer Cycling und Hiking.</li> <li>Erweiterung des GPX-Parsers auf weitere Dialekte.</li> </ul></li> <li>Version 6.11 <ul> <li>Neue Steuervariable Shwptooltip.</li> </ul></li> <li>Version 6.10.1 <ul> <li>Fehlerkorrektur: Kartenflimmern bei kleinen Karten.</li> <li>Fehlerkorrektur: Position der Profile.</li> </ul></li> <li>Version 6.10 <ul> <li>Custom-Events eingeführt, siehe Foto-Beispiele und <a href="Beispiel4_mit_Events">Beispiel mit Events</a> (Nicht in der Google-Maps-Version).</li> <li>Fehlerkorrektur im Zusammenhang mit der Steuervariablen Legende_rr.</li> <li>In der GPX-Datei wird auch der Namespace <code>gpxdata</code> berücksichtigt.</li> <li>Die Temperatur wird jetzt als <code>temp-</code> und als <code>atemp-</code>Tag erkannt.</li> </ul></li> <li>Version 6.9 <ul> <li>Neue Steuervariable Legende_info zum Anzeigen von Track- und Routeninfos in der Legende.</li> <li>Die Karte OSM-Map Outdoors wurde in der Leaflet-Version aufgenommen.</li> <li>Überarbeitung der Darstellung von Infofenstern.</li> <li>Beim lang-Attribut werden auch zusammengesetzte Sprachkürzel berücksichtig.</li> <li>Wenn die Steuervariable Tkorr gesetzt ist, wird die absolute Zeit aus der Zeitzone des Besucherbrowsers berechnet, sonst wird die in der GPX-Datei gespeicherte UTC genommen.</li> <li>Fehlerkorrektur bei der Anzeige des Vorschaubilds bei der Google Maps API.</li> </ul></li> <li>Version 6.8 <ul> <li>Neue Steuervariablen zur Umrechnung der Temperatur: TFaktor und Toffset.</li> <li>Änderung bei der Steuervariable Unit: bei "us" wird die Temperatur in °F umgerechnet.</li> <li>Neue Fullscreen-Icons.</li> <li>Verbesserung beim Umgang mit Scrollwheel und Touch bei der OSM-Version. Nur wenn die Map weniger als 80% der Seitenbreite einnimmt, wird das Scrollen der Seite unterdrückt und nur die Map gezoomt oder verschoben.</li> <li>Überarbeitung der Profile beim Umgang mit Touch-Devices.</li> <li>Korrektur der lon-Werte beim Übergang über 180°-Werte.</li> </ul></li> <li>Version 6.7 <ul> <li>Beschriftung der Karte und der Profile auch in spanisch möglich: <code><html lang="es"></code>. Danke an Damian Gutierrez für die Übersetzungen.</li> <li>Bei Tracks und Routen können bei vorgegebenen Streckenintervallen Marker gesetzt werden. Steuervariablen: Routemarker und Trackmarker.</li> <li>Das Current-Location-Icon auffälliger gestaltet.</li> <li>Bei der OSM-Version Update auf Leaflet 1.6.</li> </ul></li> <li>Version 6.6 <ul> <li>Anzeige des Temperaturprofils (ns3:atemp).</li> <li>Hohe der Elementlisten im Maphead auf Kartengröße begrenzt, bei Bedarf mit Scrollbalken.</li> <li>Displaycolor wird auch in Routen berücksichtigt.</li> <li>Kleine Korrekturen.</li> </ul></li> <li>Version 6.5 <ul> <li>Kartenlegende überarbeitet.</li> <li>Showmaptypecontroll wird wieder berücksichtigt.</li> <li>Neue Callback-Funktion "created_Marker_Bild".</li> <li>Bei der Anzeige des Änderungsdatums der GPX-Datei (Legende_fnm_lm) kann gewählt werden, ob Datum, Zeit oder beides gezeigt werden soll.</li> </ul></li> <li>Version 6.4.1 <ul> <li>Fehler beim Skalierungsbutton behoben.</li> <li>Icon-Position korrigiert.</li> </ul></li> <li>Version 6.4 <ul> <li>Neu in der Kartenlegende: Die Lupe hinter den Dateinamen wählt den Maßstab so, dass alles angezeigt wird. Die Lupen hinter den Wegpunkten, Tracks und Routen zoomen auf das jeweilige Element oder auf alle Wegpunkte, Tracks und Routen.</li> <li>Hinter dem Dateinamen kann das Datum der letzten Änderung der GPX-Datei angezeigt werden. Steuervariable: Legende_fnm_lm.</li> <li>Diverse Umstrukturierungen im Code.</li> <li>Das Script wurde unter die Lizenz <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.de">CC BY-NC-SA 4.0</a> (Namensnennung - Nicht-kommerziell - Weitergabe unter gleichen Bedingungen 4.0 International) gestellt.</li> </ul></li> <li>Version 6.3.1 <ul> <li>Behebung eines Fehlers: Ein einzelner Wegpunkt wurde nicht an gezeigt.</li> <li>Bei der OSM-Version Update auf Leaflet 1.5.1.</li> </ul></li> <li>Version 6.3 <ul> <li>Bei Bildwegpunkten wird bei Klick in das Bild wie bei einfachen Wegpunkten das LINK-Feld ausgewertet (Nur bei der OSM-Version).</li> <li>Bei Wegpunkten, die im HTML definiert werden, wurde das Attribut data-link hinzugefügt, um die Wegpunkte zu verlinken. Siehe Beispiel 11b.</li> <li>Neue Steuervariable Linktarget zum steuern, wie Links geöffnet werden.</li> <li>Wegpunkte werden in der Legende jetzt wie Tracks und Routen behandelt. Man kann über das Lupensymbol die Karte auf die Wegpunkte Zoomen und es werden alle Wegpunkte aufgelistet.</li> <li>Tastaturbedienung in der Legende in Anlehnung an Programm-Menüs umgestellt.</li> <li>Bei der OSM-Version wurde das Update auf Leaflet 1.4 zurückgenommen und wieder Version 1.3.1 verwendet.</li> </ul></li> <li>Version 6.2 <ul> <li>Farbtafel für Farbkodierung nach Steigung erweitert.</li> <li>Legende über der Karte bricht auf kleinen Bildschirmen um.</li> <li>Glättungsalgorithmus leicht modifiziert.</li> <li>Berechnung der An- und Abstiegsmeter überarbeitet</li> <li>In der OSM-Version werden auf Wunsch jetzt auch Richtungspfeile angezeigt.</li> <li>Mit der Steuervariablen Arrowsymbol kann das Symbol für den Richtungspfeil gewählt werden (nur osm).</li> <li>Beschriftung der Karte und der Profile auch in französisch möglich: <code><html lang="fr"></code>. Danke an Jean-Jacques und Pierre-Michel Sarton für die Übersetzungen.</li> <li>Bei Zeitausgaben wird in der OSM-Version die Zeitzone des Browsers verwendet, und nicht mehr UTC. Mit <code>Tkor = false;</code> kann auf UTC umgestelt werden.</li> </ul></li> <li>Version 6.1.3 <ul> <li>Fehlerkorrekturen: <br>Bei mehreren GPX-Dateien dürfen zwischen den Dateinamen als Dateitrennzeichen weitere Zeichen verwendet werden. <br>Die Steuervariable scrollWheelZoom wird auch in der Leaflet-Version berücksichtigt. <br>Zoomlevel aktualisiert. </li> </ul></li> <li>Version 6.1.2 <ul> <li>Fehlerkorrektur: bei mehreren GPX-Dateien dürfen zwischen den Dateinamen neben dem Dateitrennzeichen auch Leerzeichen etc. vokommen.</li> </ul></li> <li>Version 6.1.1 <ul> <li>Infofenster bleiben offen, wenn weitere geöffnet werden.</li> <li>Fehlerkorrekturen: <br>Bei der Infoanzeige wird geprüft, ob die Info vorhanden ist, um "NaN" zu vermeiden. <br>Die Lupenbilder wurden umbenannt, da ein "+" im Dateinamen im IIS zu Problemen führte. </li> </ul></li> <li>Version 6.1 <ul> <li>Änderung bei der Anzeige der absoluten Zeit. Die Steuervariable Shtrabs kann jetzt folgende Werte annehmen: "k", "p", und "kp", um die absolute Zeit im Infofenster über dem Track ("k"), als Zeitachse beim Profil ("p") oder bei beiden ("kp") zu verwenden. Die alten Werte (true/false) werden auch noch unterstützt.</li> <li>Zur besseren Sichtbarkeit werden die Track- und Routenlinien weiß unterlegt.</li> <li>Im Infofenster (Mausklick auf Track oder Profil, Maus über Track) wird auf Wunsch auch die Pace angezeigt, Steuervariable: Shtrpace.</li> <li>Beim Clustericon wird in der Leafletversion auch die Clustergröße angezeigt.</li> <li>Fehlerkorrekturen in der Leafletversion bei der Clusterdarstellung, bei der Anzeige von Bildwegpunkten im Safari und bei der Skalierung der Karte im Fullscreenmodus.</li> </ul></li> <li>Version 6.0 <ul> <li>Als Standard-API wird jetzt Leaflet mit OSM-Karten verwendet, alternativ kann wie in den vorherigen Versionen das Google Maps API mit Google- und OSM-Karten verwendet werden. Die Steuervariable ist Mapapi.<br>Unterschiede zwischen der Leaflet- und der Google-Maps-Version:<ul><li>In der Leaflet-Version wird anderes Kartenmaterial verwendet.</li> <li>Die automatische Zeitkorrektur (Tkorr) wird in der Leafletversion nicht unterstützt.</li> <li>Richtungspfleile (Arrowtrack, Arrowroute) werden in der Leafletversion noch nicht unterstützt.</li> <li>Der Trafficlayer (Trafficbutton) wird in der Leafletversion nicht unterstützt.</li></ul></li> <li>Beim Überfahren des Profils mit der Maus oder bei Klick werden im Infofenster auch die kumulierten Höhenmeter gezeigt.</li> </ul></li> <li><a href="Versionen.html">Alle Versionen</a></li> </ul> </section> <section id="Rechtliches"> <h2>Rechtliches</h2> <p>Der GPX-Viewer steht unter der Lizenz CC BY-NC-SA 4.0 (Namensnennung - Nicht-kommerziell - Weitergabe unter gleichen Bedingungen 4.0 International) (<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.de">License Deed</a>, <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode.de">Lizenzvertrag</a>). 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.</p> <p>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 <a href="https://leafletjs.com/">Leaflet</a> und <a href="https://cloud.google.com/maps-platform/terms/?hl=de">von Google</a> müssen eingehalten werden.</p> <p>Da auch die Möglichkeit besteht, die GPX-Daten auf <a href="https://www.openstreetmap.de/karte.html">OSM-Karten</a> zu zeigen, müssen auch die <a href="https://www.openstreetmap.de/faq.html#wie_daten_nutzen">Lizenzbedingungen</a> von <a href="https://www.openstreetmap.de/">OSM</a> eingehalten werden.</p> <p>Wenn Sie mein Projekt mit einer kleinen Spende unterstützen möchten, können sie das gerne über <a href="https://paypal.me/juergenberkemeier">Paypal.me</a> tun.</p> </section> </main> <footer> <p>29. 1. 2025 <a href="https://www.j-berkemeier.de">Jürgen Berkemeier</a></p> </footer> <script> function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'de' }, 'google_translate_element'); } document.querySelector("#google_translate_element > button").onclick = function() { this.parentNode.removeChild(this); var scr = document.createElement("script"); scr.src = "https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"; document.body.appendChild(scr); } </script> </body> </html>