z0rayy
443 lines
19 KiB
HTML
443 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Peta SPBU Publik — WebGIS</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
:root {
|
|
--clr-bg: #0f172a; --clr-surface: #1e293b; --clr-surface-light: #334155;
|
|
--clr-border: #334155; --clr-text: #f1f5f9; --clr-muted: #94a3b8;
|
|
--clr-primary: #3b82f6; --clr-primary-dark: #2563eb;
|
|
--clr-success: #22c55e; --clr-danger: #ef4444;
|
|
--radius: 10px; --shadow: 0 4px 24px rgba(0,0,0,.45);
|
|
--transition: .2s ease;
|
|
--sidebar-width: 260px; --sidebar-collapsed: 70px;
|
|
}
|
|
html, body { height: 100%; font-family: 'Inter', sans-serif; background: var(--clr-bg); color: var(--clr-text); overflow: hidden; }
|
|
|
|
/* ---- Layout ---- */
|
|
.app-wrapper { display: flex; height: 100vh; }
|
|
|
|
/* ---- Sidebar ---- */
|
|
.sidebar {
|
|
width: var(--sidebar-width);
|
|
background: linear-gradient(135deg, #1a2a42 0%, #0f172a 100%);
|
|
border-right: 1px solid var(--clr-border);
|
|
display: flex; flex-direction: column;
|
|
transition: width var(--transition); z-index: 100;
|
|
box-shadow: 2px 0 8px rgba(0,0,0,.3); overflow: hidden;
|
|
}
|
|
.sidebar.collapsed { width: var(--sidebar-collapsed); }
|
|
.sidebar-header {
|
|
padding: 20px; border-bottom: 1px solid var(--clr-border);
|
|
display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
|
|
}
|
|
.sidebar-logo { display: flex; align-items: center; gap: 10px; flex: 1; overflow: hidden; }
|
|
.sidebar-logo-icon {
|
|
width: 40px; height: 40px; flex-shrink: 0;
|
|
background: linear-gradient(135deg, var(--clr-primary), #8b5cf6);
|
|
border-radius: 8px; display: flex; align-items: center; justify-content: center;
|
|
font-size: 14px; font-weight: 700; box-shadow: 0 0 12px rgba(59,130,246,.4);
|
|
}
|
|
.sidebar-logo-text { overflow: hidden; }
|
|
.sidebar-logo-text h2 { font-size: 14px; font-weight: 700; white-space: nowrap; }
|
|
.sidebar-logo-text p { font-size: 11px; color: var(--clr-muted); white-space: nowrap; }
|
|
.sidebar.collapsed .sidebar-logo-text { display: none; }
|
|
.sidebar-toggle { background: transparent; border: none; color: var(--clr-muted); cursor: pointer; font-size: 20px; padding: 4px; flex-shrink: 0; transition: color var(--transition); }
|
|
.sidebar-toggle:hover { color: var(--clr-text); }
|
|
.sidebar-nav { flex: 1; overflow-y: auto; padding: 16px 0; }
|
|
.sidebar-section { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
|
|
.sidebar-section:last-child { border-bottom: none; }
|
|
.sidebar-section-title { padding: 10px 16px; font-size: 10px; font-weight: 700; color: var(--clr-muted); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; }
|
|
.sidebar.collapsed .sidebar-section-title { opacity: 0; }
|
|
.sidebar-menu { display: flex; flex-direction: column; }
|
|
.sidebar-item {
|
|
display: flex; align-items: center; gap: 12px; padding: 13px 16px;
|
|
color: var(--clr-muted); cursor: pointer; text-decoration: none;
|
|
transition: all var(--transition); border-left: 3px solid transparent;
|
|
}
|
|
.sidebar-item:hover { color: var(--clr-text); background: rgba(255,255,255,.05); border-left-color: var(--clr-primary); }
|
|
.sidebar-item.active { color: var(--clr-primary); background: rgba(59,130,246,.1); border-left-color: var(--clr-primary); }
|
|
.sidebar-item-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
|
|
.sidebar-item-text { flex: 1; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; }
|
|
.sidebar.collapsed .sidebar-item-text { display: none; }
|
|
|
|
/* ---- Main ---- */
|
|
.main-wrapper { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
|
|
header {
|
|
flex-shrink: 0; height: 60px;
|
|
background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
|
|
border-bottom: 1px solid var(--clr-border);
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 0 20px; box-shadow: 0 2px 12px rgba(0,0,0,.5);
|
|
}
|
|
.header-title h1 { font-size: 18px; font-weight: 700; }
|
|
.header-breadcrumb { font-size: 13px; color: var(--clr-muted); margin-top: 2px; }
|
|
.content-area { flex: 1; position: relative; overflow: hidden; }
|
|
|
|
/* ---- Map ---- */
|
|
#map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
|
|
|
|
/* ---- Controls Panel ---- */
|
|
.controls-panel {
|
|
position: absolute; top: 16px; right: 16px;
|
|
background: rgba(30, 41, 59, 0.95); backdrop-filter: blur(8px);
|
|
border: 1px solid var(--clr-border); border-radius: var(--radius);
|
|
padding: 16px; z-index: 1000; width: 280px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.controls-panel h3 { font-size: 13px; font-weight: 700; color: var(--clr-text); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
|
|
.ctrl-input {
|
|
width: 100%; padding: 9px 12px; margin-bottom: 10px;
|
|
background: var(--clr-bg); border: 1px solid var(--clr-border);
|
|
border-radius: 6px; color: var(--clr-text); font-family: inherit; font-size: 13px; outline: none;
|
|
}
|
|
.ctrl-input:focus { border-color: var(--clr-primary); }
|
|
.ctrl-btn {
|
|
display: block; width: 100%; padding: 10px; margin-bottom: 8px;
|
|
background: var(--clr-primary); color: white; border: none; border-radius: 6px;
|
|
font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.2s;
|
|
}
|
|
.ctrl-btn:hover { background: var(--clr-primary-dark); }
|
|
.ctrl-btn:disabled { background: var(--clr-surface-light); cursor: not-allowed; color: var(--clr-muted); }
|
|
.info-box {
|
|
display: none; background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.3);
|
|
border-radius: 6px; padding: 10px; margin-top: 8px; font-size: 13px;
|
|
}
|
|
.info-box.active { display: block; }
|
|
.info-box strong { color: var(--clr-primary); }
|
|
|
|
/* ---- Search Panel (Left) ---- */
|
|
.search-panel {
|
|
position: absolute; top: 16px; left: 60px; /* offset for leaflet zoom controls */
|
|
background: rgba(30, 41, 59, 0.95); backdrop-filter: blur(8px);
|
|
border: 1px solid var(--clr-border); border-radius: var(--radius);
|
|
padding: 12px; z-index: 1000; width: 300px;
|
|
box-shadow: var(--shadow); display: flex; flex-direction: column;
|
|
}
|
|
.search-panel h3 { font-size: 13px; font-weight: 700; color: var(--clr-text); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px; }
|
|
.search-input-wrap { position: relative; }
|
|
.search-input-wrap .ctrl-input { margin-bottom: 0; padding-right: 30px; }
|
|
.search-results {
|
|
max-height: 250px; overflow-y: auto; margin-top: 8px;
|
|
display: none; flex-direction: column; gap: 4px;
|
|
}
|
|
.search-results.active { display: flex; }
|
|
.search-result-item {
|
|
padding: 8px 10px; background: rgba(255,255,255,0.05); border-radius: 6px;
|
|
cursor: pointer; transition: 0.2s; border: 1px solid transparent;
|
|
}
|
|
.search-result-item:hover { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.3); }
|
|
.search-result-name { font-size: 13px; font-weight: 600; color: #f1f5f9; display: block; margin-bottom: 2px; }
|
|
.search-result-desc { font-size: 11px; color: #94a3b8; display: block; }
|
|
|
|
|
|
/* ---- Legend Panel ---- */
|
|
.legend-panel {
|
|
position: absolute; bottom: 16px; right: 16px;
|
|
background: rgba(30, 41, 59, 0.95); backdrop-filter: blur(8px);
|
|
border: 1px solid var(--clr-border); border-radius: var(--radius);
|
|
padding: 14px; z-index: 1000; width: 200px; font-size: 13px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.legend-panel h3 { font-size: 11px; font-weight: 700; color: var(--clr-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
|
|
.legend-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; color: var(--clr-text); font-size: 12px; }
|
|
.legend-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
|
|
|
|
/* ---- Custom Marker ---- */
|
|
.custom-marker {
|
|
display: flex; justify-content: center; align-items: center;
|
|
}
|
|
.marker-halo {
|
|
position: absolute;
|
|
width: 40px; height: 40px;
|
|
border-radius: 50%;
|
|
animation: pulse 2s infinite ease-out;
|
|
}
|
|
.marker-halo.spbu { background: rgba(34, 197, 94, 0.5); }
|
|
.marker-halo.spbu-off { background: rgba(245, 158, 11, 0.5); }
|
|
.marker-halo.user { background: rgba(59, 130, 246, 0.5); }
|
|
|
|
.marker-icon-inner {
|
|
position: relative; z-index: 2;
|
|
width: 28px; height: 28px;
|
|
background: white; border-radius: 50%;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.5);
|
|
display: flex; justify-content: center; align-items: center;
|
|
font-size: 14px;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { transform: scale(0.5); opacity: 1; }
|
|
100% { transform: scale(1.5); opacity: 0; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app-wrapper">
|
|
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar" id="sidebar">
|
|
<div class="sidebar-header">
|
|
<div class="sidebar-logo">
|
|
<div class="sidebar-logo-icon">WG</div>
|
|
<div class="sidebar-logo-text">
|
|
<h2>WebGIS</h2>
|
|
<p>SPBU System</p>
|
|
</div>
|
|
</div>
|
|
<button class="sidebar-toggle" id="sidebar-toggle">≡</button>
|
|
</div>
|
|
<nav class="sidebar-nav">
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-section-title">Navigasi</div>
|
|
<div class="sidebar-menu">
|
|
<div class="sidebar-item active">
|
|
<div class="sidebar-item-icon">🗺</div>
|
|
<div class="sidebar-item-text">Peta SPBU</div>
|
|
</div>
|
|
<a href="index.php" class="sidebar-item">
|
|
<div class="sidebar-item-icon">🏠</div>
|
|
<div class="sidebar-item-text">Beranda</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="sidebar-section">
|
|
</div>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- Main -->
|
|
<div class="main-wrapper">
|
|
<header>
|
|
<div class="header-title">
|
|
<h1>Peta Persebaran SPBU</h1>
|
|
<div class="header-breadcrumb">Peta Publik — Data dikelola oleh Administrator</div>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:10px;">
|
|
<span id="data-count" style="font-size:13px; color:#94a3b8; background:rgba(255,255,255,.06); border:1px solid #334155; padding:5px 12px; border-radius:7px;">Memuat...</span>
|
|
<button id="btn-refresh" title="Refresh data terbaru" style="background:rgba(59,130,246,.15); border:1px solid rgba(59,130,246,.3); color:#60a5fa; border-radius:7px; padding:6px 12px; cursor:pointer; font-size:13px; font-family:inherit;">🔄 Refresh</button>
|
|
</div>
|
|
</header>
|
|
<div class="content-area">
|
|
<div id="map"></div>
|
|
|
|
<!-- Search Panel (Left) -->
|
|
<div class="search-panel">
|
|
<h3><i class="fa-solid fa-magnifying-glass" style="color:var(--clr-primary)"></i> Cari SPBU</h3>
|
|
<div class="search-input-wrap">
|
|
<input id="search-spbu" class="ctrl-input" type="text" placeholder="Ketik nama atau no SPBU..." autocomplete="off">
|
|
</div>
|
|
<div id="search-results" class="search-results"></div>
|
|
</div>
|
|
|
|
<div class="controls-panel">
|
|
<h3>📍 Lokasi & Rute</h3>
|
|
<button id="btn-location" class="ctrl-btn">📍 Dapatkan Lokasi Saya</button>
|
|
<button id="btn-nearest" class="ctrl-btn" disabled>🎯 Cari SPBU Terdekat</button>
|
|
<div id="info-box" class="info-box">
|
|
<strong>SPBU Terdekat:</strong><br>
|
|
<span id="nearest-name">-</span><br>
|
|
<strong>Jarak:</strong> <span id="nearest-distance">-</span> km
|
|
</div>
|
|
</div>
|
|
|
|
<div class="legend-panel">
|
|
<h3>Legenda</h3>
|
|
<div class="legend-row"><div class="legend-dot" style="background:#22c55e;"></div> SPBU 24 Jam</div>
|
|
<div class="legend-row"><div class="legend-dot" style="background:#f59e0b;"></div> SPBU Tidak 24 Jam</div>
|
|
<div class="legend-row"><div class="legend-dot" style="background:#ef4444;"></div> Lokasi Anda</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
|
|
<script>
|
|
// Sidebar toggle
|
|
document.getElementById('sidebar-toggle').addEventListener('click', () => {
|
|
document.getElementById('sidebar').classList.toggle('collapsed');
|
|
});
|
|
|
|
// Init Map
|
|
const map = L.map('map').setView([-0.026, 109.342], 13);
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap contributors', maxZoom: 19
|
|
}).addTo(map);
|
|
|
|
const baseMaps = {
|
|
'Standard': L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap' }),
|
|
'Dark': L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', { maxZoom: 19 })
|
|
};
|
|
L.control.layers(baseMaps).addTo(map);
|
|
|
|
let spbuData = [], spbuLayer = L.layerGroup().addTo(map);
|
|
let userMarker = null, routeLine = null, userLocation = null;
|
|
|
|
const icon24 = L.circleMarker ? null : null; // will use circleMarker
|
|
|
|
async function loadSPBU(silent = false) {
|
|
try {
|
|
const res = await fetch('backend/read.php');
|
|
const result = await res.json();
|
|
// Fix: read.php returns {success: true, data:[...]}, not {status:'success'}
|
|
if (result.success && result.data) {
|
|
spbuData = result.data;
|
|
renderSPBU(document.getElementById('search-spbu').value);
|
|
if (!silent) {
|
|
document.getElementById('data-count').textContent = spbuData.length + ' SPBU';
|
|
}
|
|
}
|
|
} catch (err) { console.error('Error loading SPBU:', err); }
|
|
}
|
|
|
|
function renderSPBU(filterText = '', autoZoom = false) {
|
|
spbuLayer.clearLayers();
|
|
const bounds = [];
|
|
spbuData.forEach(spbu => {
|
|
if (filterText && !spbu.nama.toLowerCase().includes(filterText.toLowerCase()) && !spbu.no_spbu.toLowerCase().includes(filterText.toLowerCase())) return;
|
|
const lat = parseFloat(spbu.latitude), lng = parseFloat(spbu.longitude);
|
|
if (isNaN(lat) || isNaN(lng)) return;
|
|
|
|
const is24 = spbu.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([lat, lng], { icon: customIcon })
|
|
.bindPopup('<strong>' + spbu.nama + '</strong><br>No: ' + spbu.no_spbu + '<br>Status: ' + (is24 ? '✅ 24 Jam' : '⏰ Tidak 24 Jam'))
|
|
.addTo(spbuLayer);
|
|
bounds.push([lat, lng]);
|
|
});
|
|
|
|
if (autoZoom && filterText && bounds.length > 0) {
|
|
if (bounds.length === 1) {
|
|
map.flyTo(bounds[0], 16);
|
|
} else {
|
|
map.fitBounds(bounds, { padding: [50, 50] });
|
|
}
|
|
}
|
|
}
|
|
|
|
document.getElementById('search-spbu').addEventListener('input', e => {
|
|
const filterText = e.target.value.toLowerCase();
|
|
const resultsDiv = document.getElementById('search-results');
|
|
|
|
if (!filterText) {
|
|
resultsDiv.classList.remove('active');
|
|
renderSPBU(''); // render all, no zoom
|
|
return;
|
|
}
|
|
|
|
// Filter data for list
|
|
const matched = spbuData.filter(spbu =>
|
|
spbu.nama.toLowerCase().includes(filterText) ||
|
|
spbu.no_spbu.toLowerCase().includes(filterText)
|
|
);
|
|
|
|
if (matched.length > 0) {
|
|
resultsDiv.innerHTML = matched.map(m => `
|
|
<div class="search-result-item" onclick="window.selectSPBU(${m.id})">
|
|
<span class="search-result-name">${m.nama}</span>
|
|
<span class="search-result-desc">No: ${m.no_spbu} • ${m.status === '24jam' ? '24 Jam' : 'Tidak 24 Jam'}</span>
|
|
</div>
|
|
`).join('');
|
|
} else {
|
|
resultsDiv.innerHTML = '<div style="padding:8px 10px; color:#94a3b8; font-size:12px;">Tidak ditemukan.</div>';
|
|
}
|
|
resultsDiv.classList.add('active');
|
|
|
|
// Filter map markers, but don't auto-zoom on every keystroke
|
|
renderSPBU(filterText, false);
|
|
});
|
|
|
|
window.selectSPBU = function(id) {
|
|
const spbu = spbuData.find(s => s.id == id);
|
|
if (!spbu) return;
|
|
|
|
// Set input value to name
|
|
document.getElementById('search-spbu').value = spbu.nama;
|
|
document.getElementById('search-results').classList.remove('active');
|
|
|
|
// Render and zoom to specific SPBU
|
|
renderSPBU(spbu.nama.toLowerCase(), true);
|
|
};
|
|
|
|
const userIcon = L.divIcon({
|
|
className: 'custom-marker',
|
|
html: `<div class="marker-halo user"></div><div class="marker-icon-inner">📍</div>`,
|
|
iconSize: [28, 28],
|
|
iconAnchor: [14, 14]
|
|
});
|
|
|
|
document.getElementById('btn-location').addEventListener('click', () => {
|
|
if (!navigator.geolocation) return alert('Geolocation tidak didukung browser Anda.');
|
|
const btn = document.getElementById('btn-location');
|
|
btn.textContent = '⏳ Mencari lokasi...';
|
|
btn.disabled = true;
|
|
navigator.geolocation.getCurrentPosition(pos => {
|
|
const lat = pos.coords.latitude, lng = pos.coords.longitude;
|
|
userLocation = [lng, lat];
|
|
if (userMarker) map.removeLayer(userMarker);
|
|
userMarker = L.marker([lat, lng], { icon: userIcon }).bindPopup('📍 Lokasi Anda').addTo(map);
|
|
map.flyTo([lat, lng], 14);
|
|
btn.textContent = '✅ Lokasi Diperbarui';
|
|
btn.disabled = false;
|
|
document.getElementById('btn-nearest').disabled = false;
|
|
}, err => {
|
|
alert('Gagal mendapatkan lokasi: ' + err.message);
|
|
btn.textContent = '📍 Dapatkan Lokasi Saya';
|
|
btn.disabled = false;
|
|
});
|
|
});
|
|
|
|
document.getElementById('btn-nearest').addEventListener('click', () => {
|
|
if (!userLocation || !spbuData.length) return;
|
|
let nearestSPBU = null, minDist = Infinity;
|
|
const userPt = turf.point(userLocation);
|
|
spbuData.forEach(spbu => {
|
|
const lat = parseFloat(spbu.latitude), lng = parseFloat(spbu.longitude);
|
|
if (isNaN(lat) || isNaN(lng)) return;
|
|
const dist = turf.distance(userPt, turf.point([lng, lat]), { units: 'kilometers' });
|
|
if (dist < minDist) { minDist = dist; nearestSPBU = spbu; }
|
|
});
|
|
if (!nearestSPBU) return;
|
|
if (routeLine) map.removeLayer(routeLine);
|
|
const lat = parseFloat(nearestSPBU.latitude), lng = parseFloat(nearestSPBU.longitude);
|
|
routeLine = L.polyline([[userLocation[1], userLocation[0]], [lat, lng]], {
|
|
color: '#ef4444', weight: 3, dashArray: '8, 8', opacity: 0.85
|
|
}).addTo(map);
|
|
map.fitBounds(routeLine.getBounds(), { padding: [60, 60] });
|
|
document.getElementById('nearest-name').textContent = nearestSPBU.nama + ' (No. ' + nearestSPBU.no_spbu + ')';
|
|
document.getElementById('nearest-distance').textContent = minDist.toFixed(2);
|
|
document.getElementById('info-box').classList.add('active');
|
|
});
|
|
|
|
document.getElementById('btn-refresh').addEventListener('click', () => {
|
|
const btn = document.getElementById('btn-refresh');
|
|
btn.textContent = 'Memuat...';
|
|
loadSPBU().then(() => {
|
|
btn.textContent = '🔄 Refresh';
|
|
});
|
|
});
|
|
|
|
// Auto-refresh every 30 seconds
|
|
setInterval(() => {
|
|
loadSPBU(true); // silent refresh
|
|
}, 30000);
|
|
|
|
loadSPBU();
|
|
</script>
|
|
</body>
|
|
</html>
|