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.


Fitur untuk mendapatkan kordinat seseorang berdasarkan perangkat sangat bagus untuk diterapkan. Apalagi hal ini akan meningkatkan kenyamanan pengguna. Dimana berdasarkan lokasinya sebuah website dapat memberikan informasi terdekat sehinga lebih relevan, seperti berita yang ada di daerah tersebut, tempat-tempat di daerah tersebut seperti masjid, pom bensin, mall, dsb.


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



Berikut ini adalah tampilan dari hasil script yang kita buat di atas. Klik button terlebih dahulu untuk mendapatkan titik kordinatnya.

cara menampilkan lokasi perangkat di website
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

Cara Membuat Peta Digital dengan Leafletjs, Alternatif Peta Digital tanpa Google Maps API:
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 &copy; <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.

cara menampilkan lokasi dengan javascript dan leaflet js
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.

Post a Comment

Lebih baru Lebih lama