139 lines
4.0 KiB
PHP
139 lines
4.0 KiB
PHP
<?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>
|
|
<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>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="map"></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);
|
|
|
|
// Konversi data array PHP ke JSON JavaScript
|
|
var dataSpbuDariDatabase = <?php echo json_encode($data_spbu); ?>;
|
|
|
|
// 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
|
|
});
|
|
|
|
marker.bindPopup(
|
|
"<strong>" + spbu.nama_spbu + "</strong><br>" +
|
|
"Status Pelayanan: " + (spbu.status === '24_jam' ? 'Buka 24 Jam' : 'Reguler Biasa') + "<br>" +
|
|
"Koordinat: " + lat + ", " + lng
|
|
);
|
|
|
|
if (spbu.status === '24_jam') {
|
|
marker.addTo(layerSpbu24Jam);
|
|
} else {
|
|
marker.addTo(layerSpbuReguler); // <-- Sudah diperbaiki dari layerSpulerReguler
|
|
}
|
|
});
|
|
|
|
// 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>
|