Radar POI Sekitar via Overpass QL

Masalahnya dulu

Ketika wisatawan membuka halaman detail sebuah candi atau pantai, pertanyaan praktis yang selalu muncul adalah: di mana tempat makan terdekat, adakah masjid untuk salat, atau di mana penginapan dan minimarket sekitar? Menyimpan dan memelihara ribuan data fasilitas pendukung tersebut di dalam database aplikasi sendiri tentu tidak realistis.

Query spasial langsung dari browser ke Overpass API

Begitu halaman detail destinasi dimuat dan memiliki koordinat lat serta lng, browser menembakkan query Overpass QL ke overpass-api.de untuk lima kategori sekaligus (kuliner, penginapan, wisata lain, tempat ibadah, dan toko/minimarket) dalam radius 600 hingga 1000 meter. Jarak lurus tiap titik dari lokasi destinasi dihitung menggunakan rumus Haversine di sisi klien lalu ditampilkan sebagai marker interaktif maupun daftar tombol pintas di bawah peta.

Kita tidak perlu memiliki seluruh data dunia di tabel lokal jika tahu cara menanyakannya secara presisi ke ekosistem data terbuka seperti OpenStreetMap.

Implementasi di ngodingan ini

Konfigurasi query Overpass per kategori dan perhitungan jarak meter dengan formula Haversine pada halaman detail destinasi (resources/views/public/destinations/show.blade.php):

const POI_CONFIG = {
  restaurant: {
    query: `node["amenity"~"restaurant|cafe|food_court|fast_food"](around:800,${LAT},${LNG});`,
    icon: '🍜', color: '#f97316', label: 'Kuliner', bgColor: '#fff7ed',
  },
  mosque: {
    query: `node["amenity"~"place_of_worship"](around:800,${LAT},${LNG});`,
    icon: '🕌', color: '#6366f1', label: 'Ibadah', bgColor: '#eef2ff',
  },
};

function getDistance(lat1, lng1, lat2, lng2) {
  const R = 6371000;
  const dL = (lat2 - lat1) * Math.PI / 180;
  const dl = (lng2 - lng1) * Math.PI / 180;
  const a = Math.sin(dL / 2) ** 2 +
            Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dl / 2) ** 2;
  return Math.round(R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)));
}

Jebakan dan detail yang harus dijaga

• Di pusat kota seperti Malioboro, satu kategori Overpass bisa mengembalikan puluhan hingga ratusan titik yang membuat peta penuh sesak. Kode membatasi rendering maksimal 15 marker per kategori (items.slice(0, 15)) dan 5 item teratas pada chip daftar cepat.
• Tidak semua node di OpenStreetMap memiliki atribut nama lengkap (tags.name bisa kosong). Sistem memberikan nilai fallback ke label kategori serta merangkai alamat dari addr:street dan addr:housenumber hanya jika tersedia.