<html>
<head>
	<title>ThingSpeak GPS Tracker</title>
	<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>
</head>
<body>

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

	<script>
		const mymap = L.map('map_tracker').setView([0.00000, 0.000000], 16); // Standard-Sicht einstellen
		      const attribution ='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
		
		      const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
		      const tiles = L.tileLayer(tileUrl, { attribution });
		      tiles.addTo(mymap);
		
		      let marker = L.marker([0, 0]).addTo(mymap);
                    //hier deine Channel ID und deinen Read API-Key eingeben
		   const api_url = 'https://api.thingspeak.com/channels/DEINE_CHANNEL_ID/feeds/last.json?timezone=Europe%2FBerlin&api_key=DEIN_READ_API_KEY';
		   
		
		      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];
		  
		        // Zoom anzeigen
		        mymap.setView([field1, field2], mymap.getZoom());
		  
		  //Popup erstellen
		  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]); // Breitengrad-Längengrad setzen
		  marker.bindPopup(customPopup).addTo(mymap);
		      }
		
		      getLoc();
		      setInterval(getLoc, 5000); //alle 5 Sekunden neu laden
		
	</script>
</body>
</html>

Last modified: Monday, 28 June 2021, 7:17 PM