253 lines
7.4 KiB
PHP
253 lines
7.4 KiB
PHP
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Peta SPBU</title>
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
|
|
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
|
|
<style>
|
|
body { margin: 0; padding: 0; }
|
|
#map { height: 100vh; }
|
|
|
|
/* Custom styling untuk Layers Control */
|
|
.leaflet-control-layers {
|
|
border-radius: 8px !important;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
|
|
}
|
|
.leaflet-control-layers-expanded {
|
|
padding: 10px 14px !important;
|
|
font-size: 13px !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="map"></div>
|
|
|
|
<script>
|
|
|
|
// ================= MAP =================
|
|
var map = L.map('map').setView([-0.055353822919599796, 109.3495577035227], 15);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap contributors'
|
|
}).addTo(map);
|
|
|
|
// ================= ICON =================
|
|
// SPBU 24 Jam - Hijau
|
|
var icon24Jam = L.icon({
|
|
iconUrl: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png',
|
|
iconSize: [32, 32],
|
|
iconAnchor: [16, 32],
|
|
popupAnchor: [0, -32]
|
|
});
|
|
|
|
// SPBU Tidak 24 Jam - Merah
|
|
var iconTidak24Jam = L.icon({
|
|
iconUrl: 'https://maps.google.com/mapfiles/ms/icons/red-dot.png',
|
|
iconSize: [32, 32],
|
|
iconAnchor: [16, 32],
|
|
popupAnchor: [0, -32]
|
|
});
|
|
|
|
// ================= LAYER GROUPS =================
|
|
var layer24Jam = L.layerGroup().addTo(map); // tampil by default
|
|
var layerTidak24Jam = L.layerGroup().addTo(map); // tampil by default
|
|
|
|
// ================= LAYERS CONTROL =================
|
|
var overlayMaps = {
|
|
"🟢 SPBU Buka 24 Jam" : layer24Jam,
|
|
"🔴 SPBU Tidak Buka 24 Jam" : layerTidak24Jam
|
|
};
|
|
|
|
L.control.layers(null, overlayMaps, {
|
|
collapsed: false, // langsung tampil (tidak perlu klik expand)
|
|
position: 'topright'
|
|
}).addTo(map);
|
|
|
|
// ================= LOAD DATA =================
|
|
function loadData() {
|
|
|
|
// Bersihkan layer sebelum reload
|
|
layer24Jam.clearLayers();
|
|
layerTidak24Jam.clearLayers();
|
|
|
|
$.getJSON("ambil.php", function(data) {
|
|
|
|
data.forEach(function(d) {
|
|
|
|
var adalah24Jam = (d.buka_24jam === "yes");
|
|
var icon = adalah24Jam ? icon24Jam : iconTidak24Jam;
|
|
var targetLayer = adalah24Jam ? layer24Jam : layerTidak24Jam;
|
|
|
|
var marker = L.marker([d.lat, d.lng], {
|
|
icon: icon,
|
|
draggable: true
|
|
}).addTo(targetLayer);
|
|
|
|
// Simpan id & jenis di marker
|
|
marker.spbu_id = d.id;
|
|
marker.spbu_24jam = d.buka_24jam;
|
|
|
|
// ---- Popup edit + hapus ----
|
|
var labelStatus = adalah24Jam
|
|
? '<span style="color:green;font-weight:bold;">✅ Buka 24 Jam</span>'
|
|
: '<span style="color:red;font-weight:bold;">🔴 Tidak Buka 24 Jam</span>';
|
|
|
|
var popup = `
|
|
<form onsubmit="updateData(event, ${d.id})">
|
|
<b>Edit SPBU</b><br>
|
|
<small>${labelStatus}</small><br><br>
|
|
|
|
Nama:<br>
|
|
<input type="text" name="nama_spbu" value="${d.nama_spbu}" required style="width:180px"><br><br>
|
|
|
|
WA:<br>
|
|
<input type="text" name="no_wa" value="${d.no_wa}" required style="width:180px"><br><br>
|
|
|
|
Status Operasional:<br>
|
|
<select name="status">
|
|
<option value="yes" ${d.status=="yes"?"selected":""}>Beroperasi (Yes)</option>
|
|
<option value="no" ${d.status=="no" ?"selected":""}>Tidak Beroperasi (No)</option>
|
|
</select><br><br>
|
|
|
|
Jenis SPBU:<br>
|
|
<select name="buka_24jam">
|
|
<option value="yes" ${d.buka_24jam=="yes"?"selected":""}>Buka 24 Jam</option>
|
|
<option value="no" ${d.buka_24jam=="no" ?"selected":""}>Tidak Buka 24 Jam</option>
|
|
</select><br><br>
|
|
|
|
<button type="submit"
|
|
style="background:#2196F3;color:#fff;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;margin-right:6px">
|
|
Update
|
|
</button>
|
|
<button type="button" onclick="hapusData(${d.id})"
|
|
style="background:#f44336;color:#fff;border:none;padding:6px 12px;border-radius:4px;cursor:pointer">
|
|
Hapus
|
|
</button>
|
|
</form>
|
|
`;
|
|
|
|
marker.bindPopup(popup);
|
|
|
|
// ---- Drag → update koordinat ----
|
|
marker.on('dragend', function() {
|
|
var pos = marker.getLatLng();
|
|
$.post("update.php", {
|
|
id: d.id,
|
|
lat: pos.lat,
|
|
lng: pos.lng
|
|
});
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
}
|
|
|
|
loadData();
|
|
|
|
// ================= TAMBAH DATA (klik peta) =================
|
|
map.on('click', function(e) {
|
|
|
|
var form = `
|
|
<form id="formSPBU">
|
|
<b>Tambah SPBU</b><br><br>
|
|
|
|
Nama:<br>
|
|
<input type="text" name="nama_spbu" required style="width:180px"><br><br>
|
|
|
|
WA:<br>
|
|
<input type="text" name="no_wa" required style="width:180px"><br><br>
|
|
|
|
Status Operasional:<br>
|
|
<select name="status">
|
|
<option value="yes">Beroperasi (Yes)</option>
|
|
<option value="no">Tidak Beroperasi (No)</option>
|
|
</select><br><br>
|
|
|
|
Jenis SPBU:<br>
|
|
<select name="buka_24jam">
|
|
<option value="yes">Buka 24 Jam</option>
|
|
<option value="no">Tidak Buka 24 Jam</option>
|
|
</select><br><br>
|
|
|
|
<input type="hidden" name="lat" value="${e.latlng.lat}">
|
|
<input type="hidden" name="lng" value="${e.latlng.lng}">
|
|
|
|
<button type="submit"
|
|
style="background:#4CAF50;color:#fff;border:none;padding:6px 14px;border-radius:4px;cursor:pointer">
|
|
Simpan
|
|
</button>
|
|
</form>
|
|
`;
|
|
|
|
L.popup().setLatLng(e.latlng).setContent(form).openOn(map);
|
|
});
|
|
|
|
// ================= SIMPAN =================
|
|
$(document).on('submit', '#formSPBU', function(e) {
|
|
e.preventDefault();
|
|
|
|
var formData = $(this).serialize();
|
|
|
|
$.post("simpan.php", formData, function(res) {
|
|
|
|
if (res.trim() === "success") {
|
|
alert("✅ Data berhasil disimpan");
|
|
map.closePopup();
|
|
loadData(); // reload marker tanpa refresh halaman
|
|
} else {
|
|
alert("❌ ERROR: " + res);
|
|
}
|
|
|
|
});
|
|
});
|
|
|
|
// ================= UPDATE DATA =================
|
|
function updateData(e, id) {
|
|
e.preventDefault();
|
|
|
|
var form = e.target;
|
|
var data = $(form).serialize() + "&id=" + id;
|
|
|
|
$.post("edit.php", data, function(res) {
|
|
|
|
if (res.trim() === "success") {
|
|
alert("✅ Data diupdate");
|
|
map.closePopup();
|
|
loadData(); // reload marker supaya ikon/layer langsung berubah
|
|
} else {
|
|
alert("❌ " + res);
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
// ================= HAPUS =================
|
|
function hapusData(id) {
|
|
|
|
if (confirm("Yakin hapus data ini?")) {
|
|
|
|
$.post("hapus.php", { id: id }, function(res) {
|
|
|
|
if (res.trim() === "success") {
|
|
map.closePopup();
|
|
loadData();
|
|
alert("✅ Data dihapus");
|
|
} else {
|
|
alert("❌ Gagal: " + res);
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|