Script untuk Mengambil Lokasi User di Browser

Lokasi user terkadang menjadi informasi yang penting ketika sebuah aplikasi menerapkan layanan berbasis lokasi pada fiturnya. Misalnya ada aplikasi olshop yang memberikan fitur COD pada konsumennya. Proses COD atau Cash On Delivery tentu hanya bisa dilakukan jika konsumen berada di jangkauan agen pengiriman olshop. Makanya, pengambilan informasi lokasi user menjadi prioritas utama ketika kita ingin menerapkan fitur tersebut. Lalu bagaimana kita mengambil data lokasi user melalui browser?

Jika kita memiliki aplikasi web, tentu satu-satunya jalan adalah menggunakan jalan pemrograman JS atau dikenal dengan javascript. Lalu dengan JS code yang bakal kita racik itu, kita mencoba memperoleh data lokasi tersebut melalui browser. Itupun atas izin user dan website yang kita punya memiliki koneksi SSL atau gampangnya sudah menerapkan protokol HTTPS.

Jadi ada 3 hal yang akan kita bahas:

1. JS Code untuk mengambil lokasi
2. Website harus HTTPS
3. Permintaan akses lokasi diizinkan oleh user

Kode Pengambilan Lokasi

Dalam Web/Browser terdapat API bernama Navigator yang dapat diakses untuk memperoleh dan mengolah tentang data lokasi atau lebih tepatnya geolocation.
Yaitu dengan memanggil method bernama getCurrentPosition.

// minimal hanya menyediakan successCallbacknya
navigator.geolocation.getCurrentPosition(successCallback)
// lengkap sampai errorCallback dan Options
navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options)

Sesuai dengan dokumentasi, terdapat satu parameter yang wajib yaitu fungsi yang dipanggil ketika pengambilan
data lokasi berhasil. Sisanya optional yaitu fungsi yang dipanggil ketika terjadi error dan object data untuk opsi/konfigurasi.

Success Callback

Fungsi yang dipanggil ketika sukses akan memiliki parameter berbentuk GeolocationPosition yang
terdiri dari beberapa atribut diantaranya:

• coords (GeolocationCoordinates)

  1. accuracy : menandakan seberapa akurasi lokasinya
  2. altitude : ketinggian
  3. altitudeAccuracy : seberapa akurasi untuk ketinggiannya
  4. heading : terkait data akselerometer, device mengarah kemana 0-360 derajat, NaN jika stasioner
  5. latitude : garis lintang
  6. longitude : garis bujur
  7. speed : kecepatan device, biasanya yang mengimplementasikan akselerometer.

• timestamp

  

Artinya, kita harus menyediakan suatu fungsi yang memiliki tepat satu parameter untuk
menangkap data GeolocationPosition dari callbacknya. Misalnya seperti ini:

function successCallback(geolocation){
    let {latitude,longitude} = geolocation.coords;
    
    alert(`Lat: ${latitude}, Long: ${longitude}`);
}
navigator.geolocation.getCurrentPosition(successCallback);

Atau jika mau menggunakan Arrow Function juga bisa:

const successCallback = (geolocation) => {
    let {latitude,longitude} = geolocation.coords;
    
    alert(`Lat: ${latitude}, Long: ${longitude}`);
}
navigator.geolocation.getCurrentPosition(successCallback);

Mau dibuat inline juga bisa:

navigator.geolocation.getCurrentPosition(function(geolocation){
    let {latitude,longitude} = geolocation.coords;

    alert(`Lat: ${latitude}, Long: ${longitude}`);
})

Atau inline Arrow Function:

navigator.geolocation.getCurrentPosition(({coords, timestamp}) => {
    let {latitude,longitude} = coords;

    alert(`Lat: ${latitude}, Long: ${longitude}`);
})

Dengan demikian Anda bisa mengambil latitude, longitude dari geolocation browser. Untuk parameter-parameter
lainnya juga dapat diambil namun tidak semua parameternya ada karena tidak setiap device memiliki sensor yang lengkap.

Jika Anda sudah bisa mendapatkan latitude, longitude dari user, Anda dapat melakukan
integrasi dengan google maps, leaflet atau platform-platform lain yang dapat menampilkan
dan menggambarkan posisi user dalam maps. Ataupun mengolahnya dengan algoritma-algoritma yang Anda inginkan.

Error Callback

Fungsi ini dipanggil jika terdapat error dalam pengambilan data lokasi user. Banyak hal kemungkinannya, diantaranya
tidak mendapatkan izin user, fitur geolocation tidak ada di browser tersebut, timeout dll. Sederhananya, siapkan satu fungsi dengan satu parameter
yang digunakan untuk log / mengolah error yang terjadi. Seperti contoh dibawah ini:

function successCallback(geolocation){
    let {latitude,longitude} = geolocation.coords;

    alert(`Lat: ${latitude}, Long: ${longitude}`);
}
function errorCallback(err){
    console.warn(`Terjadi Kesalahan (${err.code}): ${err.message}`)
}
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

Options

Terdapat opsi untuk mengatur pengambilan geolocation. Sesuai dokumentasi PositionOptions terdapat
3 parameter yang dapat diatur:

1. enableHighAccuracy : defaultnya false, boolean, mengatur tingkat akurasinya, semakin akurasi tinggi semakin membutuhkan waktu dan energi (terkait power saving)
2. timeout : integer long, untuk mengatur waktu timeout
3. maximumAge : defaultnya 0; waktu cache dari lokasi, jika diset 0 maka geolocation harus mengambil data yang baru, jika diset N milliseconds berarti lokasi akan dicache selama N milliseconds, selebihnya harus ambil ulang.

   Website harus HTTPS

   Perlu dipahami bahwa standar website yang bisa menggunakan fitur ini hanyalah
   website yang sudah menerapkan SSL atau protokol HTTPS. Tetapi hal ini tidak menjadi masalah ketika
   Anda ingin mencobanya secara offline melalui localhost. Namun, jika ingin mengimplementasikan ke versi produksi, maka Anda harus memastikan website Anda sudah HTTPS. Jika tidak, maka akan keluar error di console seperti ini:
   

Izin Akses Lokasi

User memiliki hak untuk menolak izin akses lokasi oleh browser. Tetapi, jika Anda memiliki
tujuan yang baik, dan dipercaya oleh user, maka ini tidak menjadi masalah yang besar.

Setiap kali fungsi getCurrentPosition dipanggil, maka akan tampil permintaan izin dari browser
ke user. Seperti tampilan berikut ini:

Akurasi

Untuk device user yang memiliki manajemen lokasi yang baik seperti smartphone, tab, atau apapun yang memiliki hardware GPS
akurasinya cukup baik dan akurat. Namun untuk device yang hanya mengandalkan geolocation dari ISP / penyedia internet, biasanya
pengambilan informasi lokasi yang dihasilkan mengikuti letak ISPnya.

Kesimpulan

Apabila website Anda mayoritas digunakan oleh user mobile, pengambilan geolocationnya
cukup bisa diandalkan karena informasi lokasi dari browser didapat dari GPS. Namun, jika
aplikasi Anda diakses oleh pengguna PC / Laptop yang umumnya tidak memiliki manajemen lokasi
yang akurat, maka hasil geolocationnya juga tidak bisa diandalkan.