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.
0 Komentar