Wilhelmus Ikchan Dwi Putra
128 lines
5.7 KiB
PHP
128 lines
5.7 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Tugas 2 - Layer Control SPBU Pontianak</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css" />
|
|
<script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>
|
|
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f6f9; }
|
|
#map { height: 550px; width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); border: 2px solid #333; }
|
|
.form-container { margin-top: 20px; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); display: none; }
|
|
.form-group { margin-bottom: 15px; }
|
|
.form-group label { display: block; font-weight: bold; margin-bottom: 5px; }
|
|
.form-group input, .form-group select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
|
|
button { background-color: #007bff; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h2>Tugas 2: Implementasi Layer Groups & Layers Control (Data SPBU Pontianak)</h2>
|
|
<div id="map"></div>
|
|
|
|
<div class="form-container" id="form-spbu">
|
|
<h3>Tambah Titik SPBU Baru</h3>
|
|
<form action="proses_spbu.php" method="POST">
|
|
<input type="hidden" id="geojson-str" name="geojson">
|
|
|
|
<div class="form-group">
|
|
<label>Nama SPBU / Nomor SPBU:</label>
|
|
<input type="text" name="nama_spbu" required placeholder="Contoh: SPBU 61.781.01">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Operasional 24 Jam?</label>
|
|
<select name="status_24jam" required>
|
|
<option value="Ya">Ya (Buka 24 Jam)</option>
|
|
<option value="Tidak">Tidak (Buka Terbatas)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Alamat / Lokasi:</label>
|
|
<input type="text" name="alamat" placeholder="Nama Jalan...">
|
|
</div>
|
|
|
|
<button type="submit">Simpan Lokasi SPBU</button>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
// --- 1. INISIALISASI PETA & BASEMAP ---
|
|
const map = L.map('map').setView([-0.0245, 109.3400], 13);
|
|
|
|
// Basemap Satelit (Esri)
|
|
const satelitLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
|
attribution: '© Esri'
|
|
}).addTo(map);
|
|
|
|
// Label Jalan
|
|
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}{r}.png').addTo(map);
|
|
|
|
// --- 2. DEFINISI LAYER GROUPS (INSTRUKSI TUGAS) ---
|
|
const groupSPBU24Jam = L.layerGroup().addTo(map); // Default dicentang/muncul
|
|
const groupSPBUNon24Jam = L.layerGroup().addTo(map); // Default dicentang/muncul
|
|
|
|
// --- 3. AMBIL DATA DARI DATABASE & MASUKKAN KE LAYER GROUP YANG SESUAI ---
|
|
fetch('get_spbu.php')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
data.forEach(spbu => {
|
|
// Penentuan Icon atau Warna Marker berdasarkan status operasional
|
|
// SPBU 24 Jam = Hijau, Non-24 Jam = Merah
|
|
let warnaMarker = spbu.status_24jam === 'Ya' ? 'green' : 'red';
|
|
|
|
// Kita buat marker berbentuk lingkaran (CircleMarker) agar rapi di peta satelit
|
|
let marker = L.circleMarker([spbu.lat, spbu.lng], {
|
|
radius: 10,
|
|
fillColor: warnaMarker,
|
|
color: "#fff",
|
|
weight: 2,
|
|
fillOpacity: 0.9
|
|
}).bindPopup(`
|
|
<b>${spbu.nama}</b><br>
|
|
<b>Buka 24 Jam:</b> ${spbu.status_24jam}<br>
|
|
<b>Alamat:</b> ${spbu.alamat}
|
|
`);
|
|
|
|
// Masukkan ke grup yang sesuai instruksi
|
|
if (spbu.status_24jam === 'Ya') {
|
|
marker.addTo(groupSPBU24Jam);
|
|
} else {
|
|
marker.addTo(groupSPBUNon24Jam);
|
|
}
|
|
});
|
|
});
|
|
|
|
// --- 4. IMPLEMENTASI LAYERS CONTROL (INSTRUKSI UTAMA) ---
|
|
// Menyiapkan daftar layer group untuk ditaruh di kontrol panel kanan atas
|
|
const overlayMaps = {
|
|
"<span style='color: green; font-weight:bold;'>⛽ SPBU Buka 24 Jam</span>": groupSPBU24Jam,
|
|
"<span style='color: red; font-weight:bold;'>⛽ SPBU Tidak Buka 24 Jam</span>": groupSPBUNon24Jam
|
|
};
|
|
|
|
// Memunculkan kotak control di peta
|
|
L.control.layers(null, overlayMaps, { collapsed: false }).addTo(map);
|
|
|
|
|
|
// --- 5. CONFIG GEOMAN UNTUK INPUT POINT BARU (OPSIONAL CRUD) ---
|
|
map.pm.addControls({
|
|
position: 'topleft',
|
|
drawMarker: true, // Kita hanya butuh menggambar Point/Marker untuk SPBU
|
|
drawPolyline: false, drawPolygon: false, drawRectangle: false, drawCircle: false, editMode: false, removalMode: false
|
|
});
|
|
|
|
map.on('pm:create', function(e) {
|
|
const layer = e.layer;
|
|
const geojson = layer.toGeoJSON();
|
|
|
|
document.getElementById('form-spbu').style.display = 'block';
|
|
document.getElementById('geojson-str').value = JSON.stringify(geojson);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |