SISTEM INFORMASI GEOGRAFIS PERSEBARAN TEMPAT IBADAH SEKITAR PADANG BULAN

Project ini adalah aplikasi WebGIS (Web-based Geographic Information System) fullstack yang dibangun untuk memetakan dan mengelola data persebaran tempat ibadah di kawasan Padang Bulan, sekitar kampus Universitas Sumatera Utara (USU) dan Politeknik Negeri Medan. Aplikasi ini memungkinkan siapa saja — mahasiswa, warga, maupun pendatang — untuk menemukan lokasi masjid, gereja, pura, vihara, dan klenteng secara visual dan interaktif langsung dari browser. Arsitektur & Teknologi Project menggunakan arsitektur three-tier yang memisahkan tiga lapisan secara bersih: 1. Backend — Node.js + Express.js Server dibangun dengan Express.js sebagai framework REST API. Semua logika bisnis dan akses database diproses di sini. Koneksi ke PostgreSQL menggunakan Connection Pool dari modul `node-postgres (pg)` agar efisien dan tidak membuat koneksi baru di setiap request. Konfigurasi sensitif seperti password database disimpan di file `.env` menggunakan `dotenv`, sehingga tidak pernah hardcode dalam kode. 2. Database — PostgreSQL + PostGIS Database utama adalah PostgreSQL dengan ekstensi PostGIS yang menambahkan kemampuan spasial. Tabel `tempat_ibadah` menyimpan 12 kolom termasuk `latitude`, `longitude` (desimal), dan `geom` (tipe `GEOMETRY(Point, 4326)` dari PostGIS). Kolom `geom` diperbarui otomatis lewat database trigger setiap kali data koordinat berubah. Index spasial GIST dibuat pada kolom `geom` untuk mempercepat query spasial, ditambah index biasa pada kolom `jenis` dan `nama_tempat` untuk filter dan pencarian. 3. Frontend — HTML + CSS + JavaScript + Leaflet.js Antarmuka sepenuhnya dibangun dengan vanilla JavaScript tanpa framework frontend seperti React atau Vue. Library peta yang digunakan adalah Leaflet.js v1.9.4 dengan plugin Leaflet.markercluster untuk pengelompokan marker otomatis. Desain menggunakan custom CSS dengan tema dark sidebar + earthy teal, font Google Fonts (Plus Jakarta Sans + Syne), dan sepenuhnya responsif untuk mobile. Fitur Peta Interaktif Marker & Visualisasi Setiap jenis tempat ibadah memiliki marker SVG kustom dengan warna dan emoji berbeda yang dibuat dinamis via `L.divIcon()`: - 🕌 Masjid → Hijau Teal `#2ec4a0` - ⛪ Gereja → Biru `#4e9bff` - 🛕 Pura → Oranye `#f4a340` - ☸️ Vihara → Merah `#e05c5c` - 🏯 Klenteng → Ungu `#b47de0` Popup & Detail Klik marker membuka popup kustom berisi nama, jenis, alamat, kelurahan, kecamatan, jarak dari user (jika lokasi aktif), tombol "Detail" (buka modal lengkap), dan tombol "Google Maps ↗". Cluster Marker Plugin `Leaflet.markercluster` mengelompokkan marker yang berdekatan secara otomatis. Cluster pecah menjadi marker individual saat zoom in. Sidebar Panel Panel kiri berisi: statistik total/ditampilkan, filter chip per jenis (dinamis dari API), pencarian real-time dengan debounce 300ms, daftar scrollable semua tempat ibadah, info tempat terdekat dari user, dan legenda di pojok kanan bawah peta. Fitur CRUD Lengkap Tambah Data (3 cara) 1. Tombol "Tambah" di sidebar 2. Klik kanan pada peta → "Tambah Titik di sini" → koordinat terisi otomatis 3. Panel Alat Spasial tab Insert Edit & Hapus - Ikon ✏️ dan 🗑️ muncul saat hover pada item daftar sidebar - Tombol Edit Data dan Hapus Data tersedia di modal detail - Hapus selalu dilindungi modal konfirmasi menyebut nama tempat agar tidak tidak sengaja terhapus - Setelah operasi berhasil, peta dan daftar reload otomatis tanpa refresh halaman Fitur Lokasi Pengguna Tombol Lokasi Saya" memanfaatkan Geolocation API browser (`navigator.geolocation`). Setelah posisi terdeteksi: - Marker biru berkedip (animasi CSS pulse) muncul di posisi user - Peta fly-to ke posisi user - Jarak ke semua marker dihitung ulang dan ditampilkan di popup - Kartu "Terdekat dari Anda" muncul di sidebar menampilkan tempat ibadah paling dekat - Semua popup dirender ulang dengan informasi jarak Alat Spasial (4 Fitur) Panel modal dengan 4 tab yang bisa dibuka via tombol "Alat Spasial" di sidebar atau klik kanan peta: 1. Insert Titik dari Koordinat Form input nama, jenis, alamat, dan koordinat lat/lng. Bisa diisi manual atau dari klik kanan peta. Menyimpan ke database via `POST /places` dan marker langsung muncul di peta. 2. Nearest Neighbor Input koordinat referensi + jumlah hasil (N). Query menggunakan formula Haversine langsung di PostgreSQL untuk efisiensi. Hasil ditampilkan sebagai marker dengan garis putus-putus dari titik referensi ke setiap hasil, diurutkan dari terdekat. 3. Pencarian Radius Input koordinat pusat + jarak radius (meter). Peta menampilkan lingkaran semi-transparan sebagai visualisasi area pencarian. Semua tempat ibadah dalam lingkaran tersebut ditampilkan beserta jaraknya. 4. Hitung Jarak Dua Titik Input koordinat Titik A dan Titik B (bisa dari klik kanan peta → "Set sebagai Titik B" atau tombol "Gunakan Lokasi Saya"). Jarak dihitung langsung di frontend menggunakan implementasi Haversine JavaScript — instan, tanpa request ke server. Peta menampilkan dua marker berbeda warna dihubungkan garis putus-putus biru.