Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan
belajar bagaimana cara mendapatkan geolokasi atau kordinat saat ini dengan
menggunakan html5, javascript, dan library leaflet js. Bagaimana caranya?, ayo
ikuti selengkapnya berikut ini.
Cara Mendapatkan Lokasi Terkini dengan HTML5
Cara unutuk mendapatkan lokasi di website sangat mudah sekali, kalian dapat menggunakan fungsi navigator.geolocation untuk mendapatkan longitude dan latitude berdasarkan lokasi perangkat pengguna. Fungsi ini juga nantinya akan memunculkan dialog yang meminta izin akses kepada pengguna. Silahkan kalian buat file html kosong dan beri nama get_lokasi.html, lalu copy script di bawah ini dan jalankan di browser kalian.
<!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"/>
</head>
<body>
<br>
<div class="container">
<div class="alert alert-success">
<h3>Latihan mendapatkan Kordinat Lokasi</h3>
</div>
<p>Klik tombol di bawah ini untuk mengetahui kordinat anda sekarang</p>
<!-- saat button diklik maka akan menjalankan fungsi getlokasi -->
<button class="btn btn-primary btn-block" onclick="getlokasi()">Dapatkan lokasi</button>
<br>
<!-- lokasi yang didapatkan akan dicetak di dalam elemen p -->
<p id="lokasi"></p>
</div>
<script>
//mengambil elemen lokasi dan memasukannya ke dalam variabel lokasi
var lokasi = document.getElementById("lokasi");
function getlokasi() {
//jika browser mendukung navigator.geolocation maka akan menjalankan perintah di bawahnya
if (navigator.geolocation) {
// getCurrentPosition digunakan untuk mendapatkan lokasi pengguna
//showPosition adalah fungsi yang akan dijalankan
navigator.geolocation.getCurrentPosition(showPosition);
}
}
function showPosition(posisi){
// tampilkan kordinat di dalam elemen lokasi
lokasi.innerHTML = "Lat:" + posisi.coords.latitude +
"<br>Situs Bujur:" + posisi.coords.longitude;
}
</script>
</body>
</html>
| No | Script | Penjelasan |
| 1 | onclick="getlokasi()" | Saat button diklik maka akan menampilkan fungsi getlokasi() |
| 2 | <p id="lokasi"></p> | Longitude dan latitude yang didapatkan akan ditampilkan di dalam elemen ini |
| 3 | var lokasi = documen.getElemenById("lokasi"); | Aplikasi pesan instan digantikan dengan hangouts, Mengambil elemen yang memiliki id lokasi, dan menyimpannya ke dalam variabel lokasi |
| 4 | function getlokasi(){ ... } | Fungsi ini akan dijalankan saat button get lokasi diklik |
| 5 | if(navigator.geolocation){ ... } | mengecek apakah browser support dengan fungsi navigator.geolocation atau tidak |
| 6 | navigator.geolocation.getCurrentPosition(); | Berfungsi untuk mengambil kordinat perangkat saat ini |
| 7 | lokasi.innerHTML = "Lat:" + posisi.coords,latitude + "<br>Situs Bujur:"+posisi.coords.longitude; | Menampilkan posisi latitude dan longitude di dalam elemen lokasi |
|
| Hasi akhir |
Menampilkan Lokasi dengan Leaflet Js
Ok, setelah kita belajar bagaimana menampilkan longitude dan latitude dengan html dan javascript sederhana. Sekarang kita akan coba menerapkannya ke dalam peta leaflet js. Jadi kenapa saya buat menjadi 2 bagian, alasannya supaya kalian lebih mudah memahami dasarnya, jika sudah paham barulah kita coba menggabungkannya dengan leaflet js.
Saya juga sudah menulis 2 artikel terkait dengan leaflet js. Jadi jika
kalian belum mengerti apa itu leaflet js dan bagaimana menggunakannya?, di
bawah ini saya berikan link tutorialnya. Jadi silahkan dibaca terlebih dahulu jika kalian
belum paham.
Cara Membuat Aplikasi Input Lokasi dan Menyimpannya ke database mysql dan
php:
https://www.sahretech.com/2020/11/cara-membuat-aplikasi-input-data-dan.html
Ok, sekarang buatlah sebuah file baru dengan nama lokasi_leaflet.html. Lalu
copy script di bawah ini dan paste ke dalam file tersebut, Selanjutnya
silahkan save dan jalankan di browser.
<!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=""/>
</head>
<body>
<br />
<div class="container">
<div class="alert alert-success">
<h3>Latihan Mendapatkan Kordinat Lokasi</h3>
</div>
<p>Klik tombol di bawah ini untuk mengetahui kordinat anda sekarang</p>
<!-- saat button diklik maka akan menjalankan fungsi getlokasi -->
<button class="btn btn-primary btn-block" onclick="getlokasi()">
Dapatkan lokasi
</button>
<br />
<!-- peta akan ditampilkan di bawah ini dengan ukuran lebar 600px dan tinggi 400px -->
<div id="mapid" style="border-radius: 8px; width: 100%; height: 400px"></div>
</div>
<!--JavaScript LeafletJS-->
<script
src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin="">
</script>
<script>
//mengambil elemen lokasi dan memasukannya ke dalam variabel lokasi
var lokasi = document.getElementById("lokasi");
function getlokasi() {
//jika browser mendukung navigator.geolocation maka akan menjalankan perintah di bawahnya
if (navigator.geolocation) {
// getCurrentPosition digunakan untuk mendapatkan lokasi pengguna
//showPosition adalah fungsi yang akan dijalankan
navigator.geolocation.getCurrentPosition(showPosition);
}
}
function showPosition(position) {
// masukan kordinat latitude dan longitude ke dalam peta leaflet
// ini adalah format dan cara memasukan kordinat pada leaflet js
// jika kalian belum paham, bisa melihat tutorial yang saya buat tentang leaflet js di blog ini
var mymap = L.map("mapid").setView(
[position.coords.latitude, position.coords.longitude],
13
);
//setting maps menggunakan api mapbox bukan google maps, daftar dan dapatkan token
L.tileLayer(
"https://tile.openstreetmap.org/{z}/{x}/{y}.png",
{
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");
}
</script>
</body>
</html>
Untuk penjelasannya sudah saya sertakan di sela-sela script di atas. Berikut ini adalah tampilan dari hasil script yang kita tulis di atas. Klik
button terlebih dahulu, kemudian akan muncul peta dan marker lokasi
perangkat kalian saat ini.
|
| Menampilkan lokasi dengan leaflet JS |
Ok, sekian tutorial kali ini tentang Cara Mengetahui kordinat kita saat ini
dengan leaflet js. Semoga bermanfaat, jika ada yang kurang dipahami,
silahkan tinggalkan komentar kalian di bawah ini. Sampai jumpa di tutorial
pemrograman keren dan menarik lainnya.
No comments
Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik
Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi