Compare commits
2 Commits
8b9dc463a8
...
43e99a0f54
| Author | SHA1 | Date | |
|---|---|---|---|
| 43e99a0f54 | |||
| 94d54d9521 |
@@ -1,34 +1,3 @@
|
||||
<?php
|
||||
// TAMPILKAN ERROR JIKA ADA YANG SALAH
|
||||
ini_set('display_errors', 1);
|
||||
ini_set('display_startup_errors', 1);
|
||||
error_reporting(E_ALL);
|
||||
|
||||
// 1. KONEKSI KE DATABASE MySQL
|
||||
$host = "localhost";
|
||||
$username = "root";
|
||||
$password = "";
|
||||
$database = "webgis_spbu";
|
||||
|
||||
$conn = mysqli_connect($host, $username, $password, $database);
|
||||
|
||||
if (!$conn) {
|
||||
die("Koneksi ke database gagal: " . mysqli_connect_error());
|
||||
}
|
||||
|
||||
// 2. QUERY AMBIL DATA SPBU
|
||||
$query = mysqli_query($conn, "SELECT * FROM t_spbu");
|
||||
|
||||
if (!$query) {
|
||||
die("Query Error: " . mysqli_error($conn));
|
||||
}
|
||||
|
||||
$data_spbu = [];
|
||||
while ($row = mysqli_fetch_assoc($query)) {
|
||||
$data_spbu[] = $row;
|
||||
}
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
@@ -65,10 +34,12 @@ while ($row = mysqli_fetch_assoc($query)) {
|
||||
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>
|
||||
|
||||
@@ -85,36 +56,59 @@ while ($row = mysqli_fetch_assoc($query)) {
|
||||
var layerSpbu24Jam = L.layerGroup().addTo(map);
|
||||
var layerSpbuReguler = L.layerGroup().addTo(map);
|
||||
|
||||
// Konversi data array PHP ke JSON JavaScript
|
||||
var dataSpbuDariDatabase = <?php echo json_encode($data_spbu); ?>;
|
||||
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';
|
||||
|
||||
// 5. LOOPING DATA & PILAH BERDASARKAN STATUS SPBU
|
||||
dataSpbuDariDatabase.forEach(function(spbu) {
|
||||
var lat = parseFloat(spbu.latitude);
|
||||
var lng = parseFloat(spbu.longitude);
|
||||
|
||||
var warnaMarker = (spbu.status === '24_jam') ? '#007BFF' : '#DC3545';
|
||||
var marker = L.circleMarker([lat, lng], {
|
||||
radius: 8,
|
||||
fillColor: warnaMarker,
|
||||
color: '#fff',
|
||||
weight: 2,
|
||||
fillOpacity: 0.9
|
||||
});
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
marker.bindPopup(
|
||||
"<strong>" + spbu.nama_spbu + "</strong><br>" +
|
||||
"Status Pelayanan: " + (spbu.status === '24_jam' ? 'Buka 24 Jam' : 'Reguler Biasa') + "<br>" +
|
||||
"Koordinat: " + lat + ", " + lng
|
||||
);
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
if (spbu.status === '24_jam') {
|
||||
marker.addTo(layerSpbu24Jam);
|
||||
} else {
|
||||
marker.addTo(layerSpbuReguler); // <-- Sudah diperbaiki dari layerSpulerReguler
|
||||
}
|
||||
});
|
||||
loadSpbuData();
|
||||
|
||||
// 6. IMPLEMENTASI LAYERS CONTROL
|
||||
var overlayMaps = {
|
||||
|
||||
Reference in New Issue
Block a user