Melacak Lokasi Sesorang dengan Web Programming HTML dan Leflet.js

Melacak Lokasi Sesorang dengan Web Programming HTML dan Leflet.js

Melacak lokasi seseorang di tanpa izin tidak etis dan melanggar hukum ini saya berikan untuk pembelajaran bagaimana proses tracking sampai menampilkan ke maps. Tindakan semacam ini melanggar kebijakan privasi platform, peraturan GDPR, dan undang-undang perlindungan privasi lainnya. TikTok tidak menyediakan API atau mekanisme untuk mendapatkan lokasi seseorang tanpa izin pengguna.

Untuk memahami Leaflet kamu harus memahami penggunaan dasar-dasar Leaflet secara detail.

Namun, jika Anda ingin belajar menggunakan Leaflet.js untuk melacak lokasi dengan izin pengguna pada aplikasi Anda sendiri, saya dapat memberikan contoh implementasi. Berikut adalah cara menampilkan lokasi pengguna pada peta menggunakan Leaflet.js dengan izin mereka.

Adapun source code HTML lengkapnya sebagai berikut:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Melacak Lokasi dengan Leaflet.js</title>

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<style>
#map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<h1>Peta Lokasi Saya</h1>
<button id="getLocation">Tampilkan Lokasi Saya</button>
<div id="map"></div>


<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script>
// Inisialisasi peta
const map = L.map('map').setView([0, 0], 2); // Default ke koordinat 0,0 dengan zoom level 2

// Tambahkan tile layer dari OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);

// Fungsi untuk mendapatkan lokasi pengguna
document.getElementById("getLocation").addEventListener("click", function () {
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(
function (position) {
const lat = position.coords.latitude;
const lng = position.coords.longitude;

// Perbarui peta ke lokasi pengguna
map.setView([lat, lng], 13);

// Tambahkan marker di lokasi pengguna
L.marker([lat, lng]).addTo(map)
.bindPopup("Anda berada di sini.")
.openPopup();
},
function (error) {
// Menangani error
alert("Gagal mendapatkan lokasi: " + error.message);
}
);
} else {
alert("Geolocation tidak didukung oleh browser ini.");
}
});
</script>
</body>
</html>

Penjelasan Mengenai Kode Program HTML diatas sebagai berikut:

Leaflet.js:
- Pustaka ini digunakan untuk menampilkan peta interaktif.
- Peta dimulai dengan tampilan default (koordinat 0,0) dan diatur ulang berdasarkan lokasi pengguna.
Geolocation API:
- Browser meminta izin kepada pengguna untuk mengakses lokasi mereka.
- Jika pengguna memberikan izin, lokasi mereka akan diambil dan digunakan untuk memperbarui peta.
Tombol "Tampilkan Lokasi Saya":
- Memulai permintaan lokasi saat diklik.
- Lokasi pengguna ditampilkan sebagai marker pada peta.
Keamanan HTTPS:
- Geolocation API hanya berfungsi pada situs dengan koneksi HTTPS atau saat diakses melalui localhost.

Melacak Lokasi Sesorang dengan Web Programming HTML dan Leflet.js