146 lines
4.0 KiB
PHP
146 lines
4.0 KiB
PHP
<?php
|
|
// Konfigurasi database MySQL
|
|
$dbHost = 'localhost';
|
|
$dbUser = 'root';
|
|
$dbPass = '';
|
|
$dbName = 'webgis_spbu';
|
|
|
|
// Buat koneksi ke MySQL
|
|
$mysqli = new mysqli($dbHost, $dbUser, $dbPass, $dbName);
|
|
|
|
// Cek koneksi
|
|
if ($mysqli->connect_error) {
|
|
die('Koneksi gagal: ' . $mysqli->connect_error);
|
|
}
|
|
|
|
// Ambil data SPBU dari tabel t_spbu
|
|
$sql = "SELECT id, nama_spbu, latitude, longitude, status FROM t_spbu ORDER BY id ASC";
|
|
$result = $mysqli->query($sql);
|
|
|
|
$spbuData = [];
|
|
if ($result) {
|
|
while ($row = $result->fetch_assoc()) {
|
|
$spbuData[] = $row;
|
|
}
|
|
$result->free();
|
|
}
|
|
|
|
$mysqli->close();
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>WebGIS SPBU Pontianak</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<!-- Leaflet CSS -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css"
|
|
integrity="sha512-sA+UkMG91P5Wc+0jgGxYa0T1EplD1u481D5K9SekKhd61LajrXqoZ8VqfCDuriX8S1Q7A5qgGZnxf+5mnXzb7Q=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
#map {
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
.legend {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
z-index: 1000;
|
|
background: rgba(255,255,255,0.95);
|
|
border: 1px solid #ccc;
|
|
border-radius: 8px;
|
|
padding: 12px 14px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
|
font-size: 14px;
|
|
}
|
|
.legend h4 {
|
|
margin: 0 0 8px 0;
|
|
font-size: 15px;
|
|
}
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 6px;
|
|
}
|
|
.legend-color {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 3px;
|
|
display: inline-block;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="map"></div>
|
|
|
|
<div class="legend">
|
|
<h4>Legenda SPBU</h4>
|
|
<div class="legend-item">
|
|
<span class="legend-color" style="background:#1f77b4;"></span> SPBU 24 Jam
|
|
</div>
|
|
<div class="legend-item">
|
|
<span class="legend-color" style="background:#ff7f0e;"></span> SPBU Reguler
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Leaflet JavaScript -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"
|
|
integrity="sha512-LmORy7RvmJjpWgmt8TCok3bTfZufmr7eTqAHN7WC0zlAVDU6x0VPeuVQmZ2hS2k2dXl5OujJlm80bKv3vHDe5w=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
|
|
<script>
|
|
const map = L.map('map').setView([-0.0263, 109.3425], 13);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap contributors',
|
|
maxZoom: 19
|
|
}).addTo(map);
|
|
|
|
const group24Jam = L.layerGroup().addTo(map);
|
|
const groupReguler = L.layerGroup().addTo(map);
|
|
|
|
const spbuData = <?php echo json_encode($spbuData, JSON_NUMERIC_CHECK); ?>;
|
|
|
|
spbuData.forEach(item => {
|
|
const marker = L.circleMarker([item.latitude, item.longitude], {
|
|
radius: 7,
|
|
color: item.status === '24_jam' ? '#1f77b4' : '#ff7f0e',
|
|
fillColor: item.status === '24_jam' ? '#1f77b4' : '#ff7f0e',
|
|
fillOpacity: 0.8,
|
|
weight: 2
|
|
});
|
|
|
|
marker.bindPopup(`
|
|
<strong>${item.nama_spbu}</strong><br>
|
|
Status: ${item.status === '24_jam' ? '24 Jam' : 'Reguler'}<br>
|
|
Lat: ${item.latitude}<br>
|
|
Lng: ${item.longitude}
|
|
`);
|
|
|
|
if (item.status === '24_jam') {
|
|
marker.addTo(group24Jam);
|
|
} else {
|
|
marker.addTo(groupReguler);
|
|
}
|
|
});
|
|
|
|
const overlayMaps = {
|
|
'🕐 SPBU 24 Jam': group24Jam,
|
|
'⏰ SPBU Reguler': groupReguler
|
|
};
|
|
|
|
L.control.layers(null, overlayMaps, { position: 'topright', collapsed: false }).addTo(map);
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|