Upload files to "tugas03"
This commit is contained in:
@@ -0,0 +1,30 @@
|
|||||||
|
# Project 3 - Layer Groups dan Layers Control SPBU
|
||||||
|
|
||||||
|
Project ini khusus untuk memperlihatkan konsep:
|
||||||
|
|
||||||
|
- `L.layerGroup()`
|
||||||
|
- `L.control.layers()`
|
||||||
|
- Pemisahan layer berdasarkan atribut data
|
||||||
|
|
||||||
|
Data SPBU dipisahkan menjadi:
|
||||||
|
|
||||||
|
1. SPBU buka 24 jam.
|
||||||
|
2. SPBU tidak buka 24 jam.
|
||||||
|
|
||||||
|
## Database
|
||||||
|
|
||||||
|
Import file `database.sql` ke phpMyAdmin. Database yang dibuat adalah:
|
||||||
|
|
||||||
|
`webgis_spbu_layer_p3`
|
||||||
|
|
||||||
|
Tabel utama:
|
||||||
|
|
||||||
|
`spbu`
|
||||||
|
|
||||||
|
## Cara Menjalankan
|
||||||
|
|
||||||
|
1. Letakkan folder ini di `htdocs`.
|
||||||
|
2. Jalankan Apache dan MySQL.
|
||||||
|
3. Import `database.sql`.
|
||||||
|
4. Buka `http://localhost/webgis_pisah/project_03_layer_control_spbu/`.
|
||||||
|
5. Gunakan checkbox layer di kanan atas untuk menampilkan atau menyembunyikan kelompok SPBU.
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
<?php
|
||||||
|
include 'connect.php';
|
||||||
|
header('Content-Type: application/json; charset=utf-8');
|
||||||
|
|
||||||
|
$sql = "SELECT * FROM tugas03_spbu ORDER BY nama_spbu ASC";
|
||||||
|
$result = $conn->query($sql);
|
||||||
|
$data = [];
|
||||||
|
|
||||||
|
while ($row = $result->fetch_assoc()) {
|
||||||
|
$data[] = $row;
|
||||||
|
}
|
||||||
|
|
||||||
|
echo json_encode($data);
|
||||||
|
$conn->close();
|
||||||
|
?>
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
<?php
|
||||||
|
$host = getenv('DB_HOST') ?: 'localhost';
|
||||||
|
$user = getenv('DB_USER') ?: 'root';
|
||||||
|
$pass = getenv('DB_PASS') ?: '';
|
||||||
|
$db = getenv('DB_NAME') ?: 'webgis_tugas_sig';
|
||||||
|
$port = (int)(getenv('DB_PORT') ?: 3306);
|
||||||
|
|
||||||
|
$conn = new mysqli($host, $user, $pass, $db, $port);
|
||||||
|
|
||||||
|
if ($conn->connect_error) {
|
||||||
|
http_response_code(500);
|
||||||
|
die(json_encode([
|
||||||
|
"status" => "error",
|
||||||
|
"message" => "Koneksi database gagal: " . $conn->connect_error
|
||||||
|
]));
|
||||||
|
}
|
||||||
|
|
||||||
|
$conn->set_charset('utf8mb4');
|
||||||
|
?>
|
||||||
@@ -0,0 +1,113 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="id">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Project 3 - Layer Groups dan Layers Control SPBU</title>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.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; }
|
||||||
|
.legend {
|
||||||
|
background: rgba(255,255,255,.95); padding: 10px 14px;
|
||||||
|
border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.2);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="title-box">
|
||||||
|
<h3>Project 3 - Layer Groups & Layers Control</h3>
|
||||||
|
<p>Data SPBU dipisahkan menjadi layer 24 jam dan tidak 24 jam.</p>
|
||||||
|
</div>
|
||||||
|
<div id="map"></div>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.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 spbu24Layer = L.layerGroup().addTo(map);
|
||||||
|
const spbuTidak24Layer = L.layerGroup().addTo(map);
|
||||||
|
|
||||||
|
L.control.layers(
|
||||||
|
{ 'OpenStreetMap': osm, 'Satellite': satellite },
|
||||||
|
{
|
||||||
|
'<span style="color:green">📍 SPBU Buka 24 Jam</span>': spbu24Layer,
|
||||||
|
'<span style="color:red">📍 SPBU Tidak 24 Jam</span>': spbuTidak24Layer
|
||||||
|
},
|
||||||
|
{ collapsed: false }
|
||||||
|
).addTo(map);
|
||||||
|
|
||||||
|
function loadData() {
|
||||||
|
spbu24Layer.clearLayers();
|
||||||
|
spbuTidak24Layer.clearLayers();
|
||||||
|
|
||||||
|
fetch('api.php')
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(data => {
|
||||||
|
data.forEach(item => {
|
||||||
|
if (!item.geojson) return;
|
||||||
|
const geometry = JSON.parse(item.geojson);
|
||||||
|
const coords = geometry.coordinates;
|
||||||
|
const latlng = [coords[1], coords[0]];
|
||||||
|
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.marker(latlng, { icon })
|
||||||
|
.bindTooltip(item.nama_spbu)
|
||||||
|
.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 || '-'}
|
||||||
|
`);
|
||||||
|
|
||||||
|
if (item.status_24_jam === 'Ya') {
|
||||||
|
spbu24Layer.addLayer(marker);
|
||||||
|
} else {
|
||||||
|
spbuTidak24Layer.addLayer(marker);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => alert('Gagal memuat data SPBU dari database.'));
|
||||||
|
}
|
||||||
|
|
||||||
|
const legend = L.control({ position: 'bottomright' });
|
||||||
|
legend.onAdd = function () {
|
||||||
|
const div = L.DomUtil.create('div', 'legend');
|
||||||
|
div.innerHTML = `
|
||||||
|
<b>Keterangan</b><br>
|
||||||
|
<img src="https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png" width="12"> SPBU 24 Jam<br>
|
||||||
|
<img src="https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png" width="12"> SPBU Tidak 24 Jam
|
||||||
|
`;
|
||||||
|
return div;
|
||||||
|
};
|
||||||
|
legend.addTo(map);
|
||||||
|
|
||||||
|
loadData();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user