Um das GPS-Signal auf eine Weltkarte zu bringen, müssen wir eine HTML Datei erstellen, die wir danach ausführen können über einen Browser. Dafür könnt ihr zum Beispiel den vorinstallierten Windows-Editor nehmen oder Notepad++.

Editor                Notepad++

Abbildung 1: Windows Editor             Abbildung 2: Notepad++

Quelle: BBS 2 Wolfsburg                     Quelle: BBS 2 Wolfsburg


Wenn ihr die Text-Datei abspeichert, nennt gebt ihr das Anhängsel .html (also z.B. GPS.html).


Als erstes geben wir der Ausführung einen Namen, in unserem Fall: "ThingSpeak GPS Tracker". 

<html>
<head>
	<title>ThingSpeak GPS Tracker</title>


Danach rufen wir die Javascript Bibliothek Leaflet und die dazugehörigen Komponenten auf. 

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<style>
		#map_tracker{ height: 100% }
		
</style>


Als nächstes kümmern wir uns um die OpenStreetMaps Karte, die wir in einem neuen Browserfenster öffnen lassen und dann den Ausgangspunkt auf die Koordinaten 0.00000 und 0.00000 setzen. Die 16 dahinter steht für die Höhe, aus der wir auf die Karte schauen.

</head>
<body>

	<div id="map_tracker"></div>

	<script>
		const mymap = L.map('map_tracker').setView([0.00000, 0.000000], 16);
		const attribution ='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';


Danach stellen wir ein, dass die Kacheln, bzw. Felder der Karte ordentlich angezeigt werden.

const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
const tiles = L.tileLayer(tileUrl, { attribution });
tiles.addTo(mymap);


Zur Anzeige unseres Standortes benötigen wir natürlich auch noch einen Marker auf der Karte.

let marker = L.marker([0, 0]).addTo(mymap);


Zusätzlich müssen die Daten aus ThingSpeak gelesen werden, daher binden wir diesen Dienst ein und ergänzen unsere Channel ID und den Read API-Key. In dieser Zeile legen wir auch die Zeitzone fest.

const api_url = 'https://api.thingspeak.com/channels/DEINE_CHANNEL_ID/feeds/last.json?timezone=Europe%2FBerlin&api_key=DEIN_READ_API_KEY';


Jetzt müssen sowohl die GPS-Daten richtig ausgelesen werden, sowie der Zeitpunkt des letzten Standort-Abrufs.

let firstTime = true;
		
async function getLoc() {
const response = await fetch(api_url);
const data = await response.json();
const { created_at, field1, field2 } = data; // field1 = Längengrad, field2 = Breitengrad 
var date_ = created_at.split('T'),
date_now = date_[0], time_z = date_[1];
var time_ = time_z.split('+'), time_now=time_[0];


Die getZoom() Methode gibt die aktuelle Zoomstufe der Karte.

mymap.setView([field1, field2], mymap.getZoom());


Als nächstes muss das Popup noch konfiguriert werden, das auftaucht, wenn man auf den Marker klickt und Datum, Uhrzeit und die Koordinaten anzeigt.

var customPopup="<b>Letzte Datenaufnahme<br>"+date_now+" "+time_now+"</b><br><b>Breitengrad: </b>"+field1+" <br><b>Längengrad: </b>"+field2;
		  marker.setLatLng([field1, field2]);
		  marker.bindPopup(customPopup).addTo(mymap);


Zum Schluss sagen wir noch, dass die Daten alle 5 Sekunden neu aus ThingSpeak abgefragt werden.

getLoc();
setInterval(getLoc, 5000); //alle 5000ms Sekunden neu laden
		
</script>
</body>
</html>


Nun kann die Datei wie oben beschrieben abgespeichert und mit einem Doppelklick ausgeführt werden.

Last modified: Thursday, 8 October 2020, 3:59 PM