Teknologi web gis memungkinkan pengguna untuk mengetahui lokasi terkininya (current location), namun fitur ini hanya bekerja pada secure contexts yaitu menggunakan protokol HTTPS. Kalian dapat menggunakan API Geolocation dengan memanfaatkan metode getCurrentPosition(). Untuk menyingkat penggunaan API Geolocation, leaflet memiliki fitur sendiri yang cukup mudah digunakan yaitu dengan menggunakan metode.locate(),
sekedar informasi tulisan berikut ditulis berdasarkan tutorial leaflet pada link ini
Perhatikan potongan kode berikut,
map.locate({setView: true, maxZoom: 16});kode map.locate(); sudah mampu mendapatkan locasi perangkat yang kalian gunakan namun untuk membuatnya lebih nyaman untuk dilihat gunakan opsi setView dan berika nilai true, sedangkan maxZoom : 16 adalah opsi untuk membatasi maksimal level zoom hingga 16 x.
Pada saat ini lokasi perangkat kalian telah ditemukan namun belum ada marker yang menandakannya, untuk membuatnya gunakan kode berikut ini
function onLocationFound(e) {
var radius = e.accuracy;
L.marker(e.latlng).addTo(map);
L.circle(e.latlng, radius).addTo(map);
}
map.on('locationfound', onLocationFound);Kode tersebut sudah selesai, namun alangkah baiknya untuk menampilkan pesan kesalahan jika geolocation tidak bekerja, berikut kodenya
function onLocationError(e) {
alert(e.message);
}
map.on('locationerror', onLocationError);kode lengkapnya adalah sebagai berikut
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--include css-->
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin=""/>
<style>
#map, body {
margin: 0 !important;
padding: 0 !important;
height: 100vh;
}
</style>
<!--include javascript-->
<script
src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin=""></script>
<title>Leaflet Mendapatkan lokasi perangkat</title>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var map = L.map('map').fitWorld();
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
map.locate({setView: true, maxZoom: 16});
function onLocationFound(e) {
var radius = e.accuracy;
L.marker(e.latlng).addTo(map);
L.circle(e.latlng, radius).addTo(map);
}
map.on('locationfound', onLocationFound);
</script>
</body>
</html>