Upload seluruh tugas SIG Point Line dan Polygon
This commit is contained in:
@@ -0,0 +1,313 @@
|
||||
# Dokumentasi Layer Groups dan Layers Control untuk SPBU Manager
|
||||
|
||||
## 📋 Daftar Isi
|
||||
1. [Overview](#overview)
|
||||
2. [Fitur Utama](#fitur-utama)
|
||||
3. [Implementasi Teknis](#implementasi-teknis)
|
||||
4. [Cara Penggunaan](#cara-penggunaan)
|
||||
5. [Struktur Kode](#struktur-kode)
|
||||
6. [Troubleshooting](#troubleshooting)
|
||||
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Aplikasi manajemen data SPBU ini menggunakan **Leaflet Layer Groups** dan **Layers Control** untuk memungkinkan pengguna mengorganisir dan memfilter data SPBU berdasarkan jam operasionalnya.
|
||||
|
||||
### Tujuan Implementasi
|
||||
- ✅ Memisahkan data SPBU 24 Jam dan SPBU Limited Hours ke dalam layer terpisah
|
||||
- ✅ Memberikan kontrol kepada pengguna untuk menampilkan/menyembunyikan setiap layer
|
||||
- ✅ Meningkatkan user experience dengan interface yang intuitif
|
||||
- ✅ Memudahkan visualisasi dan analisis data spasial
|
||||
|
||||
---
|
||||
|
||||
## Fitur Utama
|
||||
|
||||
### 1. **Dual Layer Groups**
|
||||
Aplikasi memiliki 2 layer groups utama:
|
||||
|
||||
| Layer | Keterangan | Ikon |
|
||||
|-------|-----------|------|
|
||||
| **SPBU 24 Jam** | Stasiun yang buka 24 jam setiap hari | 🕐 |
|
||||
| **SPBU Limited Hours** | Stasiun dengan jam operasional terbatas | ⏰ |
|
||||
|
||||
### 2. **Interactive Layers Control**
|
||||
- Terletak di sudut kanan atas peta
|
||||
- Menampilkan checkbox untuk setiap layer
|
||||
- Memungkinkan toggle layer dengan mudah
|
||||
- Simpan state layer saat navigasi peta
|
||||
|
||||
### 3. **Dynamic Marker Categorization**
|
||||
Marker SPBU otomatis dikelompokkan ke layer yang sesuai berdasarkan:
|
||||
- Nilai `open_24_hours` di database
|
||||
- Status saat ditambahkan pengguna
|
||||
- Update real-time saat data berubah
|
||||
|
||||
---
|
||||
|
||||
## Implementasi Teknis
|
||||
|
||||
### 1. **Inisialisasi Layer Groups** (dalam `initMap()`)
|
||||
|
||||
```javascript
|
||||
// Membuat layer groups
|
||||
spbu24HoursLayer = L.layerGroup();
|
||||
spbuLimitedHoursLayer = L.layerGroup();
|
||||
|
||||
// Menambahkan ke peta secara default
|
||||
spbu24HoursLayer.addTo(map);
|
||||
spbuLimitedHoursLayer.addTo(map);
|
||||
|
||||
// Membuat layers control
|
||||
layerControl = L.control.layers(baseLayers, overlayLayers, {
|
||||
position: 'topright',
|
||||
collapsed: false
|
||||
}).addTo(map);
|
||||
```
|
||||
|
||||
### 2. **Struktur Data Marker**
|
||||
|
||||
Sebelumnya:
|
||||
```javascript
|
||||
markers[id] = marker;
|
||||
```
|
||||
|
||||
Sesudah (dengan layer groups):
|
||||
```javascript
|
||||
markers[id] = {
|
||||
marker: marker,
|
||||
open_24_hours: open_24_hours
|
||||
};
|
||||
```
|
||||
|
||||
### 3. **Penambahan Marker ke Layer** (dalam `displayMarker()`)
|
||||
|
||||
```javascript
|
||||
if (open_24_hours) {
|
||||
spbu24HoursLayer.addLayer(marker);
|
||||
} else {
|
||||
spbuLimitedHoursLayer.addLayer(marker);
|
||||
}
|
||||
```
|
||||
|
||||
### 4. **Penghapusan Marker dari Layer** (dalam `deleteMarker()`)
|
||||
|
||||
```javascript
|
||||
if (markerData.open_24_hours) {
|
||||
spbu24HoursLayer.removeLayer(markerData.marker);
|
||||
} else {
|
||||
spbuLimitedHoursLayer.removeLayer(markerData.marker);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Cara Penggunaan
|
||||
|
||||
### Untuk Pengguna
|
||||
|
||||
#### 1. **Menampilkan/Menyembunyikan Layer**
|
||||
- Cari kotak **Layers Control** di sudut kanan atas peta
|
||||
- Lihat checkbox untuk:
|
||||
- ☑️ **🕐 SPBU 24 Jam** - SPBU yang buka 24 jam
|
||||
- ☑️ **⏰ SPBU Limited Hours** - SPBU dengan jam terbatas
|
||||
- Klik checkbox untuk menampilkan/menyembunyikan layer
|
||||
- Perubahan terjadi secara instant di peta
|
||||
|
||||
#### 2. **Menambahkan SPBU**
|
||||
1. Klik tombol "+ Add Point Manually" atau langsung klik di peta
|
||||
2. Isi detail SPBU di modal form
|
||||
3. Centang checkbox "Open 24 Hours" jika SPBU buka 24 jam
|
||||
4. Klik "Save" untuk menyimpan
|
||||
5. Marker akan otomatis masuk ke layer yang sesuai
|
||||
|
||||
#### 3. **Menghapus SPBU**
|
||||
1. Klik marker SPBU di peta
|
||||
2. Popup akan muncul
|
||||
3. Klik tombol "Delete" untuk menghapus
|
||||
4. Konfirmasi penghapusan
|
||||
5. Marker akan dihapus dari layer
|
||||
|
||||
### Untuk Developer
|
||||
|
||||
#### 1. **Mengakses Layer Groups**
|
||||
|
||||
```javascript
|
||||
// Menambahkan marker ke SPBU 24 Hours
|
||||
spbu24HoursLayer.addLayer(marker);
|
||||
|
||||
// Menghapus marker dari SPBU Limited Hours
|
||||
spbuLimitedHoursLayer.removeLayer(marker);
|
||||
|
||||
// Mendapatkan jumlah markers di layer
|
||||
const count24h = spbu24HoursLayer.getLayers().length;
|
||||
const countLimited = spbuLimitedHoursLayer.getLayers().length;
|
||||
```
|
||||
|
||||
#### 2. **Mengakses Layers Control**
|
||||
|
||||
```javascript
|
||||
// Menambahkan layer baru ke layers control
|
||||
const newLayer = L.layerGroup();
|
||||
layerControl.addOverlay(newLayer, 'Layer Name');
|
||||
|
||||
// Menghapus layer dari layers control
|
||||
layerControl.removeLayer(newLayer);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Struktur Kode
|
||||
|
||||
### File yang Dimodifikasi
|
||||
|
||||
#### 1. **app.js**
|
||||
|
||||
**Deklarasi Global:**
|
||||
```javascript
|
||||
let spbu24HoursLayer; // Layer untuk SPBU 24 jam
|
||||
let spbuLimitedHoursLayer; // Layer untuk SPBU limited hours
|
||||
let layerControl; // Kontrol layer
|
||||
```
|
||||
|
||||
**Fungsi Utama yang Dimodifikasi:**
|
||||
- `initMap()` - Menginisialisasi layer groups dan layers control
|
||||
- `displayMarker()` - Menambahkan marker ke layer yang sesuai
|
||||
- `deleteMarker()` - Menghapus marker dari layer
|
||||
- `loadMarkers()` - Load semua markers dan masukkan ke layer masing-masing
|
||||
|
||||
#### 2. **style.css**
|
||||
|
||||
**CSS Baru untuk Layers Control:**
|
||||
```css
|
||||
/* Styling untuk Leaflet layers control */
|
||||
.leaflet-control-layers { }
|
||||
.leaflet-control-layers-toggle { }
|
||||
.leaflet-control-layers-expanded { }
|
||||
.leaflet-control-layers label { }
|
||||
.leaflet-control-layers input[type="checkbox"] { }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### ❌ Markers tidak muncul setelah ditambahkan
|
||||
|
||||
**Penyebab:** Layer tidak ditambahkan ke peta atau marker ditambahkan ke layer yang tidak ditampilkan
|
||||
**Solusi:**
|
||||
1. Pastikan checkbox layer di Layers Control tercentang
|
||||
2. Buka Developer Console (F12) dan periksa error
|
||||
3. Pastikan database berhasil menyimpan data
|
||||
|
||||
### ❌ Layers Control tidak muncul
|
||||
|
||||
**Penyebab:**
|
||||
- Leaflet library tidak ter-load dengan benar
|
||||
- CSS Leaflet tidak ter-include
|
||||
- JavaScript error di console
|
||||
|
||||
**Solusi:**
|
||||
1. Periksa file `index.html` apakah Leaflet CDN sudah di-include
|
||||
2. Buka DevTools dan periksa Network tab untuk file CDN
|
||||
3. Lihat Console tab untuk error messages
|
||||
|
||||
### ❌ Marker hilang saat menghapus
|
||||
|
||||
**Penyebab:** Marker dihapus dari layer tapi masih di-reference di objek `markers`
|
||||
|
||||
**Solusi:**
|
||||
Kode sudah fixed di `deleteMarker()`:
|
||||
```javascript
|
||||
delete markers[id]; // Menghapus reference
|
||||
markerCount--; // Update counter
|
||||
```
|
||||
|
||||
### ❌ Layer tidak bisa di-toggle
|
||||
|
||||
**Penyebab:** Layer control JavaScript error atau layer tidak di-add ke control
|
||||
|
||||
**Solusi:**
|
||||
1. Periksa browser console (F12) untuk error
|
||||
2. Pastikan `layerControl.addOverlay()` dipanggil dengan parameter yang benar
|
||||
3. Reload halaman dan coba lagi
|
||||
|
||||
---
|
||||
|
||||
## Tips & Tricks
|
||||
|
||||
### 1. **Performance Optimization**
|
||||
Jika ada banyak markers (> 1000), pertimbangkan:
|
||||
- Menggunakan Leaflet.markercluster plugin untuk clustering
|
||||
- Membagi markers ke sub-layers tambahan
|
||||
- Lazy loading markers berdasarkan zoom level
|
||||
|
||||
### 2. **Extend Functionality**
|
||||
Anda bisa menambahkan layer groups baru untuk kategorisasi lainnya:
|
||||
|
||||
```javascript
|
||||
let spbuPromineLayer = L.layerGroup();
|
||||
let spbuRegularLayer = L.layerGroup();
|
||||
|
||||
// Kemudian add ke control:
|
||||
layerControl.addOverlay(spbuPromineLayer, '⭐ SPBU Premium');
|
||||
layerControl.addOverlay(spbuRegularLayer, '🏢 SPBU Regular');
|
||||
```
|
||||
|
||||
### 3. **Styling Markers Berbeda Per Layer**
|
||||
```javascript
|
||||
// Marker SPBU 24 Jam dengan warna berbeda
|
||||
if (open_24_hours) {
|
||||
const greenIcon = L.icon({
|
||||
iconUrl: 'images/green-marker.png',
|
||||
iconSize: [25, 41]
|
||||
});
|
||||
marker.setIcon(greenIcon);
|
||||
}
|
||||
```
|
||||
|
||||
### 4. **Export Data Per Layer**
|
||||
```javascript
|
||||
// Export hanya SPBU 24 Jam
|
||||
const layers24h = spbu24HoursLayer.getLayers();
|
||||
const data = layers24h.map(marker => ({
|
||||
lat: marker.getLatLng().lat,
|
||||
lng: marker.getLatLng().lng,
|
||||
popup: marker.getPopup().getContent()
|
||||
}));
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## API Reference
|
||||
|
||||
### Layer Group Methods
|
||||
|
||||
| Method | Deskripsi | Contoh |
|
||||
|--------|-----------|--------|
|
||||
| `addLayer(layer)` | Tambah layer | `spbu24HoursLayer.addLayer(marker)` |
|
||||
| `removeLayer(layer)` | Hapus layer | `spbu24HoursLayer.removeLayer(marker)` |
|
||||
| `getLayers()` | Dapatkan semua layers | `spbu24HoursLayer.getLayers()` |
|
||||
| `addTo(map)` | Add layer group ke peta | `spbu24HoursLayer.addTo(map)` |
|
||||
| `clearLayers()` | Hapus semua layers | `spbu24HoursLayer.clearLayers()` |
|
||||
|
||||
### Layers Control Methods
|
||||
|
||||
| Method | Deskripsi | Contoh |
|
||||
|--------|-----------|--------|
|
||||
| `addOverlay(layer, name)` | Tambah overlay layer | `layerControl.addOverlay(layer, 'Name')` |
|
||||
| `removeLayer(layer)` | Hapus layer dari control | `layerControl.removeLayer(layer)` |
|
||||
| `addBaseLayer(layer, name)` | Tambah base layer | `layerControl.addBaseLayer(layer, 'Base')` |
|
||||
|
||||
---
|
||||
|
||||
## Kesimpulan
|
||||
|
||||
Implementasi Layer Groups dan Layers Control memberikan:
|
||||
✅ Interface yang lebih intuitif dan user-friendly
|
||||
✅ Kontrol yang lebih baik terhadap visualisasi data
|
||||
✅ Performa yang optimal dengan grouping
|
||||
✅ Scalability untuk menambah kategori baru
|
||||
|
||||
Untuk pertanyaan lebih lanjut atau improvements, silakan modify code sesuai kebutuhan!
|
||||
Reference in New Issue
Block a user