Scribd
Upload
14 views

Location Plotter - HTML

it is ok

Uploaded by

Ashraf Insura
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
14 views

Location Plotter - HTML

it is ok

Uploaded by

Ashraf Insura
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

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/[email protected]/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/[email protected]/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/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>

You might also like