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

# 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

npm run build
# Output ada di folder dist/

3 — Deploy ke Vercel (gratis, paling mudah)

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

4 — Deploy ke Netlify

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

5 — Deploy ke GitHub Pages

# 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.

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

2.3 KiB Raw Blame History