<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GPS Tracking</title>
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style> #map {height: 500px;}</style>
</head>
<body>
<!-- Top Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">GPS Tracking</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<!-- Add more navigation items as needed -->
</ul>
</div>
</div>
</nav>
<!-- Main Content -->
<div class="container-fluid mt-4">
<div class="row justify-content-center">
<div class="col-lg-8">
<div id="map"></div>
</div>
</div>
</div>
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<!-- Bootstrap JS (optional) -->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
crossorigin="anonymous"></script>
<!-- Custom JavaScript -->
<script>
var map = L.map('map').setView([0, 0], 15);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Function to fetch data from the API
function fetchData() {
// Replace 'YOUR_API_ENDPOINT' with the actual API endpoint
var apiUrl =
'https://api.thingspeak.com/channels/XXXXX/feeds/last.json?timezone=Asia
%2FJakarta&api_key=XXXXXXXX';
// Fetch data from the API
fetch(apiUrl)
.then(response => response.json())
.then(data => {
// Update the map with the new data
console.log('Response JSON:', data);
updateMarker(data);
})
.catch(error => console.error('Error fetching data:', error));
}
// Function to update markers on the map
function updateMarker(location) {
var latLng = [parseFloat(location.field1),
parseFloat(location.field2)];
// Remove existing marker
map.eachLayer(function (layer) {
if (layer instanceof L.Marker) {
map.removeLayer(layer);
}
});
// Add new marker based on the API response
var marker = L.marker([parseFloat(location.field1),
parseFloat(location.field2)])
.addTo(map);
map.setView(latLng, map.getZoom());
}
// Initial fetch when the page loads
fetchData();
// Fetch data every 10 seconds (adjust the interval as needed)
setInterval(fetchData, 10000);
</script>
</body>
</html>
