3. Geo-Daten auf der eigenen Webseite anzeigen
Wer eine längere Fahrradtour oder Wanderung mit einer App aufgezeichnet hat, möchte diese vielleicht für einen Bericht oder Blog-Eintrag auf der eigenen Webseite anzeigen. Dafür gibt es eine Reihe von Tools mit verschiedenen Optionen.
Wenn Sie bereits wissen, dass Sie die aufgezeichneten Daten aus einer App weiterverwenden möchten, emp ehlt es sich, vor der Tour zu testen, in welchen Formaten Sie diese Daten überhaupt exportieren können. Viele Geräte unterstützen das Format GPX ( GPS Exchange Format), üblich ist auch KML (Keyhole Markup Language). Beide Formate basieren auf XML. Ein Export aus zum Beispiel der App Komoot liefert eine GPX-Datei mit einer Reihe von Trackpunkten im Format:
Neben der geogra schen Breite ( lat) und Länge ( lon) beinhaltet der Trackpunkt auch die Höhenmeter ( ele) und den Zeitpunkt ( time). 1 GPX-Dateien zusammenfassen: Vielleicht waren Sie längere Zeit unterwegs und haben in der App mehrere Strecken aufgezeichnet, die Sie aber zusammenhängend anzeigen möchten. Dafür kann es nützlich sein, die verschiedenen GPXDateien zu einer einzelnen zusammenzufassen. Statt sich selbst durch die Dateien zu wühlen, können Sie besser das Tool unter joewein.net/bike/gpxmerge/ nutzen. Dort laden Sie bis zu fünf GPX-Dateien hoch und erhalten das zusammengefasste GPX-File zurück. 2 Import in Google Maps: Wenn Sie bei Google angemeldet sind, reichen ein paar Klicks, um Ihre Daten in Google Maps zu importieren. Unter google.com/maps/d/ sehen Sie eine Übersicht über eigene Karten. Über den Button oben links können Sie eine Neue Karte erstellen. Im nächsten Screen gibt es links den Link Importieren. Darüber laden Sie eine CSV-, XLSX-, KMLoder GPX-Datei hoch. Die erzeugte Karte können Sie nun bearbeiten, um etwa die Farbe der Route zu ändern oder bestimmte Orte zu markieren. Es gibt auch die Möglichkeit, neue Ebenen anzulegen, die ein Benutzer dann aus- und einschalten kann. Sie können diese Ebenen verwenden, um Teilstrecken zu unterscheiden oder aber um die markierten Orte zur besseren Übersicht auf einer eigenen Ebene zu sammeln. Wenn Sie fertig sind, geben Sie die Karte frei, um sie über einen Link zu teilen. Wie üblich können Sie auch den HTML-Code für ein iframe generieren. 3 GPS Visualizer: Das Tool gpsvisualizer. com bietet eine ganze Palette an Optionen. Sie können Ihre Daten wahlweise per Google Maps oder Lea et + Open Street Maps anzeigen. Ebenso können Sie die Daten in das Format KML umwandeln, um sie in Google Earth zu nutzen. Oder Sie generieren die Karte als PNG, JPG oder SVG
– wobei das SVG zwar die Route als Vektor darstellt, für die Landkarte im Hintergrund aber ein statisches JPG verwendet. Beim Export für Google Maps oder Lea et können Sie eine ganze Reihe von Optionen kon gurieren. So können Sie etwa zwischen verschiedenen Kartentypen, Farben und Icons wählen. Nützlich ist die Einstellung für den Trackpoint distance threshold. Eine App zeichnet meist viel mehr Punkte auf als Sie benötigen. Mit dem Treshold legen Sie einen Mindestabstand zwischen den Punkten fest, sodass die Route geglättet wird.
Die generierte Karte können Sie als kommentierte HTML-Datei herunterladen. Es ist nicht so schwierig, diesen Code in eine andere HTML-Seite zu integrieren. Je nachdem, welche Services Sie benutzen, sind aber eigene API Keys notwendig, etwa für Google Maps oder OpenStreetMap Tiles von ThunderForest. 4 GPX Plug-in for Lea et: Wenn Sie lieber direkt mit GPX-Dateien arbeiten möchten, bietet sich ein entsprechendes Plug-in für Lea et von Maxime Petazzoni an ( bit.ly/3oZdUTS). Das ist nützlich, wenn Sie mehr Spielraum für eigene Ergänzungen haben möchten. Etwa, um nicht nur Orte zu markieren, sondern auch noch Schnappschüsse unterzubringen. Oder für Vor- und Zurück-Buttons, um von Ort zu Ort zu springen. Hierbei sind aber JavaScript-Kenntnisse nötig, um die Möglichkeiten des Plug-ins auszuschöpfen.
Über die Eigenschaft pointer fragen Sie ab, wie fein die Spitze eines Eingabegerätes ist. @media (pointer: none) {
/* CSS für Geräte, die keinen Cursor unterstützen, weil sie z.B. nur über Tasten gesteuert werden */ }
@media (pointer: coarse) { /* CSS für eine grobe Spitze, etwa einem Finger */ }
@media (pointer: fine) {
/* CSS für eine feine Spitze, etwa einem Stift oder einem Cursor */ }
Diese Eigenschaften werden von allen modernen Browsern unterstützt ( bit.ly/38d6573). Die Internet Explorer verstehen diese Media Queries zwar nicht, spielen auf mobilen Geräten aber keine Rolle.