Bagaimana Cara Membuat Multi Marker Peta Pada LeafletJS

Halo gan sist, kembali lagi saya akan membahas tentang LeafletJS, namun kali ini akan membahas tentang Bagaimana Cara Membuat Multi Marker Peta Pada LeafletJS.

Jika pada materi sebelumnya kita sudah membahas tentang apa itu LeafletJS dan bagaimana cara menggunakannya, sekarang kita akan mencoba penerapan yang lebih lanjut dari fitur yang disediakan oleh LeafletJS, yaitu membuat multi marker atau marker yang muncul banyak didalam tampilan peta yang telah kita buat sebelumnya.

Kalian pasti sudah tahu dong penerapan yang paling umum pada multi marker itu dimana aja? Yaps, salah satu penerapannya adalah pada tampilan maps aplikasi ride sharing seperti gojek, grab, dll.

Sumber gambar: https://www.gojek.com/goride/

Nah, udah tahu kan bayangannya seperti apa? Hanya saja, pada tutorial ini, kita akan membuat marker yang statis atau tidak berpindah pindah pada tiap interval waktu tertentu.

Langkah Awal Memulai

Jika kalian sudah mengikuti tutorial dari awal, tentu saja gan sist saat ini tinggal melanjutkan saja pekerjaan yang sudah dibuat sebelumnya. Jadi, diakhir baris kita cukup menambahkan saja baris berikut:

L.marker([-7.280812, 112.770336]).addTo(mymap).bindPopup("tulisan yang akan dimunculkan pada popup click");

Nah, seberapa banyak yang akan kalian munculkan, sekarang tergantung kebutuhan agan sista. Tapi, sebagai contoh ini adalah penerapan multi marker untuk menampilkan daftar hotel / penginapan yang ada disekitar kampus ITS.

L.marker([-7.280812, 112.770336]).addTo(mymap).bindPopup("<b>Swiss-Belinn Manyar</b>");
L.marker([-7.282159, 112.776954]).addTo(mymap).bindPopup("<b>RedDoorz Manyar</b>");
L.marker([-7.259083, 112.782509]).addTo(mymap).bindPopup("<b>Grace Setia Hotel</b>");

dan ini adalah tampilan hasilnya:

Gimana, mudah kan?

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