Upload seluruh tugas SIG Point Line dan Polygon

2026-06-11 17:04:19 +07:00
commit ba7c5c2d4d
71 changed files with 11212 additions and 0 deletions
@@ -0,0 +1,145 @@
+<?php
+// Konfigurasi database MySQL
+$dbHost = 'localhost';
+$dbUser = 'root';
+$dbPass = '';
+$dbName = 'webgis_spbu';
+
+// Buat koneksi ke MySQL
+$mysqli = new mysqli($dbHost, $dbUser, $dbPass, $dbName);
+
+// Cek koneksi
+if ($mysqli->connect_error) {
+    die('Koneksi gagal: ' . $mysqli->connect_error);
+}
+
+// Ambil data SPBU dari tabel t_spbu
+$sql = "SELECT id, nama_spbu, latitude, longitude, status FROM t_spbu ORDER BY id ASC";
+$result = $mysqli->query($sql);
+
+$spbuData = [];
+if ($result) {
+    while ($row = $result->fetch_assoc()) {
+        $spbuData[] = $row;
+    }
+    $result->free();
+}
+
+$mysqli->close();
+?>
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <title>WebGIS SPBU Pontianak</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- Leaflet CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css"
+          integrity="sha512-sA+UkMG91P5Wc+0jgGxYa0T1EplD1u481D5K9SekKhd61LajrXqoZ8VqfCDuriX8S1Q7A5qgGZnxf+5mnXzb7Q=="
+          crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+    <style>
+        body {
+            margin: 0;
+            font-family: Arial, sans-serif;
+        }
+        #map {
+            width: 100%;
+            height: 100vh;
+        }
+        .legend {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            z-index: 1000;
+            background: rgba(255,255,255,0.95);
+            border: 1px solid #ccc;
+            border-radius: 8px;
+            padding: 12px 14px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+            font-size: 14px;
+        }
+        .legend h4 {
+            margin: 0 0 8px 0;
+            font-size: 15px;
+        }
+        .legend-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 6px;
+        }
+        .legend-color {
+            width: 12px;
+            height: 12px;
+            border-radius: 3px;
+            display: inline-block;
+        }
+    </style>
+</head>
+<body>
+
+<div id="map"></div>
+
+<div class="legend">
+    <h4>Legenda SPBU</h4>
+    <div class="legend-item">
+        <span class="legend-color" style="background:#1f77b4;"></span> SPBU 24 Jam
+    </div>
+    <div class="legend-item">
+        <span class="legend-color" style="background:#ff7f0e;"></span> SPBU Reguler
+    </div>
+</div>
+
+<!-- Leaflet JavaScript -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"
+        integrity="sha512-LmORy7RvmJjpWgmt8TCok3bTfZufmr7eTqAHN7WC0zlAVDU6x0VPeuVQmZ2hS2k2dXl5OujJlm80bKv3vHDe5w=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+<script>
+    const map = L.map('map').setView([-0.0263, 109.3425], 13);
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '© OpenStreetMap contributors',
+        maxZoom: 19
+    }).addTo(map);
+
+    const group24Jam = L.layerGroup().addTo(map);
+    const groupReguler = L.layerGroup().addTo(map);
+
+    const spbuData = <?php echo json_encode($spbuData, JSON_NUMERIC_CHECK); ?>;
+
+    spbuData.forEach(item => {
+        const marker = L.circleMarker([item.latitude, item.longitude], {
+            radius: 7,
+            color: item.status === '24_jam' ? '#1f77b4' : '#ff7f0e',
+            fillColor: item.status === '24_jam' ? '#1f77b4' : '#ff7f0e',
+            fillOpacity: 0.8,
+            weight: 2
+        });
+
+        marker.bindPopup(`
+            <strong>${item.nama_spbu}</strong><br>
+            Status: ${item.status === '24_jam' ? '24 Jam' : 'Reguler'}<br>
+            Lat: ${item.latitude}<br>
+            Lng: ${item.longitude}
+        `);
+
+        if (item.status === '24_jam') {
+            marker.addTo(group24Jam);
+        } else {
+            marker.addTo(groupReguler);
+        }
+    });
+
+    const overlayMaps = {
+        '🕐 SPBU 24 Jam': group24Jam,
+        '⏰ SPBU Reguler': groupReguler
+    };
+
+    L.control.layers(null, overlayMaps, { position: 'topright', collapsed: false }).addTo(map);
+</script>
+
+</body>
+</html>