Rayhan/UAS_SIG
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add animated custom markers for SPBU and implement centralized application logic in app.js

Browse Source
This commit is contained in:
z0rayy
2026-06-08 21:59:05 +07:00
parent a090cc7934
commit d3c9de3a34
4 changed files with 175 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/app.js
+24 -25
View File
@@ -989,15 +989,16 @@ function renderMapLayers() {
// Render SPBU
window.appState.data.spbu.forEach(item => {
const color = item.status === '24jam' ? '#22c55e' : '#f59e0b';
const marker = L.circleMarker([item.latitude, item.longitude], {
radius: 6,
fillColor: color,
color: '#fff',
weight: 2,
opacity: 1,
fillOpacity: 0.8
}).bindPopup(`<strong>${item.nama}</strong><br>Status: ${item.status === '24jam' ? '24 Jam' : 'Tidak 24 Jam'}`);
const is24 = item.status === '24jam';
const haloClass = is24 ? 'spbu' : 'spbu-off';
const customIcon = L.divIcon({
className: 'custom-marker',
html: `<div class="marker-halo ${haloClass}"></div><div class="marker-icon-inner">⛽</div>`,
iconSize: [28, 28], iconAnchor: [14, 14], popupAnchor: [0, -14]
});
const marker = L.marker([item.latitude, item.longitude], { icon: customIcon })
.bindPopup(`<strong>${item.nama}</strong><br>Status: ${is24 ? '24 Jam' : 'Tidak 24 Jam'}`);
const layer = item.status === '24jam' ? window.appState.layers.spbu24 : window.appState.layers.spbuTidak;
marker.addTo(layer);
@@ -1036,27 +1037,25 @@ function renderMapLayers() {
// Render Ibadah
window.appState.data.ibadah.forEach(item => {
const marker = L.circleMarker([item.latitude, item.longitude], {
radius: 5,
fillColor: '#8b5cf6',
color: '#fff',
weight: 2,
opacity: 1,
fillOpacity: 0.8
}).bindPopup(`<strong>${item.nama}</strong><br>${item.alamat}`);
const ibadahIcon = L.divIcon({
className: 'custom-marker',
html: `<div class="marker-halo ibadah"></div><div class="marker-icon-inner">🕌</div>`,
iconSize: [28, 28], iconAnchor: [14, 14], popupAnchor: [0, -14]
});
const marker = L.marker([item.latitude, item.longitude], { icon: ibadahIcon })
.bindPopup(`<strong>${item.nama}</strong><br>${item.alamat}`);
marker.addTo(window.appState.layers.ibadah);
});
// Render Miskin
window.appState.data.miskin.forEach(item => {
const marker = L.circleMarker([item.latitude, item.longitude], {
radius: 5,
fillColor: '#000000',
color: '#fff',
weight: 2,
opacity: 1,
fillOpacity: 0.8
}).bindPopup(`<strong>${item.nama_kk}</strong><br>${item.keterangan || ''}`);
const miskinIcon = L.divIcon({
className: 'custom-marker',
html: `<div class="marker-halo miskin"></div><div class="marker-icon-inner">🏠</div>`,
iconSize: [28, 28], iconAnchor: [14, 14], popupAnchor: [0, -14]
});
const marker = L.marker([item.latitude, item.longitude], { icon: miskinIcon })
.bindPopup(`<strong>${item.nama_kk}</strong><br>${item.keterangan || ''}`);
marker.addTo(window.appState.layers.miskin);
});
}