Apa Itu LeafletJS, Alternatif Google Maps API Dan Bagaimana Cara Penggunaan Sederhananya

Hai gan sist, apa sih LeafletJS itu? Dan mengapa kok saya jadi tertarik menggunakan pustaka tersebut? Jadi, LeafletJS itu merupakan sebuah pustaka javascript open source yang dapat dimanfaatkan untuk membangun aplikasi pemetaan berbasis web yang juga ramah pada device mobile. Dengan mengusung jargon tersebut, tak aneh rasanya memang jika LeafletJS dirancang secara sederhana, namun dengan kinerja dan fitur penggunaan yang diharapkan dapat bekerja secara baik dan maksimal.

Nah, mengapa kok saya menggunakan pustaka LeafletJS? Selain karena faktor yang disebutkan diatas, penggunaan pustaka ini juga dapat memudahkan kita dalam hal penggunaan layanan OpenStreetMap yang gratis. Semenjak API Google tak lagi bebas digunakan, tentu alternatif seperti OpenStreetMap sangat dapat diandalkan penggunaannya.

Langkah Awal Memulai

Pada langkah langkah berikut, akan dijelaskan bagaimana cara memulai penggunaan fitur dasar dari LeafletJS untuk menampilan peta pada halaman website.Hal pertama yang dapat dilakukan, adalah memanggil pustaka LeafletJS berikut pada baris tag head html Anda.
CSS

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>

Javascript

<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>

Menampilkan Peta Pada Halaman Website

Apabila pemanggilan pustaka telah Anda lakukan pada baris kode tag head yang telah dibuat, langkah selanjutnya adalah menampilkan peta pada halaman website. Untuk itu, pada langkah selanjutnya adalah membuat sebuah wadah berupa tag Div untuk peta yang akan ditampilkan.

<div id="mapid" style="width: 100%; height: 500px;"></div>

Karena layanan yang akan kita gunakan adalah OpenStreetMap dengan tiles dari mapbox, jangan lupa untuk memasukkan API dan request tokennya. Dan berikut baris kode javascript yang digunakan untuk menampilkan peta pada website.

<script>
        var mymap = L.map('mapid').setView([-7.2934, 112.7378], 13);
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=xxxxyyyy', {
                maxZoom: 18,
                id: 'mapbox.streets'
        }).addTo(mymap);
</script>

Keterangan / penjelasan kode:

setView([-7.2934, 112.7378], 13): setView digunakan untuk menentukan daerah mana yang akan ditampilkan pada saat pertama kali website tersebut dibuka, angka -7.2934, 112.7378 merupakan latitude dan longitude untuk menampilkan wilayah Surabaya. Untuk menampilkan daerah lain sesuai keinginan agan sista, ganti angka latitude dan longitude tersebut. 13 merupakan angka default zoom untuk menampilkan peta tersebut.

access_token=xxxxyyyy: diisi dengan request access token untuk mengakses API dari mapbox.com

Apabila sudah, simpan file website yang telah dibuat. Buka file tersebut website pada Browser. Kurang lebih tampilan yang dihasilkan akan sebagai berikut:

Akhirnya, kita sudah membuat tampilan website sederhana dengan menampilkan peta menggunakan pustaka LeafletJS dan OpenStreetMap yang keduanya menggunakan sistem open-source. Simpel kan?

Semoga artikel ini bermanfaat. Jangan lupa share ke teman dan grup kalian untuk menambah wawasan mereka.