TUGAS_SIG_JOHANESSATRIACHRISTIO/Projek SPBU 24 JAM/LAYER_GROUPS_DOCUMENTATION.md

Dokumentasi Layer Groups dan Layers Control untuk SPBU Manager

📋 Daftar Isi

1. Overview
2. Fitur Utama
3. Implementasi Teknis
4. Cara Penggunaan
5. Struktur Kode
6. 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())

// 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:

markers[id] = marker;

Sesudah (dengan layer groups):

markers[id] = {
    marker: marker,
    open_24_hours: open_24_hours
};

3. Penambahan Marker ke Layer (dalam displayMarker())

if (open_24_hours) {
    spbu24HoursLayer.addLayer(marker);
} else {
    spbuLimitedHoursLayer.addLayer(marker);
}

4. Penghapusan Marker dari Layer (dalam deleteMarker())

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

// 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

// 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:

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:

/* 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():

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:

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

// 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

// 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!