Upload files to "/"

2026-06-06 14:17:28 +00:00
commit ff3827e724
5 changed files with 194 additions and 0 deletions
@@ -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: '&copy; OpenStreetMap contributors'
+    }).addTo(map);
+
+    const satellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+        attribution: 'Tiles &copy; 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>