OSM Karte in Webseite einbinden und GPX file automatisch auslesen

Communities Deutschland (Germany)
1

Hi zusammen!

Der Router auf meiner Hochsee-Segelyacht sendet alle 5 Minuten eine GPS Position an meine MySQL-Datenbank. Außerdem erzeuge ich daraus automatisiert alle 5 Minuten eine gpx-Datei mit einem Track aus den Wegpunkten der letzten 7 Tage und stelle diese Datei auf meinen Webserver ab.

Nun möchte ich gerne eine OSM-Karte in meine Wordpress-Webseite einbinden, bei welcher dieses gpx-track-file automatisch beim Aufruf der Webseite eingelesen und der Track auf der Karte dargestellt wird.

Die Anzeige der Karte müsste nicht zwingend über ein bestehendes Wordpress-Plugin erfolgen (ich habe kein passendes dafür bisher gefunden). Ich kann auch php und html Code in meine Wordpress Pages einbinden und ausführen

Wir könnte man das am besten lösen?

2

Das sollte mit leaflet oder openlayers gehen.

3

Mit leaflet und dem Plugin omnivore ist das fast ein Einzeiler. In Deinem Fall gilt es aus den GPX-Daten den Kartenausschnitt zu bestimmen. Da Du Deine Position alle fünf Minuten sendest, ist das ja kein Problem.

Hier ein Beispiel (einer Rennradtour): Leaflet - GPX file

relevanter Codeausschnitt:

<div id="mapid" style="width: 1000px; height: 800px;"></div>

<script>
		
	// Basemap, in meinem Beispiel in etwa das Saarland
 	// für Deinen Bedarf dynamisch mit Deiner Position anpassen
	var mymap = new L.map('mapid').setView([49.35, 6.90], 10);

	// tile layer with attribution
	L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
		maxZoom: 19,
		attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
	}).addTo(mymap);
	
	//  gpx file zur map hinzufügen
	omnivore.gpx('saarlandschwein3.gpx').addTo(mymap)	
</script>
4

Das sieht ziemlich gut aus, vielen Dank dafür.
Kann man auch noch einen Waypoint als aktuelle Position hinzufügen? Also z.B. den letzten (jüngsten) Waypoint speziell in der Karte markieren?

5

Ja klar, siehe dazu DE:Leaflet Simple Marker Example - OpenStreetMap Wiki

6

Ich habe der Einfachheit halber das Wordpress-Plugin “Leaflet Map” installiert.
Die Karte und die aktuelle Position werden schon mal perfekt angezeigt.
Danke also schon mal für den “heißen” Tipp bzgl. “Leaflet”.

Im vorgenannten Wordpress-Plugin wird die Möglichkeit mit Shortcode-Beispielen angezeigt, wie man einen Track aus eine gpx-Datei ausliest und anzeigt mit folgendem Code:

[leaflet-gpx src=https://cdn.jsdelivr.net/gh/mapbox/togeojson@master/test/data/run.gpx color=black]

Wenn ich dort nun meine gpx Testdatei verlinke, wird der Track nicht angezeigt.

Vielleicht ist meine gpx-Datei nicht wie erwartet, könntet Ihr das mal bitte bewerten?

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<gpx xmlns="http://www.topografix.com/GPX/1/1" version="1.1" creator="Your GPX Creator">
  <metadata>
    <name>Beispieltrack</name>
    <desc>Ein einfacher GPX-Track mit 3 Wegpunkten</desc>
    <author>
      <name>Ihr Name</name>
    </author>
  </metadata>
  <trk>
    <name>Wanderung im Park</name>
    <trkseg>
      <trkpt lat="41.25878496244537" lon="1.921585381364326">
        <ele>300</ele>
        <time>2023-09-05T10:00:00Z</time>
      </trkpt>
      <trkpt lat="40.624451" lon="2.920311">
        <ele>310</ele>
        <time>2023-09-05T10:15:00Z</time>
      </trkpt>
      <trkpt lat="40.084445" lon="4.030100">
        <ele>320</ele>
        <time>2023-09-05T10:30:00Z</time>
      </trkpt>
    </trkseg>
  </trk>
</gpx>

Besten Dank Euch vorab!

7

Ergänzung:

Ich nutze in dem Plugin folgenden Shortcode:

[leaflet-map lat=41.25229817166762 lng=2.6779601097922616 zoom=9 zoomcontrol detect-retina]

[leaflet-marker visible]ARGO[/leaflet-marker]

[leaflet-gpx src=https://tracking.argo-yacht.de/test-track.gpx color=black]
8

Wenn ich dort nun meine gpx Testdatei verlinke, wird der Track nicht angezeigt.

Vielleicht ist meine gpx-Datei nicht wie erwartet, könntet Ihr das mal bitte bewerten?

ist die Datei an dem angegebenen Ort? Vielleicht ein CORS Problem? Sieh dir mal die Console an im Developer modus, ob es da Fehler gibt. http vs https ist ein typischer Fehler z.B.