Einbinden von GPX-Dateien als Karte

rolandvongilead schrieb am 26.08.2020 um 18:57 Uhr

Ich möchte aufgezeichnete Tracks auf einer Karte dargestellt in Webdesigner 16 einbinden. Nutzen wollte ich dazu den Code auf www.j-berkemeier.de/GPXViewer/index.html. Wenn ich den angepassten Code im Platzhalter bei HTML-Code (body) hineinkopiere wird in der Websiten-Vorschau nichts angzeigt.Bisher hatte ich das mit IFrame und Link auf ein Tourenportal gelöst und das hat funktioniert.

Mache ich beim Einbinden von HTML-Code etwas falsch?

Kommentare

marboe schrieb am 26.08.2020 um 20:11 Uhr

Ich denke, da muss noch ein Skript in den Head der Seite.

Und die entsprechende js-Datei muss bestimmt auch auf den Server. Ob jetzt von dir händisch oder per Hilfsverzeichnis des WD ist egal. Im ersten Fall muss ggf der verweisende Link noch angepasst werden.

Gruß Marboe

BeRo schrieb am 26.08.2020 um 20:39 Uhr

[...] Wenn ich den angepassten Code im Platzhalter bei HTML-Code (body) hineinkopiere wird in der Websiten-Vorschau nichts angzeigt [...]

Wie sieht denn der von Dir benutzte Code aus?

Wenn Du Dich an die Einbauanleitung des Anbieters hältst, funktioniert alles wie gewünscht. 😘

Alles was Du dazu an Codes brauchst, ist ein JScript Einzeiler und ein kleines DIV Tag:

<script src="./GM_Utils/GPX2GM.js"></script>
<div class="gpxview:Beispiel1.gpx" style="width:626px;height:425px">
 <noscript><p>Zum Anzeigen der Karte wird Javascript benötigt.</p></noscript>
</div>

Zusätzlich musst Du noch das Verzeichnis "GM_Utils" aus dem heruntergeladenen Archiv "GPXViewer6.9.zip" entpacken und auf dem Webserver ablegen, zusammen mit der GPX Datei, deren Route Du auf der Karte anzeigen willst.
Das vollständige Verzeichnis kann auf dem Webserver z. B. so aussehen, wenn Die Website nur aus der Seite "index.htm" besteht.

Der Seitenaufbau im WD Editor ist schnell gemacht, wenn Du den o. a. Scriptcode in den HTML Body eines geeigneten Platzhalters kopierst.

Beim ersten Aufruf der Seite wirst Du eine Warnmeldung sehen, die Du bestätigen musst.

Wenn Du versuchst, die Site nach einem lokalen Export zu öffnen, wirst Du mit einem ernsteren Fehler konfrontiert, der aber berechtigt ist.

Online ist aber alles i. O. (klick)

Na dann, viel Erfolg 👍

Zuletzt geändert von BeRo am 26.08.2020, 20:46, insgesamt 2-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

rolandvongilead schrieb am 27.08.2020 um 11:21 Uhr

Danke für die ausführliche Anleitung.🙂

Leider habe ich es bis jetzt nicht hinbekommen, von HTML hab ich nicht viel Ahnung.
Zuerst habe ich den Ordner "GM_Utils" hochgeladen und die Datei "2019-06-29 tag1.gpx" in das gleiche Verzeichnis kopiert:

Dann diesen Code in den Platzhalter eingefügt:

Der Quellcode der Vorschau sieht dann so aus:

Dort, wo die Karte angezeigt werden sollte, erscheint leider nichts 😟

Zum Speicherort der GPX-Datei noch eine Frage:
Da die Verzeichnisstruktur meiner Homepage immer komplexer geworden ist, würde ich die GPX-Dateien im inhaltlich passenden Ordner ablegen wollen. Zum Beispiel im Ordner "schweden1_htm_files". Geht das überhaupt und wie wäre der Syntax der Zeile <div class="gpxview:Name_der_GPX-Datei.gpx" dann?


 

 

 

BeRo schrieb am 27.08.2020 um 15:33 Uhr

[...] Dort, wo die Karte angezeigt werden sollte, erscheint leider nichts [...]

Das deutet drauf hin, dass die Verlinkung der Dateien-, Scriptcodes-, etc. nicht ganz korrekt ist.
Was in den Screenshots zu sehen ist (Datei-/Verzeichnis Ablage), scheint i. O. zu sein.
Wenn Du die Karte in der Datei "index.htm"- oder einer anderen Seite (im Verzeichnis "radtouren") anzeigen willst, dann sollte das funktionieren. Rufst Du aber die Karte auf einer Seite auf, die ihrerseits in einem der anderen Verzeichnisse liegt, dann passiert genau das, was Du als Problem gemeldet hast, es wird ein leerer Platzhalter angezeigt.

[...] würde ich die GPX-Dateien im inhaltlich passenden Ordner ablegen wollen. Zum Beispiel im Ordner "schweden1_htm_files". [...] wie wäre der Syntax der Zeile <div class="gpxview:Name_der_GPX-Datei.gpx" dann?

Die GPX Dateien kannst Du in beliebigen Verzeichnissen ablegen. Wenn Du den Pfad dahin korrekt angibst, wird die Karte angezeigt.
Liegt die GPX Datei "2019-06-29 tag1.gpx" z. B. im Verzeichnis "schweden1_htm_files", das seinerseits im Verzeichnis "radtouren" liegt, dann muss die Zuweisung zur Klasse "gpxview" so aussehen:

<div class="gpxview:radtouren/schweden1_htm_files/2019-06-29 tag1.gpx" style="width:626px;height:425px">

Der o. a. Pfad "radtouren/schweden1_htm_files/" setzt voraus, dass die aufrufende Datei in einem dem Verzeichnis "radtouren" übergeordneten Verzeichnis liegt.
Liegt die aufrufende Datei ebenfalls im Verzeichnis "radtouren" dann muss der Pfad so aussehen: "schweden1_htm_files/".
Die komplette Zuweisung zur Klasse sieht dann so aus:

<div class="gpxview:schweden1_htm_files/2019-06-29 tag1.gpx" style="width:626px;height:425px">

Wichtig!
Das Verzeichnis "GM_Utils" muss immer im selben Verzeichnis liegen, in dem die aufrufende Webseite liegt. Andernfalls wird die Karte nicht angezeigt!
Hast Du mehrere Seiten, die in unterschiedlichen Verzeichnissen liegen und die Karten anzeigen sollen, musst Du also in jedem dieser Verzeichnisse das Verzeichnis "GM_Utils" erneut anlegen.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

rolandvongilead schrieb am 27.08.2020 um 19:05 Uhr

Ich werde mich wohl nach einer anderen Variante für die Einbindung von Karte und Track umsehen müssen, wahrscheinlich bin ich zu blöd für diese.

Wie im Screenshot zu sehen, ist das Verzeichnis "GM_Utils" im Verzeichnis "/radfahren/radtouren", hier liegt auch die aufrufende Webseite "schweden1.htm".

Die GPX-Datei liegt im Ordner "/radfahren/radtouren/schweden1_htm_files".

Uns so sieht mein Code im Platzhalter aus:

Das Ergebnis ist immer noch eine weiße Fläche 😟

BeRo schrieb am 27.08.2020 um 20:22 Uhr

Ok, "Uhrenvergleich" 😉
Wenn ich Dein Szenario nachstelle, funktioniert alles wunschgemäß, also scheint von der Anlage der Objekte her alles i. O. zu sein...

<script src="./GM_Utils/GPX2GM.js"></script>
<div class="gpxview:schweden1_htm_files/2019-06-29 tag1.gpx" style="width:626px;height:425px">
<noscript><p>Zum Anzeigen der Karte wird Javascript benötigt.</p></noscript>
</div>

Was nun?

Vielleicht postest Du mal eine URL, damit wir uns das "corpus delicti" mal im Detail ansehen können...
Alternativ- oder vorab kannst Du mal versuchen, eine neue Seite anzulegen, die nichts weiter enthält als den Platzhalter (und die Codes) für die Karte. Sollte es damit funktionieren, dürfte der "Beelzebub" in anderen JScriptcodes zu finden sein, die Du auf den Standardseiten evtl. untergebracht hast. Das kann ein Besucherzähler sein oder ein Google Analytics Script oder ein Cookie Info Script oder...

------------------------
Edit: 21:37 h

Ich habe gerade Deine Homepage im WWW gefunden und festgestellt, dass die noch auf einem ungeschützten Server bei Magix liegt. Sehr wahrscheinlich ist das die Ursache Deines Problems.
Du siehst beim Aufruf der Seite mit der neuen Karte dann aber keinen leeren, weißen Platzhalter sondern ein sich permanent drehendes Ladesymbol in einem schwarzen Rahmen?

Meine online Demo liegt auf einem SSL geschützten Server, und die funktioniert einwandfrei mit Deiner GPX Datei...

Ursache des Problems ist das "cross origin" Problem, das Du nur lösen kannst, wenn Du entweder einen anderen Anbieter findest, der Dir die Möglichkeit gibt Deine GPX gestützten Karten auf Deiner Website anzuzeigen, ohne das "cors" Problem zu produzieren oder Du ziehst Deine Domain um, zu einem Provider der Dir einen SSL geschützten Webserver anbieten kann 🤓

Zuletzt geändert von BeRo am 27.08.2020, 21:37, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

rolandvongilead schrieb am 28.08.2020 um 09:38 Uhr

So, ich habe jetzt mal eine neue Seite angelegt mit dem griffigen Namen "testseite". Link: http://www.faszination-radfahren.de/radtouren/testseite.htm
Hier funktioniert das Einbinden der OSM-Karte prima.
Mit dieser Seite meiner Hompepage leider nicht: http://www.faszination-radfahren.de/radtouren/schweden1.htm
Es erscheint folgende Fehlermeldung:

Nach dem Bestätigen der Fehlermeldung erscheint dann das von dir erwähnte permanent drehende Ladesymbol in einem schwarzen Rahmen.
Das es mit der Testseite funktioniert, würde doch das Problem ungeschützter Server ausschließen, oder?

 

BeRo schrieb am 28.08.2020 um 14:27 Uhr

[...] Das es mit der Testseite funktioniert, würde doch das Problem ungeschützter Server ausschließen, oder? [...]

Korrekt! 😇

Die Ursache des vermeintlichen "cross origin" Problems war doppelschichtig. 🤓

  1. Hatte ich für den Test auf einem ungeschützten Server die Ordnerstruktur verändert, weshalb die GPX Dateien nicht mehr gefunden wurden... 😕
  2. Stand der GPX Viewer sich selbst im Weg, weil das Script bei mehrfachem Aufruf die benötigten IDs mehrfach deklarieren wollte und das ist nun mal ein absolutes "No-Go" 😈

Lösungen:

zu 1.
Die notwendige "Reparatur" erklärt sich von selbst 😊

zu 2.
Die Lösung ist fast so einfach wie die zu 1.
Lösche aus allen eingebauten JScripts den Eintrag '"
<script src="./GM_Utils/GPX2GM.js"></script>" und setz ihn einmalig! in den HTML Head der jeweiligen Seite oder, wenn Du auf mehreren, unterschiedlichen Seiten Karten anzeigen willst, setzt Du das JScript in den HTML Head der Website, danach kann von jeder beliebigen Seite innerhalb des Projekts darauf zugegriffen werden.

Wenn das getan ist, solltest Du problemlos auch auf einem ungeschützten Server mehrere Karten gleichzeitig anzeigen können. Das gilt dann natürlich auch für die Mobil-Variante, wenn Du denn eine erstellen willst...

   

Na dann, viel Erfolg 👍

Zuletzt geändert von BeRo am 28.08.2020, 14:28, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

rolandvongilead schrieb am 08.09.2020 um 13:29 Uhr

Danke für die tolle Unterstützung.🙂 Das hat so funktioniert. Jetzt muss ich mich nur noch etwas mit den Parametern des GPX-Viewers beschäftigen, um die passenden Größen und Darstellungen einzustellen.