GPX-Viewer einbinden

  • 12 Antworten
  • 1227 Aufrufe
*

Offline AndreHa

  • Mitglied
  • 119
GPX-Viewer einbinden
« am: 26. Oktober 2020, 16:49:10 »
Hallo zusammen.
Ich bin gerade dabei meine Seite, die ich vor langer langer Zeit mal mit Mozilo 1 erstellt habe zu erneuern. (Hab grad meine ersten Posts aus 2009 hier wiederentdeckt ;-)

Also: ich möchte gern Karten mit Wegstrecke (gpx-files) und vielleicht ein paar Bildern auf meiner Seite anzeigen.
Auf https://www.j-berkemeier.de/GPXViewer/#Einbinden steht, wie das ganz einfach geht.

Allein ich schnall' nicht wie ich das in Mozilo einbauen soll.
In meinem jugendlichen Leichtsinn hab ich versucht, das ganze zu umgehen und ne html Datei im Iframe aufzurufen.. aber erstens ist das sehr unschön und zweitens klapp's auch nicht. Ebenso wenig wie die angegebenen html- codes einfach in Mozilo [html| ] tags zu packen.

Meine konkreten Fragen sind also:
1) wie bzw. wo muss ich diese Skript- Einbindung vornehmen?
<script src="GM_Utils/GPX2GM.js"></script>

2) Wie krieg ich den Aufruf der gpx Dateien sauber hin?
<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>


Ich glaub, ein Teil meines Problems liegt am pfad zum skrit und zur gpx Datei.

Mein Aufbau:
qwert.de/gpx/GM_Utils/GPC2GM.js    > hier liegt das Script

qwert.de/gpx/                                                   > hier
qwert.de/kategorien/Geocaching/dateien        > und hier liegen gpx Dateien (im Moment funktioniert ja beides nicht)

Ich hoffe, ich hab mich klar genug ausgedrückt, um verstanden zu werden.
Ach so, ich benutze das Template MR Natur von Marusti, falls das wichtg ist.

Andre





 





*

Offline Mighty

  • Coder
  • Mitglied
  • 62
Re: GPX-Viewer einbinden
« Antwort #1 am: 26. Oktober 2020, 20:46:11 »
Hallo Andre,

verschiebe mal dein Ordner und die Datei (GM_Utils/GPC2GM.js) in den Ordner deines Layouts.

dein Script Tag kommt in der Template.html vor den schließenden </div> Tag.

</footer>
<script src="{LAYOUT_DIR}/GM_Utils/GPX2GM.js"></script>
</div>

dein DIV element kannst du dann in der Inhaltsseite mit [html|hier der code] einbinden
www.twinix.de // kostenlose Layouts / Templates für das moziloCMS

*

Offline AndreHa

  • Mitglied
  • 119
Re: GPX-Viewer einbinden
« Antwort #2 am: 27. Oktober 2020, 16:21:29 »
Hallo Mighty,
vielen Dank, ich glaub, der erste Teil hat schon mal geklappt: Das Skript "an sich" scheint zu laden.

Aber irgendwie referezier ich falsch auf die gpx-Datei, die findet er nicht.
Die "Beispiel4.gpx" liegt in https://qwert.de/gpx/  und in (..)/kategorien/Wohnmobil/dateien

Hab drei verschiedene "Möglichkeiten" in https://qwert.de/Wohnmobil/test2.html versucht:
Die mag er irgendwie alle nicht :-(
Muss ich das irgendwie "relativ" adressieren...(von wo aus?)

[html|<div class="gpxview:Beispiel4.gpx" style="width:500px;height:300px">
 <noscript><p>Zum Anzeigen der Karte wird Javascript benötigt.</p></noscript>
</div>]

[html|<div class="gpxview:daten/Beispiel4.gpx" style="width:500px;height:300px">
 <noscript><p>Zum Anzeigen der Karte wird Javascript benötigt.</p></noscript>
</div>]

[html|<div class="gpxview:gpx/Beispiel4.gpx" style="width:500px;height:300px">
 <noscript><p>Zum Anzeigen der Karte wird Javascript benötigt.</p></noscript>
</div>]


*

Offline marusti

  • Administrator
  • Mitglied
  • 517
Re: GPX-Viewer einbinden
« Antwort #3 am: 27. Oktober 2020, 18:49:05 »
ich kenne mich mit dem GPX Viewer nicht aus aber wenn ich es mir mit dem Bsp anschaue, scheint dein div erstmal nicht korrekt zu sein "gpxview:daten/Beispiel4.gpx JBmapdiv". In dem Bsp ist es gpxview:Name_der_GPX-Datei.gpx - ohne "JBmapdiv"?! Ich weiss nicht ob das einen Unterschied macht, vielleicht einen Versuch wert.

Und dann ja du musst sicherlich auf die Datei verlinken. https://qwert.de/gpx/Beispiel4.gpx kann ich finden, bei https://qwert.de/gpx/kategorien/Wohnmobil/dateien/Beispiel4.gpx finde ich nichts. Ich denke die Verlinkung muss von https://qwert.de/Wohnmobil/test2.html aus gehen.

*

Offline Mighty

  • Coder
  • Mitglied
  • 62
Re: GPX-Viewer einbinden
« Antwort #4 am: 28. Oktober 2020, 08:46:05 »
eine Idee habe ich noch die du versuchen kannst.

[html|<div class="gpxview:[datei|@=Wohnmobil:Beispiel4.gpx=@]" style="width:500px;height:300px">
 <noscript><p>Zum Anzeigen der Karte wird Javascript benötigt.</p></noscript>
</div>]

bitte prüfe auch das du die Datei in der Kategorie Wohnmobil hochgeladen hast.
Im Adminbereich ist es der dritte Menüpunkt von links / Dateien, dort werden dir alle deine Kategorien und deren Inhalte angezeigt.

hier noch was zum nachlesen für dich  ;D
https://www.mozilo.de/moziloCMS%202.0/Anleitung/Dateien.html
https://www.mozilo.de/moziloCMS%202.0/Anleitung/Editor/CMS%20Syntax.html

sollte das nicht klappen habe ich dir noch eine E-mail geschrieben das du mir die test Datei und den Code mal zusendest.
www.twinix.de // kostenlose Layouts / Templates für das moziloCMS

*

Offline AndreHa

  • Mitglied
  • 119
Re: GPX-Viewer einbinden
« Antwort #5 am: 28. Oktober 2020, 14:02:23 »
Hi,
zuerst mal "Danke" dass ihr euch mit meinem Problem befasst :-)

Dann mal meine Antworten:
@Marusti: Ich kann "gpxview:daten/Beispiel4.gpx JBmapdiv" nirgendwo sehen... wo hattest du das gesehen?

Und dann kommt das/mein Verständnisproblem mit den relativen Pfaden: Eine HTML-Datei https://qwert.de/Wohnmobil/test2.html  gibs ja eigentlich gar nicht.. die wird ja, nach meinem Verständnis, aus index.php und template.html (und paar .css) erst zur Laufzeit zusammen gebaut..

Ich hab aber die Beispiel4.gpx mittlerweile in allen möglichen Verzeichnissen untergebracht, so dass sie "eigentlich" immer gefunden werden sollte..... tut sie aber nicht :-(
Gestern war sie nur in:
/qwert.de/gpx/Beispiel4.gpx
/qwert.de/kategorien/Wohnmobil/dateien/Beispiel4.gpx  (nicht /qwert.de/gpx/kategorien/Wohnmobil/dateien/Beispiel4.gpx
Heute ausserdem in:
/qwert.de/Beispiel4.gpx
/qwert.de/layouts/MR%Natur/Beispiel4.gpx
/qwert.de/layouts/MR%Natur/grafiken/Beispiel4.gpx
/qwert.de/kategorien/Wohnmobil/Beispiel4.gpx



@Mighty: Deine Idee hab ich auch versucht.
Ich hab den und ein paar  andere Versuche auf https://qwert.de/Wohnmobil/test.html  gestellt.. da kann man auch die Syntax lesen.
-Mit der Mozilo-Syntax kenn ich mich (langsam wieder) ganz gut aus.

Und auch ein Foto meiner template.html ist auf der Seite zu sehen.

Ich lade die Dateien immer per Filezilla (sftp) hoch, nicht per Admin-Webinterface...


Andre



*

Offline marusti

  • Administrator
  • Mitglied
  • 517
Re: GPX-Viewer einbinden
« Antwort #6 am: 28. Oktober 2020, 15:21:11 »
Zitat
@Marusti: Ich kann "gpxview:daten/Beispiel4.gpx JBmapdiv" nirgendwo sehen... wo hattest du das gesehen?
Ich habe dir einen Screenshot eingefügt. Vielleicht fügt das script das auch ein und es ist korrekt.

Zitat
Eine HTML-Datei https://qwert.de/Wohnmobil/test2.html  gibs ja eigentlich gar nicht..
Das ist deine Inhaltsseite test2 in der Kategorie Wohnmobil welche als html datei ausgegeben wird. Leider wird auf der Beispielseite nicht erklärt, wie die Links zu setzen sind, dort steht nur "Ich empfehle, HTML-Seite, GPX-Datei und eventuelle Fotos im selben Ordner abzulegen."

*

Offline AndreHa

  • Mitglied
  • 119
Re: GPX-Viewer einbinden
« Antwort #7 am: 28. Oktober 2020, 16:40:13 »
Ok... hmm... kann ich irgendwie nicht (mehr) nachvollziehen, jedenfalls ist jetzt kein JBmapdiv mehr drin.

Ich glaub, die Empfehlungen bezüglich Speicherort von HTML Seite, GPX dateien und Bildern in einem Verzeichnis zu halten kann ich mit Mozilo eh nicht umsetzen.
Ich denke, ich werde doch wieder umdisponieren auf den iframe:
Auch die ganzen Meldungen, die das Skript raushaut (auch wenn man gar keine Kartensehen will), kann ich so hoffentlich umgehen.

Ich hab jetzt mal nen iframe eingebaut... klappt ja doch.
Jetzt muss ich noch schnallen, wie ich die Karte ordentlich darstelle mit allem, was ich haben will.

Aber ich danke euch beiden für eure Hilfe!
Andre

*

Offline marusti

  • Administrator
  • Mitglied
  • 517
Re: GPX-Viewer einbinden
« Antwort #8 am: 28. Oktober 2020, 18:12:58 »
Wenn du herausfinden kannst, wie es eingebunden werden muss wenn es nicht im gleichen Ordner ist, gibt es sicherlich auch eine mozilo freundlicherer Lösung.

*

Offline Mighty

  • Coder
  • Mitglied
  • 62
Re: GPX-Viewer einbinden
« Antwort #9 am: 28. Oktober 2020, 22:42:45 »
also ich habe mir das ganze mal zum testen runtergeladen und es funktioniert ganz einfach :)

Zitat
{LAYOUT_DIR} = der Konstante URL_BASE . layouts/ . $CMS_CONF->get("cmslayout") Achtung es wird kein "/" angehängt

[html|<div class="gpxview:{LAYOUT_DIR}/GPX/Beispiel1.gpx" style="width:500px;height:300px">
 <noscript><p>Zum Anzeigen der Karte wird Javascript benötigt.</p></noscript>
</div>]

die Ordner GM_Utils & GPX habe ich in das Layout Verzeichnis geladen. (in den Ordner des aktiven Templates)

Style css im Head bei den anderen Styles einbinden
<link rel="stylesheet" href="{LAYOUT_DIR}/GM_Utils/GPX2GM.css">

Js vor den schließenden </body> Tag
<script src="{LAYOUT_DIR}/GM_Utils/GPX2GM.js"></script>

wie im Anhang zu sehen geht es auch mit mozilo ;)
www.twinix.de // kostenlose Layouts / Templates für das moziloCMS

*

Offline AndreHa

  • Mitglied
  • 119
Re: GPX-Viewer einbinden
« Antwort #10 am: 29. Oktober 2020, 19:33:02 »
Hey cool :-)
Das probier ich morgen aus.

Ich versteh bloß leider 2 Sachen nicht:
also ich habe mir das ganze mal zum testen runtergeladen und es funktioniert ganz einfach :)

Zitat
{LAYOUT_DIR} = der Konstante URL_BASE . layouts/ . $CMS_CONF->get("cmslayout") Achtung es wird kein "/" angehängt
Das versteh ich leider gar nicht. Wo muss dashin/steht das?


[html|<div class="gpxview:{LAYOUT_DIR}/GPX/Beispiel1.gpx" style="width:500px;height:300px">
 <noscript><p>Zum Anzeigen der Karte wird Javascript benötigt.</p></noscript>
</div>]
OK

die Ordner GM_Utils & GPX habe ich in das Layout Verzeichnis geladen. (in den Ordner des aktiven Templates)
OK, aber dann muss ich die ganzen gpx jpg waypoints auch alle da rein packen!?
Ich hab zum Pfad noch was gefunden.. schreib das aber in nem neuen Post


Style css im Head bei den anderen Styles einbinden
<link rel="stylesheet" href="{LAYOUT_DIR}/GM_Utils/GPX2GM.css">
... andere Styles??  :o 

Js vor den schließenden </body> Tag
<script src="{LAYOUT_DIR}/GM_Utils/GPX2GM.js"></script>
In der template.html...OK

wie im Anhang zu sehen geht es auch mit mozilo ;)

*

Offline AndreHa

  • Mitglied
  • 119
Re: GPX-Viewer einbinden
« Antwort #11 am: 29. Oktober 2020, 19:44:39 »
So ok, ich hatte ja noch was zu den Pfadangaben gefunden.
Da hat er eine Variable "ordner" eingebaut

Im Original: https://www.j-berkemeier.de/GPXViewer/Beispiel12.html
Mein Nachbau soweit: http://gpx.qwert.de/t.html  (zur Zeit als Iframe in http://qwert.de/Wohnmobil/test.html

Mighty, wenn's jetzt noch möglich wäre das Verzeichnis für die Dateien (gpx und so) schön in die kategorien/Wohnmobil/dateien/'Unterverzeichnis zu packen...  ;)
(Oder eben in /gpx/'Unterverzeichns')

Andre



*

Offline Mighty

  • Coder
  • Mitglied
  • 62
Re: GPX-Viewer einbinden
« Antwort #12 am: 29. Oktober 2020, 22:26:20 »
Zitat
    {LAYOUT_DIR} = der Konstante URL_BASE . layouts/ . $CMS_CONF->get("cmslayout") Achtung es wird kein "/" angehängt
Das versteh ich leider gar nicht. Wo muss dashin/steht das?
das sollte nur als erklärung zum {LAYOUT_DIR} dienen.

Zitat
Style css im Head bei den anderen Styles einbinden
<link rel="stylesheet" href="{LAYOUT_DIR}/GM_Utils/GPX2GM.css">
... andere Styles??

das muss auch in deiner template.html eingebunden werden im head Bereich.
wenn du schaust siehst du auch die eingebundene css datei von deinem Layour MR Natur

<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="{LAYOUT_DIR}/GM_Utils/GPX2GM.css"> hier einfügen
      <style type="text/css">
        @import "/layouts/MR%2520Natur/css/style.css";
    </style>
 </head>

dein Js script muss noch ein kleines stück runter

aktuell hier
</div>
<script src="{LAYOUT_DIR}/GM_Utils/GPX2GM.js"></script> hier einfügen.
</body>

der Ordner GM_Utils mit deiner GPX2GM.js & GPX2GM.css muss in den Ordner vom Template MR Natur

denn du die GPX Dateien nun im Ordner dateien der Kategorie Wohnmobil ablegen möchtest ist das hier dein Pfad
{BASE_URL}/kategorien/Wohnmobil/dateien

solltest du sie wo anders ablegen musst du den Pfad natürlich anpassen.
www.twinix.de // kostenlose Layouts / Templates für das moziloCMS