DE:Openlayers Track example

From OpenStreetMap Wiki
Jump to: navigation, search
Help
Available languages
• Deutsch • English • Italiano • 日本語
Other languages
• Afrikaans • አማርኛ • العربية • অসমীয়া • Asturianu • Azərbaycanca • Български • বাংলা • Brezhoneg • Bosanski • Català • Corsu • Česky • Dansk • ދިވެހިބަސް • Ελληνικά • Esperanto • Español • Eesti • Euskara • فارسی • Suomi • Français • Frysk • Gaeilge • Kréyòl gwadloupéyen • Gàidhlig • Galego • Alemannisch • ગુજરાતી • هَوُسَ • עברית • हिन्दी • Hrvatski • Kreyòl ayisyen • Magyar • Հայերեն • Interlingua • Bahasa Indonesia • Igbo • Íslenska • Basa Jawa • ქართული • Қазақша • ភាសាខ្មែរ • ಕನ್ನಡ • 한국어 • Kurdî • Lëtzebuergesch • ລາວ • Lietuvių • Latviešu • Malagasy • Македонски • മലയാളം • मराठी • Bahasa Melayu • Malti • မြန်မာဘာသာ • नेपाली • Nederlands • ‪Norsk (nynorsk)‬ • ‪Norsk (bokmål)‬ • Occitan • Oromoo • ଓଡ଼ିଆ • ਪੰਜਾਬੀ • Polski • پښتو • Português • Português do Brasil • Română • Română (Moldova) • Русский • سنڌي • සිංහල • Slovenčina • Slovenščina • Soomaaliga • Shqip • Српски / Srpski • Svenska • தமிழ் • తెలుగు • Тоҷикӣ • ไทย • Türkçe • Українська • اردو • O'zbek • Tiếng Việt • Wolof • isiXhosa • Yorùbá • ‪中文(简体)‬ • ‪中文(繁體)‬ • isiZulu


Dieses Beispiel zeigt, wie man einen, oder mehrere .gpx Tracks mit Openlayer in einer Karte darstellen kann.

Contents

Ergebnis

Das Ganze basiert auf dem OpenLayers_Simple_Example (englisch).

Das Ergebnis als zoombare Karte.

Das folgende Bild ist lediglich ein Bildschirmfoto:

Openlayers simple track.PNG

Anleitung

Voraussetzungen

  1. Track im .gpx Dateiformat
  2. Texteditor (z.B. Notepad, oder Wordpad bei Windows)
  3. ca. drei Minuten Zeit

GPX-Datei erstellen

Erstelle einen neuen Ordner an einem beliebigen Ort auf der Festplatte.

Speichere im neuen Ordner deine GPX-Dateien (in denen die Geo-Daten liegen).

GPX-Datei "Bruderholz"

Wenn du noch keine fertige GPX-Datei hast, kannst du diese selbst erstellen.

Oder auch untenstehende Testdatei kopieren. Dazu klickt man auf "Datei" → "Neu" → "Textdokument". Als Dateinamen gibt man "mb_bruderholz.gpx" (ohne die "") ein. Wichtig: Damit aus der Textdatei auch eine .gpx Datei wird, muss man sich über Extras → Ordneroptionen → Karteireiter "Ansicht" die Option "Erweiterungen bei bekannten Dateitypen ausblenden" deaktivieren (Haken entfernen und auf Ok klicken). Das sollte allerdings erst am Ende gemacht werden, damit die Datei problemlos mit dem Texteditor geöffnet werden kann.

Folgender Code wird nun in die neue .gpx-Datei kopiert: 

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<gpx version="1.0" creator="Turbo GPS" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.topografix.com/GPX/1/0" xsi:schemaLocation="http://www.topografix.com/GPX/1/0 http://www.topografix.com/GPX/1/0/gpx.xsd">
 
<wpt lat="47.545" lon="7.586">
  <name>Beispiel-Marker</name>
  <desc>
     Man kann auch way points in den GPX-Trace aufnehmen.
     Wichtig dabei ist, dass &#60;b&#62;UTF8&#60;/b&#62; verwendet wird,
     wenn Umlaute oder HTML-Code verwendet werden soll
     (z.B. &#223;, &#228;, &#246; ... siehe dieses Beispiel hier)
     &#60;br&#62;&#60;br&#62;Unicode-Tabelle:
     &#60;a href="http://de.selfhtml.org/html/referenz/zeichen.htm"&#62;hier&#60;/a&#62;.
  </desc>
</wpt>
 
<trk>
  <name>mb bruderholz basel reinach</name>
  <number>1</number>
<trkseg>
  <trkpt lat="47.547855" lon="7.589664">
   <ele>0.000000</ele>
   <name>p #1</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.546871" lon="7.592068">
   <ele>0.000000</ele>
   <name>p #2</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.546379" lon="7.593312">
   <ele>0.000000</ele>
   <name>p #3</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.545338" lon="7.592540">
   <ele>0.000000</ele>
   <name>p #4</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.545685" lon="7.591596">
   <ele>0.000000</ele>
   <name>p #5</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.545395" lon="7.591381">
   <ele>0.000000</ele>
   <name>p #6</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.546089" lon="7.588205">
   <ele>0.000000</ele>
   <name>p #7</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.545338" lon="7.587776">
   <ele>0.000000</ele>
   <name>p #8</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.545799" lon="7.586532">
   <ele>0.000000</ele>
   <name>p #9</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.542873" lon="7.584171">
   <ele>0.000000</ele>
   <name>p #10</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.541889" lon="7.587175">
   <ele>0.000000</ele>
   <name>p #11</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.540615" lon="7.586489">
   <ele>0.000000</ele>
   <name>p #12</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.540062" lon="7.586532">
   <ele>0.000000</ele>
   <name>p #13</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.539688" lon="7.587090">
   <ele>0.000000</ele>
   <name>p #14</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.539600" lon="7.587647">
   <ele>0.000000</ele>
   <name>p #15</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.539425" lon="7.587733">
   <ele>0.000000</ele>
   <name>p #16</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.539455" lon="7.586617">
   <ele>0.000000</ele>
   <name>p #17</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.539425" lon="7.586060">
   <ele>0.000000</ele>
   <name>p #18</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.539165" lon="7.585630">
   <ele>0.000000</ele>
   <name>p #19</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.538528" lon="7.585545">
   <ele>0.000000</ele>
   <name>p #20</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.538269" lon="7.585545">
   <ele>0.000000</ele>
   <name>p #21</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.537746" lon="7.585888">
   <ele>0.000000</ele>
   <name>p #22</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.537281" lon="7.586360">
   <ele>0.000000</ele>
   <name>p #23</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.536209" lon="7.586617">
   <ele>0.000000</ele>
   <name>p #24</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.535717" lon="7.587218">
   <ele>0.000000</ele>
   <name>p #25</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.534210" lon="7.587347">
   <ele>0.000000</ele>
   <name>p #26</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.533283" lon="7.587090">
   <ele>0.000000</ele>
   <name>p #27</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.532269" lon="7.587218">
   <ele>0.000000</ele>
   <name>p #28</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.531895" lon="7.588162">
   <ele>0.000000</ele>
   <name>p #29</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.530994" lon="7.588634">
   <ele>0.000000</ele>
   <name>p #30</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.529545" lon="7.588549">
   <ele>0.000000</ele>
   <name>p #31</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.528214" lon="7.588592">
   <ele>0.000000</ele>
   <name>p #32</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.528069" lon="7.588978">
   <ele>0.000000</ele>
   <name>p #33</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.527809" lon="7.589536">
   <ele>0.000000</ele>
   <name>p #34</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.525894" lon="7.589922">
   <ele>0.000000</ele>
   <name>p #35</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.523083" lon="7.589407">
   <ele>0.000000</ele>
   <name>p #36</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.521778" lon="7.589793">
   <ele>0.000000</ele>
   <name>p #37</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.519577" lon="7.590308">
   <ele>0.000000</ele>
   <name>p #38</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.516304" lon="7.589750">
   <ele>0.000000</ele>
   <name>p #39</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.513142" lon="7.588634">
   <ele>0.000000</ele>
   <name>p #40</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.509953" lon="7.587004">
   <ele>0.000000</ele>
   <name>p #41</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.509434" lon="7.583227">
   <ele>0.000000</ele>
   <name>p #42</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.508156" lon="7.583055">
   <ele>0.000000</ele>
   <name>p #43</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.507172" lon="7.583184">
   <ele>0.000000</ele>
   <name>p #44</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.507141" lon="7.581425">
   <ele>0.000000</ele>
   <name>p #45</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.506882" lon="7.580566">
   <ele>0.000000</ele>
   <name>p #46</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.506359" lon="7.580180">
   <ele>0.000000</ele>
   <name>p #47</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.505230" lon="7.579536">
   <ele>0.000000</ele>
   <name>p #48</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.503838" lon="7.579408">
   <ele>0.000000</ele>
   <name>p #49</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.502911" lon="7.578421">
   <ele>0.000000</ele>
   <name>p #50</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.502880" lon="7.580566">
   <ele>0.000000</ele>
   <name>p #51</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.502968" lon="7.582669">
   <ele>0.000000</ele>
   <name>p #52</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.501228" lon="7.581553">
   <ele>0.000000</ele>
   <name>p #53</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.501053" lon="7.581811">
   <ele>0.000000</ele>
   <name>p #54</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.500126" lon="7.577734">
   <ele>0.000000</ele>
   <name>p #55</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.498940" lon="7.575459">
   <ele>0.000000</ele>
   <name>p #56</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.498619" lon="7.575030">
   <ele>0.000000</ele>
   <name>p #57</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.496880" lon="7.572412">
   <ele>0.000000</ele>
   <name>p #58</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.496792" lon="7.571726">
   <ele>0.000000</ele>
   <name>p #59</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.495140" lon="7.570610">
   <ele>0.000000</ele>
   <name>p #60</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.494995" lon="7.571082">
   <ele>0.000000</ele>
   <name>p #61</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
  <trkpt lat="47.493950" lon="7.570095">
   <ele>0.000000</ele>
   <name>p #62</name>
   <time>60056-05-28T03:36:54Z</time>
   <speed>0.000000</speed>
   <course>0.000000</course>
  </trkpt>
 </trkseg>
</trk>
</gpx>


CSS-Datei erstellen

Kopiere folgenden Code (achte darauf, dass du auch das erste und letzte Zeichen kopiert hast!), füge ihn mit dem Texteditor in eine neue Seite, speichere den Text im neu angelegten Ordner unter dem Dateinamen "map.css" (ohne ""): 


html,body {
  background-color: #000000;
  height: 100%;
  width: 100%;
  margin: 1%; padding: 0;
  font-family: Helvetica,Arial,sans-serif;
  overflow: hidden;
  color: #000000;
}

div#map {
  height: 81%;
  width: 96%;
  padding: 0; 
  margin: 0;
}
.olControlAttribution {
font-size: smaller;
right: 3px;
top: 1000px;
color: #000000;
}


JavaScript-Datei erstellen

Kopiere folgenden Code (achte darauf, dass du auch das erste und letzte Zeichen kopiert hast!), füge ihn mit dem Texteditor in eine neue Seite, speichere den Text im neu angelegten Ordner unter dem Dateinamen "GPX.js" (ohne ""): 


/* Copyright (c) 2006 MetaCarta, Inc., published under the BSD license.
 * See http://svn.openlayers.org/trunk/openlayers/release-license.txt 
 * for the full text of the license. */

/**
 * @class
 * 
 * @requires OpenLayers/Layer/Markers.js
 * @requires OpenLayers/Ajax.js
 */
OpenLayers.Layer.GPX = OpenLayers.Class.create();
OpenLayers.Layer.GPX.prototype = 
  OpenLayers.Class.inherit( OpenLayers.Layer.Markers, OpenLayers.Layer.Vector, {

    /** store url of text file
    * @type str */
    url:null,
    icolor:null,
    /** @type Array(OpenLayers.Feature) */
    features: null,

    /** @type OpenLayers.Feature */
    selectedFeature: null,

    /**
    * @constructor
    *
    * @param {String} name
    * @param {String} location
    */
    initialize: function(name, url, icolor, options) {
	var newArguments = new Array();
	newArguments.push(name, options);
	OpenLayers.Layer.Vector.prototype.initialize.apply(this, newArguments);
        OpenLayers.Layer.Markers.prototype.initialize.apply(this, [name]);
        this.url = url;
        this.icolor = icolor;
        this.features = new Array();
	var results = OpenLayers.loadURL(this.url, null, this, this.requestSuccess, this.requestFailure);
    },

    /**
     * 
     */

    destroy: function() {
        this.clearFeatures();
        this.features = null;
        OpenLayers.Layer.Markers.prototype.destroy.apply(this, arguments);
    },
        
    /**
     * @param {XMLHttpRequest} ajaxRequest
     */
    requestSuccess:function(request) {
	var gpxns = "http://www.topografix.com/GPX/1/0";
        var doc = request.responseXML;
        if (!doc || request.fileType!="XML") {
            doc = OpenLayers.parseXMLString(request.responseText);
        }
        if (typeof doc == "string") {
            doc = OpenLayers.parseXMLString(doc);
        }
	
	/* search and display track */
//	var trk = OpenLayers.Ajax.getElementsByTagNameNS(doc, gpxns, "", "trk");
  var trk = doc.getElementsByTagName("trk");	
	var featureTRK = [];
	for (var i = 0; i< trk.length; i++) {
//    var color = '#00FF00';         // Fix Color
//    var color=this.randomColor();  // Random Color
      var color=this.icolor;  // Random Color
		for (var j = 0; j < trk[i].childNodes.length; j++) {
                        switch (trk[i].childNodes[j].nodeName)
                        {
                                case 'topografix:color':
                                        color = '#' + OpenLayers.Util.getXmlNodeValue(trk[i].childNodes[j]);
                                        break;
                                case 'trkseg':
					if (color == '')
						color=this.randomColor();
                                        featureTRK.push(this.addLineGPX(trk[i].childNodes[j], color));
                                        break;
                                case '#text':
                                        break;
                                case 'name':
//FIXME: label the way
                                        break;
                                default:
//                                      alert('unknown ' + trk[i].childNodes[j].nodeName);
                                        break;
                        }
                }
        }
	this.addFeatures(featureTRK);
	/* search and display route */
//	var rte = OpenLayers.Ajax.getElementsByTagNameNS(doc, gpxns, "", "rte");
  var rte = doc.getElementsByTagName("rte");		
	var featureRTE = [];
	for (var i = 0; i< rte.length; i++) {
		var color = this.randomColor();
		var style_green = {
			strokeColor: color,
			strokeOpacity: 1,
			strokeWidth: 4,
			pointRadius: 6,
			pointerEvents: "visiblePainted"
		};
		var pointList = [];
		for (var j = 0; j < rte[i].childNodes.length; j++) {
			switch (rte[i].childNodes[j].nodeName)
			{
				case 'rtept':
					var feature = this.parseFeature(rte[i].childNodes[j]);
					if (feature) {
						pointList.push(feature);
					}
					break;
				default:
					break;
			}
                }
		featureRTE.push(new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(pointList),null,style_green));
        };
	this.addFeatures(featureRTE);

	/* search and display waypoint */
//	var wpt = OpenLayers.Ajax.getElementsByTagNameNS(doc, gpxns, "", "wpt");
  var wpt = doc.getElementsByTagName("wpt");		
        var featuresWPT = [];
        for (var i = 0; i< wpt.length; i++) {
		var data = {}; 
		var point = this.setToMercator(wpt[i].getAttribute('lon'),wpt[i].getAttribute('lat'));
		var location =  new OpenLayers.LonLat(point[0], point[1]);
		/* Provide defaults for title and description */
		var title = "Untitled";
		try {
			title = OpenLayers.Util.getNodes(wpt[i], 
				'name')[0].firstChild.nodeValue;
		}
		catch (e) { title="Untitled"; }

		/* GPX descriptions */
		var description = "No description.";
		try {
			description = OpenLayers.Util.getNodes(wpt[i],
				'desc')[0].firstChild.nodeValue;
		}catch (e) {
			var description = "No description.";
		}
		data.icon = OpenLayers.Marker.defaultIcon();
//		data.popupSize = new OpenLayers.Size(250, 120);
		if ((title != null) && (description != null)) {
//                if (link) contentHTML += '<a class="link" href="'+link+'" target="_blank">';
//			contentHTML += '<p>' + title + '</p>';
//                if (link) contentHTML += '</a>';
			contentHTML = '<p><strong>' + title + '</strong><br />' + description + '</p>';
			data['popupContentHTML'] = contentHTML;
		}
		var featureWPT = new OpenLayers.Feature(this, location, data);
            featuresWPT.push(featureWPT);
              var marker = featureWPT.createMarker();
   	     marker.events.register('click', featureWPT, this.markerClick);
              this.addMarker(marker);
        }

//        for (var i = 0; i < itemlist.length; i++) {
//---
//
//            /* If no link URL is found in the first child node, try the
//               href attribute */
//            try {
//              var link = OpenLayers.Util.getNodes(itemlist[i], "link")[0].firstChild.nodeValue;
//            } 
//            catch (e) {
//              try {
//                var link = OpenLayers.Util.getNodes(itemlist[i], "link")[0].getAttribute("href");
//              }
//              catch (e) {}
//            }
//        }
    },
    /**
     * @param {Event} evt
     */
    randomColor: function() {
	var hex=new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F");
	var color = '#';
	for (i=0;i<6;i++){
		color += hex[Math.floor(Math.random()*hex.length)];
	}
	return color;
    },
    markerClick: function(evt) {
        sameMarkerClicked = (this == this.layer.selectedFeature);
        this.layer.selectedFeature = (!sameMarkerClicked) ? this : null;
        for(var i=0; i < this.layer.map.popups.length; i++) {
            this.layer.map.removePopup(this.layer.map.popups[i]);
        }
        if (!sameMarkerClicked) {
            var popup = this.createPopup(true);
            OpenLayers.Event.observe(popup.div, "click",
            function() { 
              for(var i=0; i < this.layer.map.popups.length; i++) { 
                this.layer.map.removePopup(this.layer.map.popups[i]); 
              } 
            }.bindAsEventListener(this));
            this.layer.map.addPopup(popup); 
        }
        OpenLayers.Event.stop(evt);
    },
    addLineGPX: function(xmlNode, color) {
        var style_green = {
                strokeColor: color,
                strokeOpacity: 0.6,
                strokeWidth: 5,
                pointRadius: 6,
                pointerEvents: "visiblePainted"
        };
        var pointList = [];
        for (var i = 0; i < xmlNode.childNodes.length; i++) {
//	for (var i = 0; i < 4; i++) {
                if (xmlNode.childNodes[i].nodeName == "trkpt")
                {
                        var feature = this.parseFeature(xmlNode.childNodes[i]);
                        if (feature) {
                                pointList.push(feature);
                        }
                }
        };
        return new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(pointList),null,style_green);
    },

     /**
      * This function is the core of the GPX parsing code in OpenLayers.
      * It creates the geometries that are then attached to the returned
      * feature, and calls parseAttributes() to get attribute data out.
      * @param DOMElement xmlNode
      */
     parseFeature: function(xmlNode) {
        if (xmlNode.getAttribute('lat') && xmlNode.getAttribute('lon')) {
		var point = this.setToMercator(xmlNode.getAttribute('lon'),xmlNode.getAttribute('lat'));
		return new OpenLayers.Geometry.Point(point[0], point[1]);
        }
        return false;
    },
    setToMercator: function(lon, lat) {
    	x = parseFloat(lon);
	y = parseFloat(lat);
	var PI = 3.14159265358979323846;
	x = x * 20037508.34 / 180;
	y = Math.log (Math.tan ((90 + y) * PI / 360)) / (PI / 180);
	y = y * 20037508.34 / 180;
	return new Array(x,y);
    },
    /**
     * 
     */
    clearFeatures: function() {
        if (this.features != null) {
            while(this.features.length > 0) {
                var feature = this.features[0];
                OpenLayers.Util.removeItem(this.features, feature);
                feature.destroy();
            }
        }        
    },
    requestFailure: function(request) {
    },
    moveTo:function(bounds, zoomChanged, dragging) { 
	OpenLayers.Layer.Vector.prototype.moveTo.apply(this, arguments);
//	OpenLayers.Layer.Markers.prototype.moveTo.apply(this, arguments);
        if (!dragging) {
            this.div.style.left = - parseInt(this.map.layerContainerDiv.style.left) + "px";
            this.div.style.top = - parseInt(this.map.layerContainerDiv.style.top) + "px";
            var extent = this.map.getExtent();
            this.renderer.setExtent(extent);
	    for(i=0; i < this.markers.length; i++) {
		marker = this.markers[i];
		lonlat = this.map.getLayerPxFromLonLat(marker.lonlat);
                if (marker.icon.calculateOffset) {
                    marker.icon.offset = marker.icon.calculateOffset(marker.icon.size);
                }
                var offsetPx = lonlat.offset(marker.icon.offset);
		marker.icon.imageDiv.style.left = offsetPx.x+parseInt(this.map.layerContainerDiv.style.left) + "px";
		marker.icon.imageDiv.style.top = offsetPx.y+parseInt(this.map.layerContainerDiv.style.top) + "px";
	    }
		
        }
        if (!this.drawn || zoomChanged) {
            this.drawn = true;
            for(var i = 0; i < this.features.length; i++) {
                var feature = this.features[i];
                this.drawFeature(feature);
            }
        }

    },
    setMap: function(map) {
//		OpenLayers.Layer.Markers.prototype.setMap.apply(this, arguments);
        OpenLayers.Layer.prototype.setMap.apply(this, arguments);

        if (!this.renderer) {
            this.map.removeLayer(this);
        } else {
            this.renderer.map = this.map;
            this.renderer.setSize(this.map.getSize());
        }

    },
    /** @final @type String */
    CLASS_NAME: "OpenLayers.Layer.GPX"
});


HTML-Datei erstellen

Kopiere folgenden Code (achte darauf, dass du auch das erste und letzte Zeichen kopiert hast! Alles von <html> bis </html> einschließlich), füge ihn mit dem Texteditor in eine neue Seite, speichere den Text im neu angelegten Ordner unter dem Dateinamen "ol_track.htm" (ohne ""): 

<html>
<head>
	<title>Simple OSM GpX Track</title>
	<!-- bring in the OpenLayers javascript library
		 (here we bring it from the remote site, but you could
		 easily serve up this javascript yourself) -->
	<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
	<!-- bring in the OpenStreetMap OpenLayers layers.
		 Using this hosted file will make sure we are kept up
		 to date with any necessary changes -->
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script src="http://www.openlayers.org/api/Ajax.js"></script>
<script src="GPX.js"></script>
 
	<script type="text/javascript">
		// Start position for the map (hardcoded here for simplicity,
		// but maybe you want to get from URL params)
		var lat=47.496792
		var lon=7.571726
		var zoom=13
 
		var map; //complex object of type OpenLayers.Map
 
		//Initialise the 'map' object
		function init() {
			map = new OpenLayers.Map ("map", {
				controls:[
					new OpenLayers.Control.Navigation(),
					new OpenLayers.Control.PanZoomBar(),
					new OpenLayers.Control.LayerSwitcher(),
					new OpenLayers.Control.Attribution()],
				maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
							maxResolution: 156543.0399,
				numZoomLevels: 19,
				units: 'm',
				projection: new OpenLayers.Projection("EPSG:900913"),
				displayProjection: new OpenLayers.Projection("EPSG:4326")
			} );
 
			// Define the map layer
			// Note that we use a predefined layer that will be
			// kept up to date with URL changes
			// Here we define just one layer, but providing a choice
			// of several layers is also quite simple
			// Other defined layers are OpenLayers.Layer.OSM.Mapnik, OpenLayers.Layer.OSM.Maplint and OpenLayers.Layer.OSM.CycleMap
			layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
			map.addLayer(layerMapnik);
			layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
			map.addLayer(layerTilesAtHome);
			layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
			map.addLayer(layerCycleMap);
			layerMarkers = new OpenLayers.Layer.Markers("Markers");
			map.addLayer(layerMarkers);
 
// Add the Layer with GPX Track choose the color of the Track (replace #00FF00 by the HTML code of the color you want)
var lgpx = new OpenLayers.Layer.GPX("MB Bruderholz", "mb_bruderholz.GPX", "#00FF00");
map.addLayer(lgpx);
 
			var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
			map.setCenter (lonLat, zoom);
 
			var size = new OpenLayers.Size(21,25);
			var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
			var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
			layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));
		}
	</script>
 
	<link rel="stylesheet" type="text/css" href="map.css">
 
</head>
<!-- body.onload is called once the page is loaded (call the 'init' function) -->
<body onload="init();">
	<!-- define a DIV into which the map will appear. Make it take up the whole window -->
	<div style="width:90%; height:90%" id="map"></div>
</body>
</html>

HTML-Datei anpassen

Die HTML-Datei kannst du nach deinen Wünschen und Bedürfnissen anpassen.

Dazu öffnest Du mit einem Texteditor die Datei "ol_track.htm" und änderst die einzelnen Zeilen:

Kartenmitte und Zoomstufe definieren 
var lon = 47.496792;
var lat = 7.571726;
var zoom = 13;

Die Koordinaten für die gewünschte Kartenmitte und der Wert für die Zoomstufe sind entsprechend anzupassen.

Track anpassen 
// Add the Layer with GPX Track
var GPX-Variable = new OpenLayers.Layer.GPX("angezeigter Name des Layers", "../Pfad/Dateiname.gpx", "#00FF00");

Die Werte für den anzuzeigenden Layer-Namen, die GPX-Datei und die Farben sind entsprechend anzupassen. (Farbtabelle)

mehrere Layer

Wenn mehrere Layer angezeigt werden sollen, kann die Zeile mehrfach eingefügt werden.
Jede Zeile benötigt eine eigene GPX-Variable: GPX-Variable-1, GPX-Variable-2, etc.
Im Aufruf der Funktion   map.addLayers   müssen alle GPX-Variablen eingebunden werden.

Layer aufrufen 
map.addLayer(GPX-Variable);

Bei mehreren Layern müssen mehrere GPX-Variablen eingebunden werden.

Links

Beispiele

Beispiel mit zwei Linien
Bikewald - Beispiel mit verschiedenfarbigen Linien
Darstellung im Firefox

Andere mögliche Lösungen

Anzeige eines GPX-Tracks als OpenLayer in der Karte
Retrieved from "http://wiki.openstreetmap.org/wiki/DE:Openlayers_Track_example"
Personal tools
Namespaces
Variants
Actions
site
Toolbox