Pendahuluan

Peta digital saat ini banyak digunakan pada berbagai jenis aplikasi, mulai dari pencarian lokasi, sistem informasi geografis (SIG), aplikasi pencarian kos, hingg layanan pengantar makanan. Menampilkan Peta pada website ternyata tidak serumit yang di bayangkan.

Kita tidak perlu membuat gambar jalan, gedung, dan sungai secara manual, dengan bantuan Leaflet.js, jika bisa dapat menampilkan peta interaktif hanya dengan beberapa baris kode JavaScript.

Pada blog ini kita akan membahas tentang:

  1. Menambahkan Peta Ke dalam halaman website.

  2. Menentukan lokasi awal peta.

  3. Menambahkan marker atau penanda lokasi.

  4. menampilkan pop up marker dipilih.

Apa itu leaflet.js?

Leaflet.js adalah library Javascript open-source yang di gunakan untuk membuat peta interaktif pada sebuah website.

Library ini menjadi salah satu pilihan populer karena ringan, mudah di pelajari, dan memiliki dokumentasi yang lengkap.

Beberapa kelebihan dari Leaflet.j:

  1. Ukuran Library yang ringan.

  2. Mudah digunakan oleh pemula.

  3. Mendukung berbagai penyedia peta.

  4. Gratis dan bersifat open-source.

  5. Memiliki banyak plugin tambahan.


Struktur Proyek

Pada tutorial ini kita butuh 3 file:

  1. index.html

  2. style.css

  3. main.js

Menambahkan Library Leaflet.js

Tambahkan kode berikut pada file index.html bagian <head>

<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>



Membuat Tempat untuk Menampilkan Peta
Tambahkan elemen berikut pada bagian <body>

<div id="map"></div>

Selanjutnya tambahkan CSS berikut agar peta memiliki ukuran yang dapat ditampilkan oleh browser, masukan pada file style.css:

#map
 { 
height: 500px;
width: 100%; 
}

Tanpa tinggi (height), elemen peta tidak akan terlihat karena browser menganggap elemen tersebut tidak memiliki ruang untuk ditampilkan. Komputer kadang memang sangat patuh pada instruksi, sampai-sampai jika tidak diberi ukuran ia memilih eksis secara filosofis saja.


Menampilkan Peta

Tambahkan kode JavaScript berikut pada file main.js:

const map = L.map('map').setView([-0.9471, 100.4172], 13);

 L.tileLayer(
     'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      { 
        attribution: '&copy; OpenStreetMap contributors' 
    } ).addTo(map);

Penjelasan kode:

  1. L.map('map') digunakan untuk membuat objek peta.

  2. setView() digunakan untuk menentukan posisi awal peta.

  3. 13 merupakan tingkat zoom peta.

  4. tileLayer() digunakan untuk mengambil data peta dari OpenStreetMap.

Pada contoh di atas, peta akan menampilkan wilayah Kota Padang dengan tingkat zoom 13.

 

Hubungan kode

Pada file index.html, masukan 2 tag berikut ini:

<script src="main.js"></script>
<link rel="stylesheet" href="style.css">




Hasil :
Hasil implementasi peta dasar menggunakan Leaflet.js

Penutup

Terima kasih telah menyimak artikel Cara Menampilkan Peta di JavaScript Menggunakan Leaflet.js. Pada artikel ini kita telah mempelajari cara menampilkan peta interaktif menggunakan Leaflet.js dan memahami langkah dasar untuk menambahkan peta ke dalam halaman web.

Karena fokus pembahasan kali ini adalah menampilkan peta dasar, fitur seperti marker dan popup belum dibahas agar materi tetap mudah diikuti, terutama bagi pemula yang baru mengenal Leaflet.js.

Jika Anda ingin melanjutkan dan mulai menambahkan titik lokasi beserta informasi yang muncul saat marker diklik, Anda dapat membaca artikel berikutnya: Cara Menambahkan Marker dan Popup pada Peta Menggunakan Leaflet.js

Sampai jumpa pada artikel berikutnya dan selamat mencoba membangun peta interaktif untuk proyek Anda sendiri.