Halo semuanya, kembali lagi di tulisan saya. 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.geolocationuntuk 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.fromsunda.eu.org/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://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");
}
</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.
Posting Komentar