133 lines
4.6 KiB
PHP
133 lines
4.6 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WebGIS Manajemen Data SPBU - Layer Control</title>
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
|
|
<style>
|
|
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
#map {
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
.info.legend {
|
|
background: white;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 15px rgba(0,0,0,0.2);
|
|
line-height: 24px;
|
|
}
|
|
.legend i {
|
|
width: 12px;
|
|
height: 12px;
|
|
float: left;
|
|
margin-right: 8px;
|
|
margin-top: 6px;
|
|
border-radius: 50%;
|
|
}
|
|
</style>
|
|
<!-- SPBU PAGE FIXED: USE API FETCH FROM api/get_points.php -->
|
|
</head>
|
|
<body>
|
|
|
|
<div id="map"></div>
|
|
<div id="spbu-status" style="position: fixed; bottom: 16px; right: 16px; z-index: 9999; background: rgba(255,255,255,0.9); color: #111; padding: 8px 12px; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.1); font-size: 13px; font-weight: 600;">SPBU mode: API fetch</div>
|
|
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
|
|
<script>
|
|
// 3. INISIALISASI PETA
|
|
var map = L.map('map').setView([-0.0263, 109.3425], 13);
|
|
|
|
// Base Layer OpenStreetMap
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap contributors'
|
|
}).addTo(map);
|
|
|
|
// 4. BUAT LAYER GROUPS
|
|
var layerSpbu24Jam = L.layerGroup().addTo(map);
|
|
var layerSpbuReguler = L.layerGroup().addTo(map);
|
|
|
|
function renderSpbuMarkers(markers) {
|
|
markers.forEach(function(spbu) {
|
|
var lat = parseFloat(spbu.latitude);
|
|
var lng = parseFloat(spbu.longitude);
|
|
if (isNaN(lat) || isNaN(lng)) {
|
|
return;
|
|
}
|
|
var isOpen24 = spbu.open_24_hours == 1 || spbu.open_24_hours === '1' || spbu.open_24_hours === true;
|
|
var warnaMarker = isOpen24 ? '#007BFF' : '#DC3545';
|
|
|
|
var marker = L.circleMarker([lat, lng], {
|
|
radius: 8,
|
|
fillColor: warnaMarker,
|
|
color: '#fff',
|
|
weight: 2,
|
|
fillOpacity: 0.9
|
|
});
|
|
|
|
marker.bindPopup(
|
|
"<strong>" + (spbu.name || spbu.nama_spbu || 'SPBU') + "</strong><br>" +
|
|
"Status Pelayanan: " + (isOpen24 ? 'Buka 24 Jam' : 'Reguler Biasa') + "<br>" +
|
|
"Koordinat: " + lat + ", " + lng
|
|
);
|
|
|
|
if (isOpen24) {
|
|
marker.addTo(layerSpbu24Jam);
|
|
} else {
|
|
marker.addTo(layerSpbuReguler);
|
|
}
|
|
});
|
|
}
|
|
|
|
function loadSpbuData() {
|
|
fetch('api/get_points.php')
|
|
.then(function(response) {
|
|
if (!response.ok) {
|
|
throw new Error('HTTP error ' + response.status);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(function(data) {
|
|
if (data.success && Array.isArray(data.markers)) {
|
|
renderSpbuMarkers(data.markers);
|
|
} else {
|
|
console.error('Response tidak berformat expected:', data);
|
|
}
|
|
})
|
|
.catch(function(error) {
|
|
console.error('Gagal memuat data SPBU dari API:', error);
|
|
});
|
|
}
|
|
|
|
loadSpbuData();
|
|
|
|
// 6. IMPLEMENTASI LAYERS CONTROL
|
|
var overlayMaps = {
|
|
"SPBU Buka 24 Jam": layerSpbu24Jam,
|
|
"SPBU Reguler Biasa": layerSpbuReguler
|
|
};
|
|
|
|
L.control.layers(null, overlayMaps, { collapsed: false }).addTo(map);
|
|
|
|
// 7. MENAMPILKAN KOTAK LEGENDA
|
|
var legend = L.control({ position: 'bottomleft' });
|
|
legend.onAdd = function (map) {
|
|
var div = L.DomUtil.create('div', 'info legend');
|
|
div.innerHTML += '<strong>Legenda SPBU</strong><br>';
|
|
div.innerHTML += '<i style="background: #007BFF"></i> SPBU 24 Jam<br>';
|
|
div.innerHTML += '<i style="background: #DC3545"></i> SPBU Reguler<br>';
|
|
return div;
|
|
};
|
|
legend.addTo(map);
|
|
</script>
|
|
</body>
|
|
</html> |