azgrey
100 lines
2.3 KiB
Markdown
100 lines
2.3 KiB
Markdown
# 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_
|