Pendahuluan

Pada artikel sebelumnya, Cara Menampilkan Peta di JavaScript Menggunakan Leaflet.js, kita telah berhasil menampilkan peta interaktif menggunakan Leaflet.js di halaman web. Namun, sebuah peta tentu akan terasa kurang lengkap jika tidak memiliki penanda lokasi atau informasi tambahan yang dapat ditampilkan kepada pengguna.

Untuk itulah Leaflet.js menyediakan fitur marker dan popup. Marker digunakan untuk menandai suatu lokasi pada peta, sedangkan popup berfungsi untuk menampilkan informasi ketika marker tersebut dipilih atau diklik oleh pengguna.

Pada artikel ini, kita akan mempelajari cara menambahkan marker dan popup pada peta menggunakan Leaflet.js sehingga peta yang sebelumnya hanya berfungsi sebagai tampilan visual dapat menjadi lebih interaktif dan informatif.

 

Menambahkan Marker

Setelah peta berhasil ditampilkan, langkah berikutnya adalah menambahkan marker sebagai penanda lokasi tertentu pada peta. Marker ini dapat digunakan untuk menunjukkan lokasi penting, seperti kantor, sekolah, tempat wisata, atau titik koordinat lainnya.

Untuk menambahkan marker, gunakan kode berikut:

L.marker([-0.9471, 100.4172])
    .addTo(map)
    .bindPopup('Halo, ini lokasi saya!')
    .openPopup();

Kode di atas akan membuat sebuah marker pada koordinat -0.9471, 100.4172, kemudian menambahkan popup dengan pesan "Halo, ini lokasi saya!" yang akan langsung ditampilkan saat peta dibuka.

Selanjutnya, tambahkan kode tersebut ke dalam file main.js tepat setelah kode inisialisasi peta yang telah dibuat sebelumnya.

Hasilnya akan terlihat seperti gambar berikut:

Hasilnya, Leaflet.js akan menampilkan sebuah marker pada lokasi yang telah ditentukan beserta popup yang berisi informasi tambahan. Popup tersebut akan langsung ditampilkan saat peta dimuat karena kita menggunakan method .openPopup().

Pada artikel ini, kita telah mempelajari cara menambahkan marker dan popup pada peta menggunakan Leaflet.js. Dengan kedua fitur ini, peta yang sebelumnya hanya menampilkan area geografis kini dapat digunakan untuk menunjukkan lokasi tertentu sekaligus menampilkan informasi tambahan kepada pengguna.

Marker dan popup merupakan fitur dasar yang hampir selalu digunakan dalam pengembangan aplikasi berbasis peta, seperti sistem informasi geografis, pencarian lokasi, hingga aplikasi pemetaan tempat usaha atau wisata.

Pada artikel berikutnya, kita akan mempelajari cara menambahkan lebih dari satu marker pada peta sehingga kita dapat menampilkan banyak lokasi sekaligus dalam satu tampilan peta.

Terima kasih telah menyimak artikel ini, dan selamat mencoba mengembangkan peta interaktif menggunakan Leaflet.js.