Project UAS Sistem Informasi Geografis (SIG)

2026-06-08 20:24:54 +07:00
commit c6087ed7dd
33 changed files with 4549 additions and 0 deletions
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WebGIS SPBU — Pontianak</title>
+
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
+
+    <!-- Leaflet -->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet-draw/dist/leaflet.draw.css"/>
+
+    <!-- App styles -->
+    <link rel="stylesheet" href="../css/style.css"/>
+</head>
+<body>
+
+<header>
+    <a href="../" class="back-btn" title="Kembali ke Menu">←</a>
+    <div class="logo">
+        <div class="logo-icon">⛽</div>
+        <div class="logo-text">WEB<span>GIS</span> SPBU</div>
+    </div>
+    <div class="header-divider"></div>
+    <span style="font-size:12px;color:var(--muted);">Pontianak, Kalimantan Barat</span>
+
+    <div class="legend">
+        <div class="legend-item">
+            <div class="legend-dot" style="background:#4ade80"></div> SPBU 24 Jam
+        </div>
+        <div class="legend-item">
+            <div class="legend-dot" style="background:#f87171"></div> Tidak 24 Jam
+        </div>
+        <div class="legend-item">
+            <div class="legend-dot" style="background:#3b82f6"></div> Titik SPBU
+        </div>
+    </div>
+
+    <div class="layer-sep"></div>
+
+    <!-- Toggle SPBU -->
+    <div class="layer-control">
+        <button class="layer-btn btn-24 active" id="btn24" onclick="toggleLayer('24jam')">
+            <span class="dot" style="background:#4ade80"></span>
+            24 Jam
+        </button>
+        <button class="layer-btn btn-tidak active" id="btnTidak" onclick="toggleLayer('tidak')">
+            <span class="dot" style="background:#f87171"></span>
+            Tidak 24 Jam
+        </button>
+    </div>
+</header>
+
+<div id="map"></div>
+
+<!-- Leaflet JS -->
+<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+<script src="https://unpkg.com/leaflet-draw/dist/leaflet.draw.js"></script>
+
+<!-- App script -->
+<script src="../js/draw_spbu_point.js"></script>
+
+</body>
+</html>