Radar Tempat Penting & Fasilitas di Sekitar Lokasi
Mempermudah wisatawan mencari tempat makan, masjid, hotel, dan minimarket terdekat di sekitar lokasi wisata yang sedang dikunjungi.
Mempermudah wisatawan mencari tempat makan, masjid, hotel, dan minimarket terdekat di sekitar lokasi wisata yang sedang dikunjungi.
Tantangan & Kebutuhan Pengguna
Pengunjung yang melihat halaman detail destinasi wisata membutuhkan informasi kontekstual di sekitar lokasi tersebut, seperti masjid terdekat, tempat makan, penginapan, atau minimarket. Menyimpan dan memperbarui ribuan data fasilitas pendukung tersebut di dalam tabel database lokal akan membebani pemeliharaan data.
Perkaya konteks lokal setiap destinasi secara dinamis dengan melakukan query spasial langsung ke infrastruktur data terbuka tanpa menduplikasi datanya di database aplikasi.
Solusi & Cara Kerja
Saat halaman detail destinasi dimuat dan memiliki nilai `lat` serta `lng`, klien mengeksekusi lima query Overpass QL secara paralel ke `overpass-api.de/api/interpreter` menggunakan filter spasial `(around:radius,lat,lng)`. Hasil setiap kategori disimpan di memori browser (`poiData`), dihitung jarak lurusnya dalam satuan meter terhadap titik pusat destinasi menggunakan rumus trigonometri bola bumi *Haversine*, lalu dirender sebagai marker kustom dan daftar chip interaktif yang dapat difilter secara instan.
Berikut adalah konfigurasi query spasial Overpass QL, fungsi fetch asinkron, dan kalkulasi jarak Haversine dari `resources/views/public/destinations/show.blade.php`:
Detail & Hal yang Diperhatikan
- Pembatasan kepadatan marker (Marker Throttling): Di kawasan padat seperti Malioboro, Overpass dapat mengembalikan ratusan node sekaligus. Kode membatasi maksimal 15 marker per kategori di atas peta (`items.slice(0, 15)`) dan 5 item teratas pada daftar chip agar UI tetap ringan.
- Normalisasi metadata OSM yang tidak seragam: Banyak titik di OpenStreetMap tidak memiliki atribut `addr:street` atau `opening_hours` lengkap. Popup marker merangkai informasi secara kondisional dan memotong string jam operasional yang terlalu panjang.
- Filter layer bebas request ulang: Status kategori aktif dikelola di dalam struktur `new Set(Object.keys(POI_CONFIG))`, sehingga saat pengguna menekan tombol toggle kategori, marker ditambahkan atau dihapus dari instance peta langsung dari cache `poiData`.
Setiap chip fasilitas di bawah peta dilengkapi handler `map.setView([node.lat, node.lon], 17)` sehingga pengunjung dapat langsung melakukan zoom-in ke titik fasilitas tertentu hanya dengan satu klik.