# 🗺️ Panduan Penggunaan Sistem Informasi Geografis (SIG) - SPBU Marker

Selamat datang di Panduan Pengguna aplikasi **Sistem Informasi Geografis Pemetaan SPBU**. Aplikasi ini dirancang untuk mempermudah Anda dalam melihat, menambah, mengubah, dan menghapus data marker SPBU secara interaktif di atas peta.

## 🔗 Link Akses Website
Aplikasi dapat diakses langsung melalui tautan berikut:
👉 [Demo Live Website SPBU Marker](https://sigwebsite.free.je/SPBU_Marker/)

---

## 🚀 Fitur Utama & Cara Menggunakannya

### 1. Menampilkan Daftar & Fokus Lokasi SPBU
* **Cara Kerja:** Di sebelah kanan layar terdapat panel **"Daftar SPBU Terdaftar"** yang menampilkan semua nama, nomor registrasi, dan alamat SPBU yang ada di database.
* **Fitur Utama:** Jika Anda **mengklik salah satu item** pada daftar tersebut, kamera peta akan otomatis melakukan *fly-to* (meluncur/fokus) ke titik lokasi SPBU tersebut dengan tingkat perbesaran yang tinggi (*zoom-in*), dan form input di sebelah kanan akan otomatis berubah menjadi mode edit.

### 2. Menambah Data SPBU Baru (Lacak Alamat Otomatis)
* **Langkah 1:** Klik tombol hijau besar bertuliskan **"TAMBAH SPBU BARU"** di bawah peta. Kursor mouse pada area peta akan berubah menjadi tanda bidik (*crosshair*).
* **Langkah 2:** Cari lokasi yang diinginkan pada peta, lalu **klik sekali** pada titik tersebut. Sebuah pin (marker) sementara akan muncul.
* **Fitur Cerdas (Geocoding):** Sistem akan otomatis melacak koordinat (Latitude & Longitude) serta mengisi kolom alamat secara otomatis berdasarkan titik yang Anda klik menggunakan layanan *OpenStreetMap Nominatim*.
* **Langkah 3:** Lengkapi kolom nama SPBU, nomor register, dan tipe operasional (24 Jam atau Biasa) pada form di sebelah kanan.
* **Langkah 4:** Klik tombol **"SIMPAN DATA"** untuk memasukkannya ke database.

### 3. Mengubah / Mengedit Data SPBU (Interaktif)
Ada dua cara mudah untuk mengubah data yang sudah terdaftar:
* **Melalui Form:** Klik salah satu SPBU di daftar sebelah kanan, ubah informasi yang diinginkan pada form (seperti mengganti nama atau tipe), lalu klik **"UPDATE DATA SPBU"**.
* **Melalui Geser Pin (Drag & Drop):** Anda bisa langsung **mengklik dan menahan (drag)** ikon pin SPBU di atas peta, lalu menggesernya ke lokasi baru. Saat pin dilepas, sistem akan otomatis memperbarui koordinat posisi baru dan melacak ulang alamat terbarunya secara instan.

### 4. Menghapus Data SPBU
* **Cara Kerja:** Klik pin SPBU yang ingin dihapus di atas peta sampai muncul jendela kecil (*popup*).
* **Langkah:** Klik tombol merah bertuliskan **"Hapus"** di dalam popup tersebut. Sistem akan menampilkan konfirmasi keamanan sebelum benar-benar menghapus data tersebut dari server.

---

## 🎨 Indikator Warna Pin di Peta
Untuk mempermudah visualisasi, tanda pin di peta memiliki dua warna berbeda berdasarkan tipe operasionalnya:
* 🟢 **Pin Hijau:** Menandakan SPBU yang beroperasi penuh **24 Jam**.
* 🔴 **Pin Merah:** Menandakan SPBU dengan jam operasional **Biasa / Standar**.