193 lines
7.1 KiB
HTML
193 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Project 1 - WebGIS Pemetaan SPBU</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css">
|
|
<style>
|
|
body { margin: 0; font-family: Arial, sans-serif; }
|
|
#map { height: 100vh; width: 100%; }
|
|
.title-box {
|
|
position: absolute; top: 10px; left: 55px; z-index: 999;
|
|
background: white; padding: 10px 14px; border-radius: 6px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,.2);
|
|
}
|
|
.title-box h3 { margin: 0 0 4px; }
|
|
.title-box p { margin: 0; font-size: 13px; color: #555; }
|
|
.popup-form label { font-weight: bold; font-size: 13px; }
|
|
.popup-form input, .popup-form select, .popup-form textarea {
|
|
width: 100%; padding: 7px; margin: 4px 0 9px;
|
|
box-sizing: border-box;
|
|
}
|
|
.popup-form button, .btn-delete {
|
|
border: 0; padding: 7px 12px; border-radius: 4px; cursor: pointer;
|
|
background: #0d6efd; color: white;
|
|
}
|
|
.btn-delete { background: #dc3545; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="title-box">
|
|
<h3>Project 1 - WebGIS SPBU</h3>
|
|
<p>Gunakan tool marker untuk menambahkan lokasi SPBU.</p>
|
|
</div>
|
|
<div id="map"></div>
|
|
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
|
|
<script>
|
|
const map = L.map('map').setView([-0.0227, 109.3425], 13);
|
|
|
|
const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap contributors'
|
|
}).addTo(map);
|
|
|
|
const satellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
|
attribution: 'Tiles © Esri'
|
|
});
|
|
|
|
const spbuLayer = new L.FeatureGroup().addTo(map);
|
|
L.control.layers({ 'OpenStreetMap': osm, 'Satellite': satellite }, { '📍 Data SPBU': spbuLayer }, { collapsed: false }).addTo(map);
|
|
|
|
const drawControl = new L.Control.Draw({
|
|
edit: false,
|
|
draw: {
|
|
marker: true,
|
|
polyline: false,
|
|
polygon: false,
|
|
rectangle: false,
|
|
circle: false,
|
|
circlemarker: false
|
|
}
|
|
});
|
|
map.addControl(drawControl);
|
|
|
|
map.on(L.Draw.Event.CREATED, function (e) {
|
|
const layer = e.layer;
|
|
const geojson = JSON.stringify(layer.toGeoJSON().geometry);
|
|
showForm(layer.getLatLng(), geojson);
|
|
});
|
|
|
|
function showForm(latlng, geojson) {
|
|
const html = `
|
|
<div class="popup-form">
|
|
<h3>Tambah Data SPBU</h3>
|
|
<label>Nama SPBU</label>
|
|
<input type="text" id="nama_spbu" placeholder="Contoh: SPBU Ahmad Yani">
|
|
|
|
<label>Alamat</label>
|
|
<textarea id="alamat" rows="2" placeholder="Alamat singkat"></textarea>
|
|
|
|
<label>Buka 24 Jam?</label>
|
|
<select id="status_24_jam">
|
|
<option value="Ya">Ya</option>
|
|
<option value="Tidak">Tidak</option>
|
|
</select>
|
|
|
|
<label>Kontak / No. WA</label>
|
|
<input type="text" id="kontak" placeholder="Opsional">
|
|
|
|
<textarea id="geojson" style="display:none">${geojson}</textarea>
|
|
<button onclick="simpanData()">Simpan</button>
|
|
</div>
|
|
`;
|
|
L.popup({ minWidth: 280 }).setLatLng(latlng).setContent(html).openOn(map);
|
|
}
|
|
|
|
function simpanData() {
|
|
const nama_spbu = document.getElementById('nama_spbu').value.trim();
|
|
const alamat = document.getElementById('alamat').value.trim();
|
|
const status_24_jam = document.getElementById('status_24_jam').value;
|
|
const kontak = document.getElementById('kontak').value.trim();
|
|
const geojson = document.getElementById('geojson').value;
|
|
|
|
if (!nama_spbu) {
|
|
alert('Nama SPBU wajib diisi!');
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData();
|
|
formData.append('nama_spbu', nama_spbu);
|
|
formData.append('alamat', alamat);
|
|
formData.append('status_24_jam', status_24_jam);
|
|
formData.append('kontak', kontak);
|
|
formData.append('geojson', geojson);
|
|
|
|
fetch('api.php?action=simpan', { method: 'POST', body: formData })
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.status === 'success') {
|
|
map.closePopup();
|
|
loadData();
|
|
} else {
|
|
alert(data.message || 'Gagal menyimpan data.');
|
|
}
|
|
})
|
|
.catch(() => alert('Gagal terhubung ke server.'));
|
|
}
|
|
|
|
function loadData() {
|
|
spbuLayer.clearLayers();
|
|
|
|
fetch('api.php?action=tampil')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
data.forEach(item => {
|
|
if (!item.geojson) return;
|
|
|
|
const geometry = JSON.parse(item.geojson);
|
|
const warna = item.status_24_jam === 'Ya' ? 'green' : 'red';
|
|
const icon = new L.Icon({
|
|
iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-${warna}.png`,
|
|
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
|
|
iconSize: [25, 41],
|
|
iconAnchor: [12, 41],
|
|
popupAnchor: [1, -34],
|
|
shadowSize: [41, 41]
|
|
});
|
|
|
|
const marker = L.geoJSON(geometry, {
|
|
pointToLayer: function(feature, latlng) {
|
|
return L.marker(latlng, { icon });
|
|
}
|
|
});
|
|
|
|
marker.bindPopup(`
|
|
<b>${item.nama_spbu}</b><br>
|
|
<b>Alamat:</b> ${item.alamat || '-'}<br>
|
|
<b>Buka 24 Jam:</b> ${item.status_24_jam}<br>
|
|
<b>Kontak:</b> ${item.kontak || '-'}<br><br>
|
|
<button class="btn-delete" onclick="hapusData(${item.id})">Hapus</button>
|
|
`);
|
|
|
|
marker.bindTooltip(item.nama_spbu);
|
|
spbuLayer.addLayer(marker);
|
|
});
|
|
});
|
|
}
|
|
|
|
function hapusData(id) {
|
|
if (!confirm('Yakin ingin menghapus data SPBU ini?')) return;
|
|
|
|
const formData = new FormData();
|
|
formData.append('id', id);
|
|
|
|
fetch('api.php?action=hapus', { method: 'POST', body: formData })
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.status === 'success') {
|
|
map.closePopup();
|
|
loadData();
|
|
} else {
|
|
alert(data.message || 'Gagal menghapus data.');
|
|
}
|
|
});
|
|
}
|
|
|
|
loadData();
|
|
</script>
|
|
</body>
|
|
</html>
|