Ergebnis 1 bis 9 von 9

Thema: GPX Viewer in einen Arikel einbinden

  1. #1
    Contao-Nutzer
    Registriert seit
    01.10.2012.
    Beiträge
    44

    Standard GPX Viewer in einen Arikel einbinden

    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
    Geändert von maffy (07.10.2012 um 14:31 Uhr)

  2. #2
    AG Pressearbeit
    Community-Moderator
    Buchautor 'Contao für Webdesigner'
    Avatar von planepix
    Registriert seit
    05.06.2009.
    Ort
    Stuttgart
    Beiträge
    6.529
    Partner-ID
    107
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo maffy,

    schau dir mal CFS Maps an.
    ---------------------------------
    Beste Grüße planepix
    Contao für Webdesigner (Website), Twitter: @contaowebdesign
    weitzeldesign
    Contao-Sprechstunde
    Contao Schulungen: https://www.weitzeldesign.com/cms-co...chulungen.html
    Contao Jahrbuch: www.contao-jahrbuch.de
    Contao Agenturtag: www.contao-agenturtag.de
    Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
    Contao 4 Erfahrungen als Gitbook: https://app.gitbook.com/@planepix/s/...-mit-contao-4/
    Contao 4 & Manager Hosterhinweise: https://github.com/contao/contao-manager/wiki

    Schon wieder ein Update?
    Glücklich sind die, die den Wert erkennen – und wertschätzen.
    „Muss man machen wie beim Zahnarzt. Der bestraft einen auch mit hohen Rechnungen wenn man die Pflege vernachlässigt.”

  3. #3
    Contao-Nutzer
    Registriert seit
    01.10.2012.
    Beiträge
    44

    Standard

    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

  4. #4
    Contao-Nutzer
    Registriert seit
    01.10.2012.
    Beiträge
    44

    Standard

    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>
    Geändert von maffy (13.10.2012 um 17:15 Uhr)

  5. #5
    Contao-Nutzer
    Registriert seit
    01.10.2012.
    Beiträge
    44

    Standard

    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>

  6. #6
    Contao-Nutzer
    Registriert seit
    01.10.2012.
    Beiträge
    44

    Standard

    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
    Geändert von maffy (28.10.2012 um 17:23 Uhr)

  7. #7
    Contao-Nutzer
    Registriert seit
    17.07.2009.
    Beiträge
    106

    Standard

    Super danke, kann ich auch gebrauchen.

    Wäre auf jedenfall mal ein Cooles Modul!!

    Vielleicht macht das ja mal einer der sich damit auskennt?

  8. #8
    Contao-Nutzer
    Registriert seit
    01.10.2012.
    Beiträge
    44

    Standard

    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>

  9. #9
    Contao-Nutzer Avatar von harley-rider
    Registriert seit
    08.07.2013.
    Ort
    Bern, CH
    Beiträge
    220

    Standard

    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.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •