Smart City 2D Mapping #3: Menampilkan Marker Lokasi pada Peta Digital - Perwira Learning Center

1. Latar Belakang

    Setelah peta dasar berhasil ditampilkan, muncul kebutuhan berikutnya, yaitu bagaimana cara menampilkan lokasi-lokasi penting seperti tempat wisata secara langsung pada peta tersebut. Hal ini menjadi langkah lanjutan agar peta tidak hanya berfungsi sebagai tampilan visual, tetapi juga memiliki nilai informasi. Oleh karena itu, diperlukan penambahan marker sebagai penanda titik lokasi, sehingga pengguna dapat mengetahui posisi suatu tempat sekaligus memperoleh informasi terkait secara langsung.

2. Alat dan Bahan

A. Perangkat Lunak

- Sistem Operasi Linux (atau yang lainnya)

- Visual Studio Code (atau text editor lainnya)

- Laravel

- React (opsional)

- Library Leaflet

B. Perangkat Keras

- Laptop / PC

3. Pembahasan

3.1 Konsep Marker pada Peta Digital

    Marker merupakan penanda yang digunakan untuk menunjukkan lokasi tertentu pada peta digital. Dalam konteks Smart City, marker digunakan untuk merepresentasikan berbagai titik penting seperti tempat wisata, fasilitas publik, maupun pusat kota. Dengan adanya marker, pengguna dapat dengan mudah mengetahui lokasi serta informasi terkait tanpa harus mencari secara manual.

    Nah, Library Leaflet memiliki fitur marker untuk para pengembang dan menyediakan kebebasan kita untuk mengkostumisasi bentuk-bentuk dari marker tersebut.

Contoh Marker di Leaflet

3.2 Implementasi Marker pada Leaflet

    Disini, marker akan diimplementasikan berdasarkan data lokasi yang telah disiapkan. Untuk sementara, marker yang ditambahkan akan diletakkan di pusat kota Purbalingga.

wisataData.forEach((w) => {
    const marker = L.marker([w.lat, w.lng])
        .addTo(map)
        .bindPopup(w.nama);
});

Penjelasan:

wisataData -> berisi data lokasi wisata

L.marker() -> membuat marker berdasarkan koordinat

.addTo(map) -> menampilkan marker ke peta

.bindPopup() -> menampilkan informasi saat marker diklik

3.3 Penyesuaian Tampilan Marker

Agar tampilan marker lebih menarik, dilakukan penyesuaian dengan menggunakan custom icon.

const makeIcon = (color) => L.divIcon({
    html: `
`,
    iconSize: [14, 14],
});

L.marker([w.lat, w.lng], { icon: makeIcon('#5d93c7') }).addTo(map);

Penjelasan:

L.divIcon() -> membuat icon marker custom di pusat kota

color -> membedakan jenis lokasi

3.4 Menampilkan Popup Informasi

    Popup ini nantinya digunakan untuk menampilkan informasi tentang bangunan ketika marker diklik oleh pengguna.

L.marker([w.lat, w.lng])
    .addTo(map)
    .bindPopup(`
            ${w.nama}
            ${w.kecamatan}
    `);

Penjelasan:

.bindPopup() ->menampilkan informasi

w.nama dan w.kecamatan -> 2 data dummy yang dibuat di mockData.js

3.5 Interaksi Marker dengan URL (Fitur Fly To Lokasi)

    Saya telah menambahkan sebuah fitur pada Smart City Purbalingga dimana apabila pengguna melihat detail suatu tempat di laman utama, maka akan disediakan link/parameter URL yang dapat dihubungkan dengan marker sehingga peta dapat langsung berpindah ke lokasi tertentu.

const flyLat  = parseFloat(searchParams.get('lat'));
const flyLng  = parseFloat(searchParams.get('lng'));

if (flyLat && flyLng) {
    map.flyTo([flyLat, flyLng], 16);
}

Penjelasan:

searchParams -> mengambil data dari URL

flyTo() -> memindahkan fokus peta

4. Daftar Pustaka

Leaflet. (n.d.). Leaflet Quick Start Guide. Diakses dari: https://leafletjs.com/examples/quick-start/#:~:text=Leaflet%20%7C%20%C2%A9%20OpenStreetMap-,See%20this%20example%20stand%2Dalone.,('click'%2C%20onMapClick);