Pernah kan teman – teman melihat sebuah situs yang meminta kita atau menunjukkan sebuah notifikasi pada browser/smartphone kita mengenai permintaan pembacaan koordinat kita saat ini ? Nah pada kesempatan tutorial kali ini kita akan membahas mengenai bagaimana cara mengetahui koordinat kita saat ini menggunakan script HTML dan Javascript.
Untuk mengetahui lokasi kita menggunakan HTML khususnya HTML 5, kita menggunakan fitur yang namanya HTML5 API Geolocation. Fitur geolokasi HTML5 memungkinkan kita untuk mengetahui koordinat geografis (angka lintang dan bujur). Fitur ini berguna untuk memberikan pengalaman browsing konten yang lebih baik kepada pengunjung situs web. Misalnya, Teman – teman membuat suatu situs pemetaan bencana maka dengan menggunakan fitur ini kita dapat membuat sebuah hasil pencarian yang secara fisik dekat dengan lokasi pengguna.
Cara Penggunaan
Teman – teman sering kali ingin mengambil informasi lokasi pengunjung di aplikasi website teman-teman, misalnya untuk memplot lokasinya di peta, atau menampilkan informasi yang dipersonalisasi yang relevan dengan lokasinya.
API Geolokasi diakses dengan melakukan pemanggilan fungsi navigator.geolocation. Fungsi ini ini akan menyebabkan browser pengunjung situs kita meminta izin untuk mengakses data lokasi mereka. Jika pengunjung menerima atau memperbolehkan akases, maka browser akan menggunakan fungsionalitas terbaik yang tersedia pada perangkat untuk mengakses informasi ini (misalnya, GPS).
Untuk melakukan akses ke informasi lokasi ini ada beberapa cara yang bisa dilakukan dengan API Geolokasi yaitu :
Geolocation.getCurrentPosition()-> ini digunakan untuk mengambil informasi posisi perangkat pengunjung web saat iniGeolocation.watchPosition()-> Ini digunakan untuk mengetahui perubahan posisi pengunjung, yaitu akan secara otomatis dipanggil setiap kali posisi perangkat pengunjung web berubah.
Catatan : Mulai dari Chrome Versi 50, API Geolokasi hanya akan bekerja pada situs menggunakan jaringan SSL yang aman yaitu HTTPS. Jika kita menggunakannya pada hosting yang masih menggunakan sambungan HTTP maka permintaan untuk meminta data lokasi pengguna tidak akan berfungsi lagi.
Contoh script dasarnya adalah:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"/>
<title>KoordinatKu</title>
</head>
<body>
<div class="container my-5">
<div class="row">
<div class="col-6">
<p>Klik Button untuk mengetahui koordinat .</p>
<button class="btn btn-primary btn-block" onclick="getLocation()">Klik Aku</button>
</div>
<div class="col-6">
<p id="demo"></p>
</div>
</div>
</div>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Browser mu tidak support.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>Penjelasan:
- Disini saya menambahakan bootstrap 4 agar tampilan lebih ringkas dan bisa ditata dengan baik.
- Pada tag button terdapat aksi
onClick="getLocation()"yang berarti kerika button di klik maka akan memanggil fungsi getLocation(). - Pada Script DOM HTML,pertama kita membuat variabel
xyang akan digunakan sebagai variabel penerima data lokasi - Pada fungsi getLocation(), pertama kita akan melakukan cek apakah browser mendukung geolocation atau tidak jika mendukung maka akan memanggil
Geolocation.getCurrentPosition()untuk mengetahui posisi atau koordinat kita saat ini. Nah untukNavigatormerupakan objek DOM nya. - Jika browser tidak dapat menjalankan API Geolocation maka akan menuliskan text “Browsermu tidak support” pada halaman web dengan menggunakan innerHTML pada variabel x sebelumnya.
- Fungsi
showPosition(position)akan dipanggil jika browser support API Geolocation. dan akan menampilkan text dengan innerHTML berupa posisi latitude dan longitude . posisi latitude dan logitude dipanggil menggunakanposition.coords.latitudedanposition.coords.longitude, position merupakan objek nya.
Geolocation + LeafletJS
Untuk memadukan kedua hal ini, teman-teman sebaiknya melihat artikel Tutorial Leaflet.Js: Materi Lengkap dan Sintak Codenya. Kemudian kita hanya tinggal memasukkan dan membuat area penampung nya . Contoh sederhananya seperti dibawah:
Note: Jika lokasi tidak akurat kemungkinan besar karena sambungan teman – teman menggunakan HTTP. Gunakan HTTPS agar lebih akurat.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<!--CSS LeafletJS-->
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""
/>
<!--JavaScript LeafletJS-->
<script
src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""
></script>
</head>
<body>
<div class="container my-5">
<div class="row">
<div class="col-6">
<p>Klik Button untuk mengetahui koordinat .</p>
<button class="btn btn-primary" onclick="getLocation()">
Klik aku
</button>
</div>
<div class="col-6">
<div id="mapid" style="width: 600px; height: 400px"></div>
<br />
<p id="demo"></p>
</div>
</div>
</div>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Browser mu tidak support.";
}
}
function showPosition(position) {
//untuk map masukkan lat dan lng ke dalam variabelnya
var mymap = L.map("mapid").setView(
[position.coords.latitude, position.coords.longitude],
13
);
//ini untuk deskripsi map
L.tileLayer(
"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",
{
maxZoom: 18,
attribution:
'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: "mapbox/streets-v11",
tileSize: 512,
zoomOffset: -1,
}
).addTo(mymap);
//menambahkan marker letak posisi dengan lat dan lng yang telah didapat sebelumnya
L.marker([position.coords.latitude, position.coords.longitude])
.addTo(mymap)
.bindPopup("<b>Hai!</b><br />Ini adalah lokasi mu");
//digunakan unuk menampilkan text posisi saat ini
x.innerHTML =
"Latitude: " +
position.coords.latitude +
"<br>Longitude: " +
position.coords.longitude;
}
</script>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</body>
</html>Penjelasan:
- Pertama, kita buat area penampung, disini saya menggunakan element div dengan id= map id. Ini digunakan untuk menampilkan hasil peta nya ya.
- Selanjutnya jika teman – teman sudah memahami cara penggunaan leafletJS maka tinggal memasukkan latitude dan longitude yang didapat ke dalam sintaknya.
Mungkin ada pertanyaan kenapa saya tidak menggunakan API gmaps untuk menampilkan posisi pada peta nya ? karena API gmaps memerlukan izin akses kepada setiap pengguna yang mengakses peta jadi kita tetap bisa menampikannya pada peta gmaps tetapi tidak akan bisa digesen dan biasanya ada tulisan “anda memerlukan izin akses”. (sepengalaman saya ya).
