closeDieser Beitrag wurde vor mehr als sechs Monaten veröffentlicht. Bedenke bitte, dass die hier angebotene Information nicht mehr aktuell und gültig sein könnte. Informiere dich daher bitte auch an anderer Stelle über dieses Thema. Sollten sich neue Informationen ergeben haben, so kannst du mich auch gerne auf diese über einen Kommentar hinweisen. Vielen Dank!

Seitdem ich die Möglichkeit habe GPS-Tracks via Samsung Galaxy und MyTracks aufzuzeichnen, interessiert es mich die gewonnenen Tracks Anderen zur Verfügung zu stellen.

Via Google Maps geht das recht einfach, doch die OpenStreetMap hat einige Vorteile wenn die Tracks zu Fuß oder mit dem Rad erstellt wurde. Kleinere Radwege oder Wanderwege sind oft nur bei der OSM ordentlich geocodiert. Google Maps beschränkt sich eher auf befestigte Straßen, die auch von Autos befahren werden können.

GPS-Track via OSM in Webseite einbetten

Allerdings ist es etwas aufwändiger die OSM in eine Webseite einzubetten, bei Google Maps gibt es rechts oben direkt die Option den Code zum Einbetten der Karte in eine Webseite zu generieren, solche eine Option fehlt in der OpenStreetMap noch. Doch mit einem praktischen Skript von Rejo Zenger, klappt das auch mit der OSM in wenigen Minuten…

Ihr müsst nicht mehr tun, als Euren .gpx-Track auf Euren Webspace zu laden, und dann das Skript von Rejo Zenger verwenden. So muss man keine Skripte auf dem eigenen Webspace installieren. Letztendlich sieht der Code etwa so…

<iframe
src="https://rejo.zenger.nl/topo/osm/?fn=[url-der-gpx-datei]"
	width="[breite-des-eingebetteten-bildes]"
	height="[hoehe-des-eingebetteten-bildes]"
	frameborder="0">
</iframe>

…aus. Ihr müsst die URL zur .gpx-Datei, sowie Höhe und Breite der Karte eintragen. Das Ergebnis könnt Ihr hier betrachten…

Dabei werden automatisch die wichtigen Lizenzinformationen der OSM in die Karte eingezeichnet.

Höhenprofil generieren und einbetten

Optional könnt ihr auch ein Höhenprofil generieren das Ihr ebenfalls ohne den Einsatz von Skripten in Eure Seite einbetten könnt. Ich würde dazu gpxplot verwenden, das ebenfalls eine API bietet, die Ihr via…

<img src="http://gpxplot.appspot.com/api/0.1.2/plot?gpxurl=[url-der-gpx-datei]&output=png" alt="Elevation profile" width="600" height="400">

…nutzen könnt. Das Ergebnis ist ein Bild mit dem Höhenprofil und einer Skala. Achtet darauf für das Bild ein Höhen/Breiten-Verhältnis von 2/3 zu verwenden, also beispielsweise 400×600 Pixel, sonst werden die Schriften nicht schön skaliert.

Elevation profile

Google Maps hat natürlich den Vorteil, dass der Betrachter der Webseite auf die Satellitenansicht umschalten kann, doch die sympathischere Lizenz und das bessere Kartenmaterial (wenn es um kleine Wege geht) machen in meinen Augen den Nachteil wieder wett. Man kann ja noch zusätzlich auf Google Maps verlinken.

Das könnte Euch auch gefallen...

Anzeige...