GPX Viewer in einen Arikel einbinden

**maffy** · 07.10.2012, 13:19

Ich bräuchte eure Hilfe, bin erst seit kurzem auf dieses System umgestiegen.

Ich möchte gerne den GPX Viewer in einem Artikel einfügen.
Weis aber nicht genau wie ich das anstellen kann.

Eine Übersichtsseite soll die Wanderungen als Artikel Teaser anzeigen.
Eine Weiter Seite die Wegbeschreibung zur Wanderung mit Bildern, GPX File zum Downloaden,
und mit dem GPX Viewer und ein Höhenprofil zu der Tour anzeigen.

Wie kann ich das erstellen zusammen mit dem GPX Viewer.

So ähnlich könnte es aussehen.

Mfg Maffy

**planepix** · 07.10.2012, 14:42

Hallo maffy,

schau dir mal CFS Maps an.

**maffy** · 07.10.2012, 16:51

Dieses Modul habe ich bei mir inst..

Die Open Street Map funktioniert bei mir im IE 9 nicht richtig.
Die Karte wird ewig nicht angezeigt bzw. geladen.

Andere Kartendienste kann ich erst garnicht auswählen.

Mfg Maffy

**maffy** · 13.10.2012, 16:12

Ich habe versucht die Seite mit {{file::gpxviewer/index.php}} einzubinden.
Ich habe ein Modul für HTML angelegt und unter Templates einen Ordner angelegt wo alle dateien dieses Beispiel drinnen liegen.

Leider erscheint nur die Überschrift mehr aber nicht.

Das Javasript wird offenbar nicht ausgeführt und die Befehle ausgeführt.
Die Karte wird nicht angezeigt.

Code:

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
    <title>GPXViewer Beispiel 1</title>
    <script type="text/javascript" src="GM_Utils/GPX2GM.js"></script>
    <style type="text/css">
      html { height:100% }
      body { height:100% }
    </style>
  </head>
  <body>
   <h1>GPXViewer Beispiel 1</h1>
    <div class="gpxview:Beispiel1.gpx:Satellit" style="width:600px;height:500px;float:right"><noscript><p>Zum Anzeigen der Karte wird Javascript ben&ouml;tigt.</p></noscript></div>
  </body>
</html>

**maffy** · 23.10.2012, 16:16

Ich habe nun von der fe_page.html ein neues Template erzeugt.
Leider funkioniert das immer noch nicht das die Karte angezeigt wird.

Im Artikel rufe ich das Template per {{file:

fadzuderdatei}}auf.

Komme nicht weiter.

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="<?php echo $this->charset; ?>">
<title><?php echo $this->pageTitle; ?> - <?php echo $this->mainTitle; ?></title>

<?php
$path = '../contao/templates/gpxviewer/';

 // nur zum testen wie der richtige Ordner Pfad ist kommt wieder weg
if (file_exists($path)) {
    echo "Die Datei $path existiert";
} else {
    echo "Die Datei $path existiert nicht";
}

?>  
  
<script type="text/javascript" src="<?PHP echo $path ?>GM_Utils/GPX2GM.js"></script>  
  
</head>
<body id="top">


   <h1>GPXViewer Beispiel 1</h1>
    <div class="gpxview:<?PHP echo $path ?>Beispiel1.gpx:Satellit" style="width:600px;height:500px;float:right"><noscript><p>Zum Anzeigen der Karte wird Javascript ben&ouml;tigt.</p></noscript></div>
  </body> 
  
</html>

**maffy** · 25.10.2012, 15:03

Habe es nun selber hinbekommen.

1. JS Datei in den Header einbinden
-> Themes - Seitenlayouts - Experteneinstellung - Zusätzliche <head>-Tags

Code:

<script type="text/javascript" src="tl_files/gpxviewer/GM_Utils/GPX2GM.js"></script>

2. Ordner anlegen
->tl_files/gpxviewer/
->templates/gpxviewer/

3. GPX files in den Ordner tl_files/gpxviewer/ hochladen

4. Template z.B. etappe1.html5 erstellen und im Ordner templates/gpxviewer speichern.

5. Diesen Code in die Template einfügen

Code:

<?php

$filename = 'tl_files/gpxviewer/etappe-1.gpx';

?> 

<center>

<br /><br />
  
<div id="map" class="gpxview:<?PHP echo $filename?>:Oberflaeche" style="width:500px;height:225px;"><p>Zum Anzeigen der Karte wird Javascript benötigt.</p></div>

<br style="clear:both"> 
  
<div id="map_hp" style="width:500px;height:100px">
 <noscript><p>Zum Anzeigen des Höhenprofils gegen den Weg wird Javascript benötigt.</p></noscript>
</div>
    
</center>

Danach einfach den $filename ändern und abspeichern.
Diesen Schritt für jede Karte neu machen.

6. nun kann die Karte mit dem Insertbefehl an einer Beliebigen stelle eingefügt werden.

Code:

{{ file::etappe1.html5 }}

7. Auf der Website von GPXViewer gibt es noch weitere Beispiele und welche Einstellungen man im Javascript ändern kann.

Einfacher währe es sicher, wenn mann das als Modul machen könnte wo dann das GPX File über ein einfaches formular ausgewählt wird und man ein paar Infos über die Strecke einfügenkann.

Dafür reichen meine Kenntnisse mit Contao aber nicht aus um so ein Modul zu programmieren.

MFG Maffyl

**grand** · 26.10.2012, 12:25

Super danke, kann ich auch gebrauchen.

Wäre auf jedenfall mal ein Cooles Modul!!

Vielleicht macht das ja mal einer der sich damit auskennt?

**maffy** · 05.11.2012, 14:15

Ich habe nun einfach den Elementgenerator genommen.

Das Javasript für den GPX Viewer muss einfach nur in den Header eingefügt werden.
Wie oben beschrieben.

Das Templat File (dma_eg_gpxviewer.tpl) für den GPX sieht dann so aus.

Code:

<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>

<h1><?php echo $this->elements['title']; ?></h1>
<p><?php echo $this->elements['description']; ?></p>

<center>

<br /><br />
  
<div id="map" class="gpxview:<?php echo $this->elements['gpxfile'];?>:Oberflaeche" style="width:500px;height:225px;"><p>Zum Anzeigen der Karte wird Javascript benötigt.</p></div>

<br style="clear:both"> 
  
<div id="map_hp" style="width:500px;height:100px">
 <noscript><p>Zum Anzeigen des Höhenprofils gegen den Weg wird Javascript benötigt.</p></noscript>
</div>
    
</center>    
  
  
</div>

**harley-rider** · 08.04.2016, 13:10

Diese Anleitung scheint wohl für die aktuelle Contao Version nicht mehr gültig.
Ich binde den GPX-Viewer nun folgendermassen ein :
1. Wie beschrieben JS-Datei in den Header einbinden
2. Im Artikel den Code als html erfassen

Code:

<div class="gpxview:Pfad/Name_der_GPX-Datei.gpx" style="width:500px;height:300px">
 <noscript><p>Zum Anzeigen der Karte wird Javascript benötigt.</p></noscript>
</div>

Dieser Code kann dann je nach Wunsch gemäss der Anleitung erweitert werden.