# πŸ“ PANDUAN FITUR GIS PONTIANAK ## Setup Awal ### 1. Inisialisasi Database ```bash # Buka di browser: http://localhost/web-gis/create_tables.php ``` **Respons berhasil:** ```json { "status": "success", "message": "Tabel berhasil dibuat atau sudah ada" } ``` Ini akan membuat 3 tabel baru: - `rumah_ibadah` - Lokasi tempat ibadah - `penduduk_miskin` - Lokasi keluarga kurang mampu - `jalan_rusak` - Laporan jalan rusak --- ## Fitur 1: RUMAH IBADAH (Tempat Ibadah) ### Cara Menggunakan: **Step 1:** Buka GIS Interface ``` http://localhost/web-gis/index.html ``` **Step 2:** Klik tombol "Rumah Ibadah" di toolbar - Ikon: πŸ›οΈ (bangunan dengan tanda plus) - Di toolbar utama sebelah atas map **Step 3:** Klik di mana saja di peta - Status akan berubah: "Klik Peta untuk menambah lokasi..." - Modal dialog akan muncul **Step 4:** Isi form: ``` β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ INPUT RUMAH IBADAH β”‚ β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ β”‚ Nama : [Masjid Al-Nur] β”‚ β”‚ Alamat : [Auto-fill] β”‚ ← Otomatis dari koordinat β”‚ PIC (Nama) : [Pengurus] β”‚ β”‚ Radius Pencarian: [1000] meter β”‚ ← Geser slider β”‚ Koordinat : -0.1234, 109.3456 β”‚ β”‚ β”‚ β”‚ [SIMPAN] [BATAL] β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ ``` **Field Penjelasan:** - **Nama:** Nama tempat ibadah (Masjid/Gereja/dll) - **Alamat:** Otomatis terisi pakai Nominatim (Reverse Geocoding) - Tunggu pesan "Mencari alamat..." hingga selesai - **PIC:** Nama Pengurus/Koordinator - **Radius:** Jarak pencarian untuk keluarga miskin sekitar (default 1000m) **Step 5:** Klik "SIMPAN" - Marker teal + lingkaran akan muncul di peta - Data tersimpan di database ### Interaksi Lanjutan: **Edit:** 1. Klik marker di peta 2. Popup muncul β†’ Klik "Edit" 3. Modal akan terbuka dengan data lama 4. Ubah dan klik "Simpan" **Hapus:** 1. Klik marker 2. Popup β†’ Klik "Hapus" 3. Konfirmasi β†’ Data terhapus **Cari:** - Gunakan Registry Drawer (kanan peta) - Filter: Input Type = "Rumah Ibadah" - Cari nama atau ketik untuk filter --- ## Fitur 2: PENDUDUK MISKIN (Keluarga Kurang Mampu) ### Cara Menggunakan: **Step 1:** Klik tombol "Penduduk Miskin" di toolbar - Ikon: πŸ‘€ (orang dengan tanda plus) **Step 2:** Klik di peta untuk lokasi keluarga miskin **Step 3:** Isi form: ``` β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ INPUT PENDUDUK MISKIN β”‚ β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ β”‚ Nama Ketua KK : [Nama Kepala Keluarga]β”‚ β”‚ Jumlah Anggota : [5] β”‚ β”‚ Rumah Ibadah Terdekat: [OTOMATIS] β”‚ β”‚ Nama : Masjid Al-Nur β”‚ ← Sistem mencari β”‚ Jarak : 234 meter β”‚ otomatis β”‚ Koordinat : -0.1234, 109.3456 β”‚ β”‚ β”‚ β”‚ [SIMPAN] [BATAL] β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ ``` **Field Penjelasan:** - **Nama Ketua KK:** Nama kepala keluarga yang bertanggung jawab - **Jumlah Anggota:** Total orang dalam keluarga termasuk ketua - **Rumah Ibadah Terdekat:** Sistem otomatis menemukan tempat ibadah terdekat - Nama dan jarak ditampilkan (berdasarkan radius yang Anda set di rumah ibadah) - TIDAK perlu isi manual **Step 4:** Klik "SIMPAN" - Marker merah akan muncul - Data tersimpan beserta referensi rumah ibadah terdekat ### Fitur Khusus: Pencarian Miskin Sekitar Rumah Ibadah **Gunakan tombol di popup Rumah Ibadah:** 1. Klik marker Rumah Ibadah di peta 2. Di popup klik: **"Cari Miskin"** 3. Semua keluarga miskin dalam radius akan ter-zoom 4. Map akan fit ke cluster keluarga miskin --- ## Fitur 3: CHOROPLETH KECAMATAN (Peta Populasi) ### Cara Menggunakan: **Step 1:** Klik tombol "Choropleth" di toolbar - Ikon: πŸ—ΊοΈ (peta) **Step 2:** Peta akan berubah - Menampilkan 6 kecamatan Pontianak - Warna berbeda sesuai populasi **Gradasi Warna:** ``` πŸ”΄ Merah Tua = Populasi > 120,000 jiwa πŸŸ₯ Merah Terang = Populasi > 100,000 jiwa 🟨 Merah Muda = Populasi > 80,000 jiwa 🟧 Merah Pucat = Populasi ≀ 80,000 jiwa ``` **Step 3:** Klik salah satu kecamatan - Panel di kanan bawah muncul: ``` β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ Choropleth Kecamatan Pontianak β”‚ β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ β”‚ PONTIANAK BARAT β”‚ β”‚ 148,800 jiwa β”‚ β”‚ β”‚ β”‚ Kepadatan: 2,500 jiwa/kmΒ² β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ ``` **Data Populasi (BPS 2025):** | # | Kecamatan | Populasi | Warna | | --- | ------------------ | -------- | ----- | | 1 | Pontianak Barat | 148,800 | πŸ”΄ | | 2 | Pontianak Selatan | 133,600 | πŸ”΄ | | 3 | Pontianak Utara | 129,200 | πŸ”΄ | | 4 | Pontianak Timur | 121,500 | πŸ”΄ | | 5 | Pontianak Kota | 98,500 | πŸŸ₯ | | 6 | Pontianak Tenggara | 52,900 | 🟧 | **Fitur Interaksi:** - **Hover:** Kecamatan akan highlight - **Klik:** Info populasi muncul di panel - **Keluar Mode:** Klik tombol lain atau click tombol Choropleth lagi --- ## Layer Control (Kontrol Visibilitas) ### Tombol Layer (atas kiri map): Klik ikon **☰** untuk membuka layer control. ``` βœ“ Choropleth Kecamatan βœ“ Rumah Ibadah βœ“ Penduduk Miskin βœ“ Jalan Rusak βœ“ Lokasi SPBU ... (layer lainnya) ``` **Toggle on/off:** - Centang untuk tampilkan layer - Uncheck untuk sembunyikan **Catatan:** Saat aktif mode Choropleth, layer lain otomatis disembunyikan untuk fokus pada peta kecamatan. --- ## Registry / Pencarian ### Buka Registry Drawer: Klik tombol **πŸ“‹** di toolbar atau panel kanan. ### Cara Mencari: **1. Filter by Type (Dropdown atas):** ``` Input Type: β–Ό Semua β–‘ Point β–‘ Polyline β–‘ Polygon β–‘ Rumah Ibadah ← Pilih ini β–‘ Penduduk Miskin ← atau ini β–‘ Jalan Rusak ``` **2. Filter by Registry (Dropdown bawah):** ``` Registry Type: β–Ό Semua β–‘ Jalan Nasional β–‘ Parkir β–‘ Rumah Ibadah β–‘ Penduduk Miskin ``` **3. Cari (Kolom input):** ``` Cari nama: [Masjid] πŸ” Hasil: β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ βœ“ Masjid Al-Nur β”‚ β”‚ Rumah Ibadah β”‚ β”‚ -0.1234, 109.3456 β”‚ β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ β”‚ βœ“ Masjid Besar Pontianak β”‚ β”‚ Rumah Ibadah β”‚ β”‚ -0.1245, 109.3467 β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ ``` **Klik hasil β†’ Map akan:** - Zoom ke lokasi - Buka popup - Highlight marker --- ## Troubleshooting ### ❌ Tombol tidak muncul **Solusi:** - Refresh browser (Ctrl+F5) - Clear cache - Cek console (F12) untuk error ### ❌ Alamat tidak terisi (Reverse Geocode gagal) **Penyebab:** Tidak ada koneksi internet atau Nominatim API timeout **Solusi:** - Pastikan internet terhubung - Coba refresh modal - Manual isi alamat ### ❌ Rumah Ibadah tidak ditemukan saat input miskin **Penyebab:** Belum ada data rumah ibadah, atau lokasi terlalu jauh **Solusi:** - Tambahkan rumah ibadah terlebih dahulu di mode Rumah Ibadah - Pastikan radius rumah ibadah cukup besar ### ❌ Choropleth tidak tampil **Penyebab:** File GeoJSON tidak ditemukan **Solusi:** - Cek file ada di: `data/pontianak-kecamatan.geojson` - Cek console untuk error message ### ❌ Database error **Solusi:** - Jalankan ulang `create_tables.php` - Cek koneksi database di `db_config.php` --- ## Tips & Trik ### πŸ’‘ Shortcut - **Double-click** marker untuk langsung edit - **Scroll zoom** di map untuk zoom in/out - **Drag** untuk geser peta - **Ctrl+A** di search untuk select all results ### πŸ“Š Export Data Semua data tersimpan di database MySQL. Untuk export: ```sql SELECT * FROM rumah_ibadah; SELECT * FROM penduduk_miskin; ``` ### 🎨 Customize Warna Edit di `index.html` function: - `getPopulationFill()` - Ubah warna choropleth - `createRumahIbadahIcon()` - Ubah marker rumah ibadah - `createPendudukMiskinIcon()` - Ubah marker miskin --- ## File Penting ``` web-gis/ β”œβ”€β”€ index.html ← Main GIS Interface β”œβ”€β”€ create_tables.php ← Init database β”œβ”€β”€ db_config.php ← Database config β”‚ β”œβ”€β”€ rancangan_sistem/ ← API & UI untuk rumah ibadah + penduduk miskin β”‚ β”œβ”€β”€ get_rumah_ibadah.php β”‚ β”œβ”€β”€ save_rumah_ibadah.php β”‚ β”œβ”€β”€ update_rumah_ibadah.php β”‚ β”œβ”€β”€ delete_rumah_ibadah.php β”‚ β”œβ”€β”€ get_penduduk_miskin.php β”‚ β”œβ”€β”€ save_penduduk_miskin.php β”‚ β”œβ”€β”€ update_penduduk_miskin.php β”‚ └── delete_penduduk_miskin.php β”‚ β”œβ”€β”€ fitur_jalan_parsel/ ← API & UI untuk jalan rusak, polyline/polygon β”‚ β”œβ”€β”€ get_jalan_rusak.php β”‚ β”œβ”€β”€ save_jalan_rusak.php β”‚ └── delete_jalan_rusak.php β”‚ β”œβ”€β”€ layer_groups_choropleth/← API & UI untuk spatial features + choropleth β”‚ β”œβ”€β”€ get_features.php β”‚ β”œβ”€β”€ save_feature.php β”‚ β”œβ”€β”€ update_feature.php β”‚ └── delete_feature.php β”‚ └── data/ β”œβ”€β”€ pontianak-kecamatan.geojson ← Choropleth data └── Export_Output_2.json ← Road network data ``` --- **Versi:** 2025-04-20 **Status:** Production Ready βœ