Auf vielfachen Wunsch habe ich nun alles zusammen um die Scripte für die Routendarstellung zu veröffentlichen. Achtung: ihr benötigt zuerst die die GPS-Daten in der Datenbank. Wie ich das gelöst habe, habe ich hier beschrieben: GPS Position des Wohnmobils speichern und mit Google Maps ausgeben

Zu Beginn hatte ich eine Lösung direkt auf die GPS Datenbank. Der Nachteil dieser Lösung war aber, dass ich die einzelnen Routen nicht unterscheiden konnte und die Linien relativ unsauber wurden, weil es zu viele Datenpunkte gab (Standzeiten usw).

Daher habe ich mich entschieden, die Routen in einer zusätzliche Tabelle auszulagern. So kann ich nach einer Tour angeben von wann bis wann die Daten in eine Route übernommen werden sollen. Das Ergebnis ist deutlich einfacher zu handeln für Maps.

Vorbereitung der Datenbank

Zuerst habe ich die Datenbank um zwei weitere Tabellen “routen” und “routen_details” ergänzt. Die Felder der Detail-Tabelle sind entsprechend der Felder meiner GPS-Datenbank. Lediglich die letzte Spalte wurde hinzugefügt und verknüpft die Detail-Daten mit der Route.

In der Tabelle Routen habe ich lediglich 3 Spalten: id, name und datum. Damit kann ich eine Tour mit einem Namen versehen und so die einzelnen Touren unterscheiden:

Tabelle routen

Die Detail-Tabelle speichert die einzelnen Werte dieser Route. Sie ist (fast) analog zur Haupttabelle aufgebaut:

Tabelle routen_details

Neue Tour anlegen

Um eine neue Tour anzulegen übergebe ich aus meinem Formular Startdatum, Enddatum sowie eine Bezeichnung. Die Tour wird dann mit dieser Bezeichnung angelegt und alle Werte aus der Hauptdatenbank (GPS Position, Geschwindigkeit und Höhe über Meer) werden in die routen_detail Tabelle kopiert.

Das nachfolgende SQL Script (create_route.php) wird vom Formular aufgerufen und legt die neue Route an. Ich habe es noch etwas modifiziert, dass nur Werte aus der Hauptdatenbank kopiert werden, bei denen die Geschwindigkeit über 5km/h (im Script: WHERE pos_speed > 5 ) liegt. Dadurch bekomme ich nur Werte kopiert, wenn sich das WoMo auch bewegt.

<?php
## Formularfelder für Start / Ende und Name sowie das aktuelle Datum
$von = $_POST['von'];
$bis = $_POST['bis'];
$Name = $_POST['RName'];
$AktDatum = date("Y-m-d H:i:s");   

include_once('db_conf.php');

## Neue Route anlegen
$db = mysqli_connect ("$dbhost","$dbuser","$dbpw") or die(mysqli_error()." - Serverzugriff gescheitert!");
mysqli_select_db($db, $database) or die(mysqli_error()." - Datenbankzugriff gescheitert!");

$route_sql = "insert into routen (route_name, route_datum) VALUES ('".$Name."', '".$AktDatum."');"; 

mysqli_query($db, $route_sql);

$lastid = mysqli_insert_id($db);   #letzte ID der Datenbank

## Daten aus Positionen kopieren
$sql = "INSERT INTO routen_detail (`rdetail_breitengrad`,`rdetail_laengengrad`,`rdetail_date`,`rdetail_heigh`,`rdetail_sat`,`rdetail_speed`,`rdetail_course`, `rdetail_routeID`) 
		SELECT `pos_breitengrad`,`pos_laengengrad`,`pos_date`,`pos_heigh`,`pos_sat`,`pos_speed`,`pos_course`, ".$lastid." FROM `position` 
		WHERE pos_speed > 5 
		and pos_date >= '".$von."'
		and pos_date <= '".$bis."' ";

mysqli_query($db, $sql);
?>

Anzeigen der Route auf einer Karte

Um eine Route in MAPS anzuzeigen kann man die Pfad-Funktion in GoogleMaps nutzen. Diese letzt zwar nur einzelne Linien an und “fährt” nicht exakt die Straße nach, aber wenn man genug Werte hat, ist das ausreichend.

Das nachfolgende Script zeigt die Route auf einer ganzseitigen Google-Maps Karte an. Die jeweilige Route wird als URL-Parameter übergeben und die einzelnen Werte dann aus der Datenbank geholt und an Maps übergeben.

Anpassungen für euch:

Ziemlich in der Mitte ist der Mittelpunkt der Karte festgelegt. Dort könnt ihr die Karte für eure Bedürfnisse “zentrieren”:
const myLatLng = { lat: 48.626124816667, lng: 9.8133244 };

Ebenso kann mit dem Wert: “zoom: 10” (in Zeile 44) der Zoom-Start-Wert der Karte festgelegt werden.

WICHTIG: In Zeile 72 ist euer Google-API KEY einzutragen!

<?php
include_once('db_conf.php');

$route_ID = $_GET['RouteID'];

$db= mysqli_connect ("$dbhost","$dbuser","$dbpw") or die(mysqli_error()." - Serverzugriff gescheitert!");
mysqli_select_db($db, $database) or die(mysqli_error()." - Datenbankzugriff gescheitert!");
 
 $abfrage = "SELECT * FROM `routen_detail` where rdetail_routeID = ".$route_ID;

 $ergebnis= mysqli_query ($db, $abfrage);
?>


<html>
  <head>
    <title>WoMoMap</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
	   }
		  
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
    var map;
	  
	function initMap() {
		const myLatLng = { lat: 48.626124816667, lng: 9.8133244 };
		const map = new google.maps.Map(document.getElementById("map"), {
		zoom: 10,
		center: myLatLng,
	});

	const flightPlanCoordinates = [
	
<?php	
 while ($zeile = mysqli_fetch_array( $ergebnis, MYSQLI_ASSOC))
 {
	echo "	{ lat: ".$zeile['rdetail_breitengrad'].", lng: ".$zeile['rdetail_laengengrad']." }, ";
 }	
?>		
	];

	const flightPath = new google.maps.Polyline({
		path: flightPlanCoordinates,
		geodesic: true,
		strokeColor: "#FF0000",
		strokeOpacity: 1,
		strokeWeight: 3,
	});

  flightPath.setMap(map);

	
	}
     
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=<GOOGLE API KEY>&callback=initMap" async defer></script>
 
 </body>
</html>

Scripte als Download

Ich habe euch alle Scripte für die Anzeiger der Position als Download abgelegt. Die Nutzung ist frei, ich freue mich aber, wenn ihr mich verlinkt oder ein Feedback hier hinterlasst. Natürlich auch, wenn ihr mich bei euren Projekten mal erwähnt 😉

Ladet die Scripte hier herunter und entpackt sie in einer beliebiges Verzeichnis auf eurem Server. In der Readme Datei ist dann noch angegeben, was ihr anpassen müsst. Viel Spaß

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein