add file
This commit is contained in:
+252
@@ -0,0 +1,252 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user