WEB-GIS/PANDUAN_FITUR.md

# 📍 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
│
├── api/
│ ├── save_rumah_ibadah.php
│ ├── get_rumah_ibadah.php
│ ├── delete_rumah_ibadah.php
│ ├── save_penduduk_miskin.php
│ ├── get_penduduk_miskin.php
│ └── delete_penduduk_miskin.php
│
└── data/
  ├── pontianak-kecamatan.geojson  ← Choropleth data
  └── Export_Output_2.json          ← Road network data
```

---

**Versi:** 2025-04-20  
**Status:** Production Ready ✅