# WebGIS Portal — Pontianak

Portal pemetaan interaktif berbasis React + Leaflet.js untuk empat proyek WebGIS:

| #   | Proyek               | Fitur                                 |
| --- | -------------------- | ------------------------------------- |
| 01  | SPBU Map             | Tambah / hapus / geser marker SPBU    |
| 02  | WebGIS Jalan & Tanah | Gambar polyline & polygon, CRUD penuh |
| 03  | Kepadatan Penduduk   | Choropleth per kecamatan Pontianak    |
| 04  | SPBU + Layer Control | Seperti P01 + toggle layer 24 jam     |

---

## Cara Deploy

### 1 — Install & jalankan lokal

```bash
# Masuk ke folder project
cd semua-tugas

# Install dependencies (Node.js ≥ 18 diperlukan)
npm install

# Jalankan development server
npm run dev
# → Buka http://localhost:5173
```

### 2 — Build untuk produksi

```bash
npm run build
# Output ada di folder dist/
```

### 3 — Deploy ke Vercel (gratis, paling mudah)

```bash
npm install -g vercel
vercel          # ikuti petunjuk, pilih "Vite" framework
```

### 4 — Deploy ke Netlify

```bash
npm run build
# Drag-and-drop folder dist/ ke https://app.netlify.com/drop
```

### 5 — Deploy ke GitHub Pages

```bash
# 1. Push project ini ke GitHub repository
# 2. Di vite.config.js tambahkan: base: '/<nama-repo>/'
# 3. npm run build
# 4. Deploy folder dist/ sebagai GitHub Pages
```

---

## Database MySQL

File `webgis-portal.sql` berisi schema lengkap untuk semua proyek.

```bash
mysql -u root -p < webgis-portal.sql
```

> **Catatan:** Versi front-end ini menggunakan data statis (embedded).
> Untuk menghubungkan ke MySQL nyata, tambahkan REST API (Express.js / Laravel)
> dan ganti data di `spbuDataRef` dengan fetch ke endpoint API Anda.

---

## Struktur File

```
webgis-portal/
├── index.html          ← entry point HTML
├── vite.config.js      ← konfigurasi Vite
├── package.json        ← dependencies
├── public/
│   └── favicon.svg
└── src/
    ├── main.jsx        ← React root
    └── App.jsx         ← semua komponen (Landing + 4 proyek)
```

## Stack

- **React 18** — UI framework
- **Vite 5** — build tool
- **Leaflet.js 1.9.4** — peta interaktif (dimuat via CDN)
- **OpenStreetMap** — tile basemap

---

_Dikembangkan untuk Tugas WebGIS · Pontianak, Kalimantan Barat_