# 🗺️ WebGIS Project - Manajemen Data Spasial

## 📌 Deskripsi Proyek

Proyek ini merupakan aplikasi **WebGIS berbasis LeafletJS, PHP, dan MySQL** yang digunakan untuk mengelola data spasial dalam bentuk:

* 📍 Point (SPBU)
* ➖ Line / Polyline (Jalan)
* 🔷 Polygon (Kavling Tanah)

Aplikasi ini memungkinkan user untuk:

* Menambahkan data langsung dari peta
* Menyimpan ke database
* Menampilkan kembali data pada peta dengan visualisasi berbeda

---

## 🎯 Tujuan Tugas

Mahasiswa diharapkan mampu:

* Mengimplementasikan WebGIS berbasis web
* Mengelola data spasial (Point, Line, Polygon)
* Melakukan analisis sederhana:

  * Panjang jalan
  * Luas tanah
* Menggunakan LeafletJS untuk visualisasi peta

---

## 🧩 Fitur Aplikasi

### 1. 📍 Data Point - SPBU

* Input dengan klik pada peta
* Menyimpan:

  * Nama SPBU
  * Nomor SPBU
  * Status (24 jam / tidak)
  * Latitude & Longitude
* Ditampilkan sebagai marker pada peta

---

### 2. ➖ Data Line - Jalan

* Input dengan menggambar garis (Polyline)
* Status jalan:

  * Jalan Nasional
  * Jalan Provinsi
  * Jalan Kabupaten
* Warna berbeda sesuai status:

  * Nasional → Merah
  * Provinsi → Biru
  * Kabupaten → Hijau
* Panjang jalan dihitung otomatis (meter)

---

### 3. 🔷 Data Polygon - Kavling Tanah

* Input dengan menggambar area (Polygon)
* Status kepemilikan:

  * SHM
  * HGB
  * HGU
  * HP
* Warna berbeda sesuai status
* Luas tanah dihitung otomatis (m²)

---

## ⚙️ Teknologi yang Digunakan

* 🌐 Frontend: HTML, CSS, JavaScript
* 🗺️ Library: LeafletJS + Leaflet Draw ([leaflet.github.io][1])
* 🖥️ Backend: PHP
* 🗄️ Database: MySQL

Leaflet mendukung berbagai bentuk geometri seperti:

* Marker (Point)
* Polyline (Line)
* Polygon (Area) ([igismap.com][2])

---

## 🗄️ Struktur Database

### Tabel SPBU

* nama
* no_spbu
* status
* latitude
* longitude

### Tabel Jalan

* nama
* status
* panjang
* geom (koordinat)

### Tabel Kavling

* nama
* status
* luas
* geom (koordinat)

---

## 🔄 Alur Sistem

### Input Data

1. User memilih mode (Point / Line / Polygon)
2. User melakukan input di peta:

   * Klik (Point)
   * Draw (Line / Polygon)
3. Sistem menghitung:

   * Panjang (Line)
   * Luas (Polygon)
4. Data dikirim ke server (PHP)
5. Data disimpan ke MySQL

---

### Menampilkan Data

1. Data diambil dari database
2. Ditampilkan di peta
3. Warna disesuaikan berdasarkan kategori
4. Data juga ditampilkan di sidebar

---

## 🧠 Konsep GIS yang Digunakan

* Spatial Data:

  * Point
  * Line
  * Polygon
* Attribute Data
* Visualisasi berbasis kategori
* Analisis spasial sederhana:

  * Distance (panjang)
  * Area (luas)

---

## 🚀 Cara Menjalankan

1. Jalankan MySQL
2. Masuk ke folder project:

   ```
   cd webgis-spbu
   ```
3. Jalankan server:

   ```
   php -S localhost:8000
   ```
4. Buka di browser:

   ```
   http://localhost:8000
   ```

---

## 📌 Catatan Penting

* Jangan menggunakan Live Server (tidak support PHP)
* Gunakan Leaflet Draw untuk input Line & Polygon
* Perhitungan panjang & luas HARUS otomatis (tidak manual)

---

## 🎓 Kesimpulan

Aplikasi ini merupakan implementasi dasar WebGIS yang mencakup:

* Input data spasial
* Penyimpanan database
* Visualisasi peta interaktif

Proyek ini menunjukkan pemahaman terhadap konsep dasar Sistem Informasi Geografis (SIG) dalam pengembangan aplikasi berbasis web.

---

[1]: https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html?utm_source=chatgpt.com "Leaflet Draw Documentation"
[2]: https://www.igismap.com/leafletjs-point-polyline-polygon-rectangle-circle/?utm_source=chatgpt.com "Leaflet.js - Point, Polyline, Polygon, Rectangle, Circle"