Merge branch 'main' of https://git.ifuntanhub.dev/karooo/d1041231004-webgis-spbu

Dockerfile

@@ -0,0 +1,7 @@
+FROM php:8.2-apache
+
+RUN docker-php-ext-install mysqli
+
+COPY . /var/www/html/
+
+EXPOSE 80

api/config.php

@@ -0,0 +1,26 @@
+<?php
+// api/config.php
+define('DB_HOST', 'localhost');
+define('DB_USER', 'root');
+define('DB_PASS', '');
+define('DB_NAME', 'spbu');
+
+function getDB(): mysqli {
+    $conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
+    if ($conn->connect_error) {
+        http_response_code(500);
+        die(json_encode(['error' => 'Koneksi database gagal: ' . $conn->connect_error]));
+    }
+    $conn->set_charset('utf8mb4');
+    return $conn;
+}
+
+header('Content-Type: application/json');
+header('Access-Control-Allow-Origin: *');
+header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
+header('Access-Control-Allow-Headers: Content-Type');
+
+if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
+    http_response_code(200);
+    exit;
+}

api/jalan.php

@@ -0,0 +1,80 @@
+<?php
+// api/jalan.php  — CRUD untuk data Jalan (Polyline)
+require_once 'config.php';
+
+$db     = getDB();
+$method = $_SERVER['REQUEST_METHOD'];
+$id     = isset($_GET['id']) ? (int)$_GET['id'] : 0;
+
+switch ($method) {
+
+    case 'GET':
+        if ($id) {
+            $stmt = $db->prepare("SELECT * FROM jalan WHERE id = ?");
+            $stmt->bind_param('i', $id);
+            $stmt->execute();
+            $row = $stmt->get_result()->fetch_assoc();
+            echo json_encode($row ?: ['error' => 'Data tidak ditemukan']);
+        } else {
+            $res  = $db->query("SELECT * FROM jalan ORDER BY id DESC");
+            $rows = [];
+            while ($r = $res->fetch_assoc()) $rows[] = $r;
+            echo json_encode($rows);
+        }
+        break;
+
+    case 'POST':
+        $body = json_decode(file_get_contents('php://input'), true);
+        $stmt = $db->prepare(
+            "INSERT INTO jalan (nama_jalan, status_jalan, panjang_m, geojson)
+             VALUES (?, ?, ?, ?)"
+        );
+        $stmt->bind_param(
+            'ssds',
+            $body['nama_jalan'], $body['status_jalan'],
+            $body['panjang_m'],  $body['geojson']
+        );
+        if ($stmt->execute()) {
+            echo json_encode(['success' => true, 'id' => $db->insert_id]);
+        } else {
+            http_response_code(500);
+            echo json_encode(['error' => $db->error]);
+        }
+        break;
+
+    case 'PUT':
+        $body = json_decode(file_get_contents('php://input'), true);
+        $stmt = $db->prepare(
+            "UPDATE jalan SET nama_jalan=?, status_jalan=?, panjang_m=?, geojson=?
+             WHERE id=?"
+        );
+        $stmt->bind_param(
+            'ssdsi',
+            $body['nama_jalan'], $body['status_jalan'],
+            $body['panjang_m'],  $body['geojson'],
+            $body['id']
+        );
+        if ($stmt->execute()) {
+            echo json_encode(['success' => true]);
+        } else {
+            http_response_code(500);
+            echo json_encode(['error' => $db->error]);
+        }
+        break;
+
+    case 'DELETE':
+        $stmt = $db->prepare("DELETE FROM jalan WHERE id=?");
+        $stmt->bind_param('i', $id);
+        if ($stmt->execute()) {
+            echo json_encode(['success' => true]);
+        } else {
+            http_response_code(500);
+            echo json_encode(['error' => $db->error]);
+        }
+        break;
+
+    default:
+        http_response_code(405);
+        echo json_encode(['error' => 'Method tidak diizinkan']);
+}
+$db->close();

api/parsil.php

@@ -0,0 +1,80 @@
+<?php
+// api/parsil.php  — CRUD untuk data Parsil Tanah (Polygon)
+require_once 'config.php';
+
+$db     = getDB();
+$method = $_SERVER['REQUEST_METHOD'];
+$id     = isset($_GET['id']) ? (int)$_GET['id'] : 0;
+
+switch ($method) {
+
+    case 'GET':
+        if ($id) {
+            $stmt = $db->prepare("SELECT * FROM parsil WHERE id = ?");
+            $stmt->bind_param('i', $id);
+            $stmt->execute();
+            $row = $stmt->get_result()->fetch_assoc();
+            echo json_encode($row ?: ['error' => 'Data tidak ditemukan']);
+        } else {
+            $res  = $db->query("SELECT * FROM parsil ORDER BY id DESC");
+            $rows = [];
+            while ($r = $res->fetch_assoc()) $rows[] = $r;
+            echo json_encode($rows);
+        }
+        break;
+
+    case 'POST':
+        $body = json_decode(file_get_contents('php://input'), true);
+        $stmt = $db->prepare(
+            "INSERT INTO parsil (nama_pemilik, status_sertifikat, luas_m2, geojson)
+             VALUES (?, ?, ?, ?)"
+        );
+        $stmt->bind_param(
+            'ssds',
+            $body['nama_pemilik'], $body['status_sertifikat'],
+            $body['luas_m2'],      $body['geojson']
+        );
+        if ($stmt->execute()) {
+            echo json_encode(['success' => true, 'id' => $db->insert_id]);
+        } else {
+            http_response_code(500);
+            echo json_encode(['error' => $db->error]);
+        }
+        break;
+
+    case 'PUT':
+        $body = json_decode(file_get_contents('php://input'), true);
+        $stmt = $db->prepare(
+            "UPDATE parsil SET nama_pemilik=?, status_sertifikat=?, luas_m2=?, geojson=?
+             WHERE id=?"
+        );
+        $stmt->bind_param(
+            'ssdsi',
+            $body['nama_pemilik'], $body['status_sertifikat'],
+            $body['luas_m2'],      $body['geojson'],
+            $body['id']
+        );
+        if ($stmt->execute()) {
+            echo json_encode(['success' => true]);
+        } else {
+            http_response_code(500);
+            echo json_encode(['error' => $db->error]);
+        }
+        break;
+
+    case 'DELETE':
+        $stmt = $db->prepare("DELETE FROM parsil WHERE id=?");
+        $stmt->bind_param('i', $id);
+        if ($stmt->execute()) {
+            echo json_encode(['success' => true]);
+        } else {
+            http_response_code(500);
+            echo json_encode(['error' => $db->error]);
+        }
+        break;
+
+    default:
+        http_response_code(405);
+        echo json_encode(['error' => 'Method tidak diizinkan']);
+}
+$db->close();

api/spbu.php

@@ -0,0 +1,86 @@
+<?php
+// api/spbu.php  — CRUD untuk data SPBU (Point)
+require_once 'config.php';
+
+$db     = getDB();
+$method = $_SERVER['REQUEST_METHOD'];
+$id     = isset($_GET['id']) ? (int)$_GET['id'] : 0;
+
+switch ($method) {
+
+    // ── GET all or single ─────────────────────────────────────
+    case 'GET':
+        if ($id) {
+            $stmt = $db->prepare("SELECT * FROM spbu WHERE id = ?");
+            $stmt->bind_param('i', $id);
+            $stmt->execute();
+            $row = $stmt->get_result()->fetch_assoc();
+            echo json_encode($row ?: ['error' => 'Data tidak ditemukan']);
+        } else {
+            $res  = $db->query("SELECT * FROM spbu ORDER BY id DESC");
+            $rows = [];
+            while ($r = $res->fetch_assoc()) $rows[] = $r;
+            echo json_encode($rows);
+        }
+        break;
+
+    // ── POST create ───────────────────────────────────────────
+    case 'POST':
+        $body = json_decode(file_get_contents('php://input'), true);
+        $stmt = $db->prepare(
+            "INSERT INTO spbu (nama_spbu, nomor_wa, buka_24jam, latitude, longitude)
+             VALUES (?, ?, ?, ?, ?)"
+        );
+        $stmt->bind_param(
+            'ssidd',
+            $body['nama_spbu'], $body['nomor_wa'],
+            $body['buka_24jam'],
+            $body['latitude'],  $body['longitude']
+        );
+        if ($stmt->execute()) {
+            echo json_encode(['success' => true, 'id' => $db->insert_id]);
+        } else {
+            http_response_code(500);
+            echo json_encode(['error' => $db->error]);
+        }
+        break;
+
+    // ── PUT update ────────────────────────────────────────────
+    case 'PUT':
+        $body = json_decode(file_get_contents('php://input'), true);
+        $stmt = $db->prepare(
+            "UPDATE spbu SET nama_spbu=?, nomor_wa=?, buka_24jam=?, latitude=?, longitude=?
+             WHERE id=?"
+        );
+        $stmt->bind_param(
+            'ssiddi',
+            $body['nama_spbu'], $body['nomor_wa'],
+            $body['buka_24jam'],
+            $body['latitude'],  $body['longitude'],
+            $body['id']
+        );
+        if ($stmt->execute()) {
+            echo json_encode(['success' => true]);
+        } else {
+            http_response_code(500);
+            echo json_encode(['error' => $db->error]);
+        }
+        break;
+
+    // ── DELETE ────────────────────────────────────────────────
+    case 'DELETE':
+        $stmt = $db->prepare("DELETE FROM spbu WHERE id=?");
+        $stmt->bind_param('i', $id);
+        if ($stmt->execute()) {
+            echo json_encode(['success' => true]);
+        } else {
+            http_response_code(500);
+            echo json_encode(['error' => $db->error]);
+        }
+        break;
+
+    default:
+        http_response_code(405);
+        echo json_encode(['error' => 'Method tidak diizinkan']);
+}
+$db->close();

index.html

@@ -0,0 +1,911 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>WebGIS — SPBU · Jalan · Parsil Tanah</title>
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
+<style>
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+:root {
+  --bg:#0f1923; --surface:#1a2535; --surface2:#243044; --border:#2e3f57;
+  --accent:#3b9eff; --accent2:#56d4a0; --danger:#ff5c5c; --warn:#ffb84d;
+  --text:#e2eaf5; --muted:#7a90aa; --radius:8px; --shadow:0 4px 20px rgba(0,0,0,.45);
+  --font:'Segoe UI',system-ui,sans-serif;
+}
+html,body{height:100%;font-family:var(--font);background:var(--bg);color:var(--text);}
+#app{display:flex;flex-direction:column;height:100vh;}
+
+header{
+  background:var(--surface);border-bottom:1px solid var(--border);
+  padding:10px 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
+  z-index:1000;position:relative;
+}
+header h1{font-size:.95rem;font-weight:700;color:var(--accent);white-space:nowrap;}
+header h1 span{color:var(--text);}
+
+.tabs{display:flex;gap:5px;}
+.tab-btn{
+  padding:6px 14px;border-radius:20px;border:1px solid var(--border);
+  background:transparent;color:var(--muted);cursor:pointer;font-size:.8rem;transition:all .2s;
+}
+.tab-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;}
+.tab-btn:hover:not(.active){border-color:var(--accent);color:var(--accent);}
+
+#mode-badge{
+  margin-left:auto;padding:5px 12px;border-radius:20px;
+  background:var(--surface2);border:1px solid var(--border);font-size:.75rem;color:var(--muted);
+}
+#mode-badge.active{border-color:var(--accent2);color:var(--accent2);}
+
+#map{flex:1;}
+
+/* Sidebar */
+#sidebar{
+  position:absolute;right:12px;top:70px;width:290px;
+  max-height:calc(100vh - 90px);background:var(--surface);
+  border:1px solid var(--border);border-radius:var(--radius);
+  box-shadow:var(--shadow);overflow-y:auto;z-index:900;
+  display:none;flex-direction:column;
+}
+#sidebar.open{display:flex;}
+.sidebar-header{
+  padding:12px 14px;border-bottom:1px solid var(--border);
+  display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;
+  background:var(--surface);z-index:1;
+}
+.sidebar-header h3{font-size:.85rem;font-weight:600;}
+.sidebar-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1rem;}
+.record-list{padding:8px;}
+.record-item{
+  padding:9px 10px;border-radius:6px;border:1px solid var(--border);
+  margin-bottom:6px;transition:background .15s;
+  display:flex;justify-content:space-between;align-items:flex-start;gap:6px;
+}
+.record-item:hover{background:var(--surface2);}
+.record-item .info{flex:1;cursor:pointer;}
+.record-item .name{font-size:.82rem;font-weight:600;}
+.record-item .sub{font-size:.72rem;color:var(--muted);margin-top:2px;}
+.record-actions{display:flex;gap:4px;flex-shrink:0;align-items:flex-start;}
+.btn-icon{
+  background:var(--surface2);border:1px solid var(--border);
+  color:var(--muted);cursor:pointer;border-radius:5px;
+  padding:4px 7px;font-size:.72rem;transition:all .15s;
+}
+.btn-icon:hover{border-color:var(--accent);color:var(--accent);}
+.btn-icon.danger:hover{border-color:var(--danger);color:var(--danger);}
+
+.badge{font-size:.65rem;padding:2px 7px;border-radius:10px;font-weight:700;white-space:nowrap;}
+.badge-green {background:#1a4a30;color:var(--accent2);}
+.badge-red   {background:#4a1a1a;color:var(--danger);}
+.badge-blue  {background:#1a2e4a;color:var(--accent);}
+.badge-yellow{background:#4a3a10;color:var(--warn);}
+.badge-nat   {background:#1a3a4a;color:#7fd4ff;}
+.badge-prov  {background:#2e1a4a;color:#c07fff;}
+.badge-kab   {background:#1a4a2a;color:#7fffc0;}
+
+/* Modal */
+.modal-overlay{
+  position:fixed;inset:0;background:rgba(0,0,0,.6);
+  z-index:9000;display:none;align-items:center;justify-content:center;
+}
+.modal-overlay.open{display:flex;}
+.modal{
+  background:var(--surface);border:1px solid var(--border);
+  border-radius:var(--radius);box-shadow:var(--shadow);width:360px;max-width:95vw;
+}
+.modal-header{
+  padding:14px 16px;border-bottom:1px solid var(--border);
+  display:flex;justify-content:space-between;align-items:center;
+}
+.modal-header h3{font-size:.9rem;font-weight:700;}
+.modal-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1.1rem;}
+.modal-body{padding:16px;}
+.field{margin-bottom:13px;}
+.field label{
+  display:block;font-size:.72rem;color:var(--muted);margin-bottom:4px;
+  font-weight:600;text-transform:uppercase;letter-spacing:.05em;
+}
+.field input,.field select{
+  width:100%;padding:8px 10px;border-radius:6px;border:1px solid var(--border);
+  background:var(--surface2);color:var(--text);font-size:.85rem;outline:none;
+}
+.field input:focus,.field select:focus{border-color:var(--accent);}
+.radio-group{display:flex;gap:12px;}
+.radio-group label{
+  color:var(--text);font-size:.83rem;display:flex;align-items:center;gap:5px;
+  text-transform:none;letter-spacing:0;font-weight:400;
+}
+.field-info{
+  font-size:.75rem;color:var(--accent2);background:var(--surface2);
+  padding:7px 10px;border-radius:5px;border:1px solid var(--border);
+}
+/* redraw hint box */
+.redraw-hint{
+  font-size:.72rem;color:var(--warn);background:#2a2010;
+  padding:7px 10px;border-radius:5px;border:1px solid #4a3a10;
+  margin-top:6px;display:none;
+}
+.modal-footer{
+  padding:12px 16px;border-top:1px solid var(--border);
+  display:flex;gap:8px;justify-content:flex-end;
+}
+.btn{padding:7px 16px;border-radius:6px;border:none;cursor:pointer;font-size:.82rem;font-weight:600;transition:opacity .15s;}
+.btn:hover{opacity:.85;}
+.btn-primary{background:var(--accent);color:#fff;}
+.btn-danger {background:var(--danger);color:#fff;}
+.btn-muted  {background:var(--surface2);color:var(--muted);border:1px solid var(--border);}
+
+/* Toast */
+#toast{
+  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(60px);
+  background:var(--surface);border:1px solid var(--border);color:var(--text);
+  padding:10px 22px;border-radius:20px;font-size:.82rem;box-shadow:var(--shadow);
+  z-index:9999;transition:transform .3s;pointer-events:none;
+}
+#toast.show{transform:translateX(-50%) translateY(0);}
+#toast.success{border-color:var(--accent2);color:var(--accent2);}
+#toast.error  {border-color:var(--danger);color:var(--danger);}
+
+.leaflet-draw-toolbar a{background-color:var(--surface)!important;color:var(--text)!important;}
+</style>
+</head>
+<body>
+<div id="app">
+
+<header>
+  <h1>🗺 <span>WebGIS</span> Spasial</h1>
+  <div class="tabs">
+    <button class="tab-btn active" data-layer="spbu">📍 SPBU</button>
+    <button class="tab-btn"       data-layer="jalan">🛣 Jalan</button>
+    <button class="tab-btn"       data-layer="parsil">🏡 Parsil</button>
+  </div>
+  <div id="mode-badge">Mode: Lihat</div>
+  <button class="btn btn-muted" id="btn-sidebar">☰ Daftar Data</button>
+</header>
+
+<div id="map"></div>
+
+<!-- Sidebar -->
+<div id="sidebar">
+  <div class="sidebar-header">
+    <h3 id="sidebar-title">Data</h3>
+    <button class="sidebar-close" id="sidebar-close-btn">✕</button>
+  </div>
+  <div class="record-list" id="record-list"></div>
+</div>
+
+<!-- Modal SPBU -->
+<div class="modal-overlay" id="modal-spbu">
+  <div class="modal">
+    <div class="modal-header">
+      <h3 id="spbu-modal-title">Tambah SPBU</h3>
+      <button class="modal-close" data-close="modal-spbu">✕</button>
+    </div>
+    <div class="modal-body">
+      <input type="hidden" id="spbu-id" />
+      <div class="field">
+        <label>Nama SPBU</label>
+        <input type="text" id="spbu-nama" placeholder="cth. SPBU 64.762.01" />
+      </div>
+      <div class="field">
+        <label>Nomor WhatsApp</label>
+        <input type="text" id="spbu-wa" placeholder="cth. 08123456789" />
+      </div>
+      <div class="field">
+        <label>Buka 24 Jam?</label>
+        <div class="radio-group">
+          <label><input type="radio" name="buka24" value="1" /> Ya</label>
+          <label><input type="radio" name="buka24" value="0" checked /> Tidak</label>
+        </div>
+      </div>
+      <div class="field">
+        <div class="field-info" id="spbu-coords-info">—</div>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-danger" id="btn-spbu-delete" style="display:none;margin-right:auto">🗑 Hapus</button>
+      <button class="btn btn-muted"  data-close="modal-spbu">Batal</button>
+      <button class="btn btn-primary" id="btn-spbu-save">💾 Simpan</button>
+    </div>
+  </div>
+</div>
+
+<!-- Modal Jalan -->
+<div class="modal-overlay" id="modal-jalan">
+  <div class="modal">
+    <div class="modal-header">
+      <h3 id="jalan-modal-title">Tambah Data Jalan</h3>
+      <button class="modal-close" data-close="modal-jalan">✕</button>
+    </div>
+    <div class="modal-body">
+      <input type="hidden" id="jalan-id" />
+      <div class="field">
+        <label>Nama Jalan</label>
+        <input type="text" id="jalan-nama" placeholder="cth. Jl. Ahmad Yani" />
+      </div>
+      <div class="field">
+        <label>Status Jalan</label>
+        <select id="jalan-status">
+          <option value="nasional">Jalan Nasional</option>
+          <option value="provinsi">Jalan Provinsi</option>
+          <option value="kabupaten">Jalan Kabupaten</option>
+        </select>
+      </div>
+      <div class="field">
+        <label>Panjang Jalan (otomatis)</label>
+        <div class="field-info" id="jalan-panjang-info">—</div>
+        <div class="redraw-hint" id="jalan-redraw-hint">
+          ✏️ Tutup form ini, gambar ulang garis di peta, lalu simpan untuk mengubah geometri.
+        </div>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-danger" id="btn-jalan-delete" style="display:none;margin-right:auto">🗑 Hapus</button>
+      <button class="btn btn-muted"  data-close="modal-jalan">Batal</button>
+      <button class="btn btn-primary" id="btn-jalan-save">💾 Simpan</button>
+    </div>
+  </div>
+</div>
+
+<!-- Modal Parsil -->
+<div class="modal-overlay" id="modal-parsil">
+  <div class="modal">
+    <div class="modal-header">
+      <h3 id="parsil-modal-title">Tambah Parsil Tanah</h3>
+      <button class="modal-close" data-close="modal-parsil">✕</button>
+    </div>
+    <div class="modal-body">
+      <input type="hidden" id="parsil-id" />
+      <div class="field">
+        <label>Nama Pemilik</label>
+        <input type="text" id="parsil-nama" placeholder="cth. Budi Santoso" />
+      </div>
+      <div class="field">
+        <label>Status Sertifikat</label>
+        <select id="parsil-status">
+          <option value="SHM">SHM — Sertifikat Hak Milik</option>
+          <option value="HGB">HGB — Hak Guna Bangunan</option>
+          <option value="HGU">HGU — Hak Guna Usaha</option>
+          <option value="HP">HP — Hak Pakai</option>
+        </select>
+      </div>
+      <div class="field">
+        <label>Luas Tanah (otomatis)</label>
+        <div class="field-info" id="parsil-luas-info">—</div>
+        <div class="redraw-hint" id="parsil-redraw-hint">
+          ✏️ Tutup form ini, gambar ulang polygon di peta, lalu simpan untuk mengubah geometri.
+        </div>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-danger" id="btn-parsil-delete" style="display:none;margin-right:auto">🗑 Hapus</button>
+      <button class="btn btn-muted"  data-close="modal-parsil">Batal</button>
+      <button class="btn btn-primary" id="btn-parsil-save">💾 Simpan</button>
+    </div>
+  </div>
+</div>
+
+<div id="toast"></div>
+</div>
+
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
+<script>
+// ═══════════════════════════════════════════════════════
+const API = { spbu:'api/spbu.php', jalan:'api/jalan.php', parsil:'api/parsil.php' };
+
+// ── Map ─────────────────────────────────────────────────
+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 layers = { spbu:L.layerGroup().addTo(map), jalan:L.layerGroup().addTo(map), parsil:L.layerGroup().addTo(map) };
+
+// ── State ────────────────────────────────────────────────
+let activeLayer   = 'spbu';
+let pendingLatLng = null;
+let pendingGeojson= null;   // geometri dari draw / dari data existing saat edit
+let pendingLength = 0;
+let pendingArea   = 0;
+let editingMarker = null;
+let isEditMode    = false;  // true = edit atribut saja, false = tambah baru / redraw
+
+// ── Helpers ──────────────────────────────────────────────
+const JALAN_COLOR  = { nasional:'#7fd4ff', provinsi:'#c07fff', kabupaten:'#7fffc0' };
+const PARSIL_COLOR = { SHM:'#ffb84d', HGB:'#3b9eff', HGU:'#56d4a0', HP:'#ff9fdf' };
+
+function spbuIcon(buka24){
+  const is24 = Number(buka24) === 1;
+  const c = is24 ? '#56d4a0' : '#ff5c5c';
+  return L.divIcon({
+    className:'',
+    html:`<svg width="22" height="30" viewBox="0 0 22 30" xmlns="http://www.w3.org/2000/svg">
+           <path d="M11 0C5 0 0 5 0 11c0 8 11 19 11 19s11-11 11-19C22 5 17 0 11 0z"
+                 fill="${c}" stroke="#fff" stroke-width="1.5"/>
+           <circle cx="11" cy="11" r="5" fill="#fff" fill-opacity=".85"/>
+         </svg>`,
+    iconSize:[22,30], iconAnchor:[11,30], popupAnchor:[0,-32]
+  });
+}
+
+function toast(msg, type='success'){
+  const el=document.getElementById('toast');
+  el.textContent=msg; el.className=`show ${type}`;
+  setTimeout(()=>el.className='',3000);
+}
+
+function openModal(id) { document.getElementById(id).classList.add('open'); }
+function closeModal(id){ document.getElementById(id).classList.remove('open'); }
+
+document.querySelectorAll('[data-close]').forEach(b=>
+  b.addEventListener('click',()=>closeModal(b.dataset.close))
+);
+document.querySelectorAll('.modal-overlay').forEach(m=>
+  m.addEventListener('click',e=>{ if(e.target===m) closeModal(m.id); })
+);
+
+const modeBadge = document.getElementById('mode-badge');
+function setMode(label, active=false){
+  modeBadge.textContent=`Mode: ${label}`;
+  modeBadge.classList.toggle('active',active);
+}
+
+// ── Leaflet.Draw ─────────────────────────────────────────
+const drawnItems = new L.FeatureGroup();
+map.addLayer(drawnItems);
+
+const drawControl = new L.Control.Draw({
+  edit:{ featureGroup:drawnItems, edit:false, remove:false },
+  draw:{
+    marker:false, circle:false, rectangle:false, circlemarker:false,
+    polyline:{ shapeOptions:{ color:'#3b9eff', weight:4 } },
+    polygon :{ shapeOptions:{ color:'#ffb84d', weight:2, fillOpacity:.35 } },
+  }
+});
+
+function updateDrawControl(){
+  try{ map.removeControl(drawControl); }catch(e){}
+  if(activeLayer==='jalan'){
+    drawControl.options.draw.polyline = { shapeOptions:{ color:'#3b9eff', weight:4 } };
+    drawControl.options.draw.polygon  = false;
+    map.addControl(drawControl);
+  } else if(activeLayer==='parsil'){
+    drawControl.options.draw.polyline = false;
+    drawControl.options.draw.polygon  = { shapeOptions:{ color:'#ffb84d', weight:2, fillOpacity:.35 } };
+    map.addControl(drawControl);
+  }
+}
+
+map.on(L.Draw.Event.DRAWSTART, ()=>setMode('Menggambar…',true));
+map.on(L.Draw.Event.DRAWSTOP,  ()=>setMode('Lihat'));
+
+map.on(L.Draw.Event.CREATED, function(e){
+  drawnItems.clearLayers();
+  drawnItems.addLayer(e.layer);
+
+  if(e.layerType==='polyline'){
+    const ll  = e.layer.getLatLngs();
+    const m   = calcPolylineLength(ll);
+    pendingGeojson = JSON.stringify(e.layer.toGeoJSON());
+    pendingLength  = m;
+    isEditMode = false;
+
+    document.getElementById('jalan-id').value = '';
+    document.getElementById('jalan-nama').value = '';
+    document.getElementById('jalan-panjang-info').textContent =
+      `${m.toFixed(1)} m  (${(m/1000).toFixed(3)} km)`;
+    document.getElementById('jalan-redraw-hint').style.display='none';
+    document.getElementById('jalan-modal-title').textContent='Tambah Data Jalan';
+    document.getElementById('btn-jalan-delete').style.display='none';
+    openModal('modal-jalan');
+  }
+
+  if(e.layerType==='polygon'){
+    const ll  = e.layer.getLatLngs()[0];
+    const a   = calcPolygonArea(ll);
+    pendingGeojson = JSON.stringify(e.layer.toGeoJSON());
+    pendingArea    = a;
+    isEditMode = false;
+
+    document.getElementById('parsil-id').value = '';
+    document.getElementById('parsil-nama').value = '';
+    document.getElementById('parsil-luas-info').textContent =
+      `${a.toFixed(2)} m²  (${(a/10000).toFixed(4)} ha)`;
+    document.getElementById('parsil-redraw-hint').style.display='none';
+    document.getElementById('parsil-modal-title').textContent='Tambah Parsil Tanah';
+    document.getElementById('btn-parsil-delete').style.display='none';
+    openModal('modal-parsil');
+  }
+});
+
+// ── Geometry calc ────────────────────────────────────────
+function calcPolylineLength(latlngs){
+  const flat = latlngs.flat ? latlngs.flat(Infinity) : latlngs;
+  let t=0;
+  for(let i=0;i<flat.length-1;i++) t+=flat[i].distanceTo(flat[i+1]);
+  return t;
+}
+function calcPolygonArea(latlngs){
+  const R=6371000;
+  const pts=latlngs.map(ll=>({lat:ll.lat*Math.PI/180,lng:ll.lng*Math.PI/180}));
+  let a=0,n=pts.length;
+  for(let i=0;i<n;i++){const j=(i+1)%n;a+=pts[i].lng*pts[j].lat-pts[j].lng*pts[i].lat;}
+  return Math.abs(a/2)*R*R;
+}
+
+// ── Tabs ─────────────────────────────────────────────────
+document.querySelectorAll('.tab-btn').forEach(btn=>{
+  btn.addEventListener('click',()=>{
+    document.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('active'));
+    btn.classList.add('active');
+    activeLayer=btn.dataset.layer;
+    updateDrawControl();
+    setMode('Lihat');
+    if(document.getElementById('sidebar').classList.contains('open')) renderSidebar();
+  });
+});
+
+// ── Map click → new SPBU ─────────────────────────────────
+map.on('click',function(e){
+  if(activeLayer!=='spbu') return;
+  pendingLatLng=e.latlng;
+  document.getElementById('spbu-id').value='';
+  document.getElementById('spbu-nama').value='';
+  document.getElementById('spbu-wa').value='';
+  document.querySelectorAll('input[name="buka24"]').forEach(r=>r.checked=r.value==='0');
+  document.getElementById('spbu-coords-info').textContent=
+    `Lat: ${e.latlng.lat.toFixed(6)}, Lng: ${e.latlng.lng.toFixed(6)}`;
+  document.getElementById('spbu-modal-title').textContent='Tambah SPBU Baru';
+  document.getElementById('btn-spbu-delete').style.display='none';
+  openModal('modal-spbu');
+});
+
+// ═══════════════════════════════════════════════════════
+//  SPBU CRUD
+// ═══════════════════════════════════════════════════════
+async function loadSPBU(){
+  layers.spbu.clearLayers();
+  const data=await apiFetch(API.spbu,'GET');
+  data.forEach(row=>addSpbuMarker(row));
+}
+
+function addSpbuMarker(row){
+  const marker=L.marker([row.latitude,row.longitude],{
+    icon:spbuIcon(row.buka_24jam), draggable:true
+  }).addTo(layers.spbu);
+  marker._spbuData=row;
+  marker.bindTooltip(row.nama_spbu,{permanent:false,direction:'top'});
+  marker.on('click',()=>openEditSpbu(marker));
+  marker.on('dragend',()=>{
+    const ll=marker.getLatLng();
+    marker._spbuData.latitude =ll.lat;
+    marker._spbuData.longitude=ll.lng;
+    apiFetch(API.spbu+'?id='+row.id,'PUT',marker._spbuData)
+      .then(()=>toast('Posisi SPBU diperbarui'));
+  });
+  return marker;
+}
+
+function openEditSpbu(marker){
+  const d=marker._spbuData;
+  editingMarker=marker;
+  document.getElementById('spbu-id').value   =d.id;
+  document.getElementById('spbu-nama').value =d.nama_spbu;
+  document.getElementById('spbu-wa').value   =d.nomor_wa;
+  document.querySelectorAll('input[name="buka24"]').forEach(r=>r.checked=r.value==d.buka_24jam);
+  document.getElementById('spbu-coords-info').textContent=
+    `Lat: ${(+d.latitude).toFixed(6)}, Lng: ${(+d.longitude).toFixed(6)}`;
+  document.getElementById('spbu-modal-title').textContent='✏️ Edit SPBU';
+  document.getElementById('btn-spbu-delete').style.display='inline-block';
+  openModal('modal-spbu');
+}
+
+document.getElementById('btn-spbu-save').addEventListener('click',async()=>{
+  const id   =document.getElementById('spbu-id').value;
+  const nama =document.getElementById('spbu-nama').value.trim();
+  const wa   =document.getElementById('spbu-wa').value.trim();
+  const b24  =+document.querySelector('input[name="buka24"]:checked').value;
+  if(!nama||!wa){ toast('Nama dan nomor WA wajib diisi','error'); return; }
+
+  let lat,lng;
+  if(id){ lat=editingMarker._spbuData.latitude; lng=editingMarker._spbuData.longitude; }
+  else  { lat=pendingLatLng.lat; lng=pendingLatLng.lng; }
+
+  const body={id:+id||undefined,nama_spbu:nama,nomor_wa:wa,buka_24jam:b24,latitude:lat,longitude:lng};
+
+  if(id){
+    await apiFetch(API.spbu+'?id='+id,'PUT',body);
+    editingMarker._spbuData={...editingMarker._spbuData,...body};
+    editingMarker.setIcon(spbuIcon(b24));
+    editingMarker.bindTooltip(nama,{permanent:false,direction:'top'});
+    toast('Data SPBU diperbarui ✓');
+  } else {
+    const res=await apiFetch(API.spbu,'POST',body);
+    body.id=res.id;
+    addSpbuMarker(body);
+    toast('SPBU berhasil ditambahkan ✓');
+  }
+  closeModal('modal-spbu');
+  if(document.getElementById('sidebar').classList.contains('open')) renderSidebar();
+});
+
+document.getElementById('btn-spbu-delete').addEventListener('click',async()=>{
+  const id=document.getElementById('spbu-id').value;
+  if(!id) return;
+  if(!confirm('Hapus data SPBU ini?')) return;
+  await apiFetch(API.spbu+'?id='+id,'DELETE');
+  layers.spbu.eachLayer(m=>{ if(m._spbuData?.id==id) layers.spbu.removeLayer(m); });
+  closeModal('modal-spbu');
+  toast('SPBU dihapus','error');
+  if(document.getElementById('sidebar').classList.contains('open')) renderSidebar();
+});
+
+// ═══════════════════════════════════════════════════════
+//  JALAN CRUD
+// ═══════════════════════════════════════════════════════
+async function loadJalan(){
+  layers.jalan.clearLayers();
+  const data=await apiFetch(API.jalan,'GET');
+  data.forEach(row=>addJalanLayer(row));
+}
+
+function addJalanLayer(row){
+  const gj =JSON.parse(row.geojson);
+  const col=JALAN_COLOR[row.status_jalan]||'#fff';
+  const line=L.geoJSON(gj,{style:{color:col,weight:4,opacity:.85}}).addTo(layers.jalan);
+  line._jalanData=row;
+  line.bindTooltip(
+    `<b>${row.nama_jalan}</b><br>${row.status_jalan} · ${(+row.panjang_m).toFixed(1)} m`,
+    {sticky:true}
+  );
+  line.on('click',()=>openEditJalan(line));
+  return line;
+}
+
+function openEditJalan(line){
+  const d=line._jalanData;
+  // Saat edit: pakai geojson yang sudah ada, tidak perlu redraw
+  pendingGeojson=d.geojson;
+  pendingLength =+d.panjang_m;
+  isEditMode=true;
+
+  document.getElementById('jalan-id').value    =d.id;
+  document.getElementById('jalan-nama').value  =d.nama_jalan;
+  document.getElementById('jalan-status').value=d.status_jalan;
+  document.getElementById('jalan-panjang-info').textContent=
+    `${(+d.panjang_m).toFixed(1)} m  (${(+d.panjang_m/1000).toFixed(3)} km)`;
+  document.getElementById('jalan-redraw-hint').style.display='block';
+  document.getElementById('jalan-modal-title').textContent='✏️ Edit Data Jalan';
+  document.getElementById('btn-jalan-delete').style.display='inline-block';
+  openEditJalan._layer=line;
+  openModal('modal-jalan');
+}
+
+document.getElementById('btn-jalan-save').addEventListener('click',async()=>{
+  const id    =document.getElementById('jalan-id').value;
+  const nama  =document.getElementById('jalan-nama').value.trim();
+  const status=document.getElementById('jalan-status').value;
+  if(!nama){ toast('Nama jalan wajib diisi','error'); return; }
+  // Saat mode tambah baru (bukan edit), wajib ada geojson dari draw
+  if(!id && !pendingGeojson){ toast('Gambar ruas jalan terlebih dahulu','error'); return; }
+
+  const body={
+    id:+id||undefined, nama_jalan:nama, status_jalan:status,
+    panjang_m:pendingLength, geojson:pendingGeojson
+  };
+
+  if(id){
+    await apiFetch(API.jalan+'?id='+id,'PUT',body);
+    const old=openEditJalan._layer;
+    if(old) layers.jalan.removeLayer(old);
+    // Merge geojson lama jika tidak digambar ulang
+    body.geojson=pendingGeojson;
+    addJalanLayer(body);
+    toast('Data jalan diperbarui ✓');
+  } else {
+    const res=await apiFetch(API.jalan,'POST',body);
+    body.id=res.id;
+    addJalanLayer(body);
+    toast('Jalan berhasil ditambahkan ✓');
+  }
+  drawnItems.clearLayers();
+  pendingGeojson=null;
+  closeModal('modal-jalan');
+  if(document.getElementById('sidebar').classList.contains('open')) renderSidebar();
+});
+
+document.getElementById('btn-jalan-delete').addEventListener('click',async()=>{
+  const id=document.getElementById('jalan-id').value;
+  if(!id) return;
+  if(!confirm('Hapus data jalan ini?')) return;
+  await apiFetch(API.jalan+'?id='+id,'DELETE');
+  const old=openEditJalan._layer;
+  if(old) layers.jalan.removeLayer(old);
+  closeModal('modal-jalan');
+  toast('Jalan dihapus','error');
+  if(document.getElementById('sidebar').classList.contains('open')) renderSidebar();
+});
+
+// ═══════════════════════════════════════════════════════
+//  PARSIL CRUD
+// ═══════════════════════════════════════════════════════
+async function loadParsil(){
+  layers.parsil.clearLayers();
+  const data=await apiFetch(API.parsil,'GET');
+  data.forEach(row=>addParsilLayer(row));
+}
+
+function addParsilLayer(row){
+  const gj =JSON.parse(row.geojson);
+  const col=PARSIL_COLOR[row.status_sertifikat]||'#fff';
+  const poly=L.geoJSON(gj,{style:{color:col,weight:2,fillColor:col,fillOpacity:.35}}).addTo(layers.parsil);
+  poly._parsilData=row;
+  poly.bindTooltip(
+    `<b>${row.nama_pemilik}</b><br>${row.status_sertifikat} · ${(+row.luas_m2).toFixed(2)} m²`,
+    {sticky:true}
+  );
+  poly.on('click',()=>openEditParsil(poly));
+  return poly;
+}
+
+function openEditParsil(poly){
+  const d=poly._parsilData;
+  pendingGeojson=d.geojson;
+  pendingArea   =+d.luas_m2;
+  isEditMode=true;
+
+  document.getElementById('parsil-id').value    =d.id;
+  document.getElementById('parsil-nama').value  =d.nama_pemilik;
+  document.getElementById('parsil-status').value=d.status_sertifikat;
+  document.getElementById('parsil-luas-info').textContent=
+    `${(+d.luas_m2).toFixed(2)} m²  (${(+d.luas_m2/10000).toFixed(4)} ha)`;
+  document.getElementById('parsil-redraw-hint').style.display='block';
+  document.getElementById('parsil-modal-title').textContent='✏️ Edit Parsil Tanah';
+  document.getElementById('btn-parsil-delete').style.display='inline-block';
+  openEditParsil._layer=poly;
+  openModal('modal-parsil');
+}
+
+document.getElementById('btn-parsil-save').addEventListener('click',async()=>{
+  const id    =document.getElementById('parsil-id').value;
+  const nama  =document.getElementById('parsil-nama').value.trim();
+  const status=document.getElementById('parsil-status').value;
+  if(!nama){ toast('Nama pemilik wajib diisi','error'); return; }
+  if(!id && !pendingGeojson){ toast('Gambar polygon terlebih dahulu','error'); return; }
+
+  const body={
+    id:+id||undefined, nama_pemilik:nama, status_sertifikat:status,
+    luas_m2:pendingArea, geojson:pendingGeojson
+  };
+
+  if(id){
+    await apiFetch(API.parsil+'?id='+id,'PUT',body);
+    const old=openEditParsil._layer;
+    if(old) layers.parsil.removeLayer(old);
+    addParsilLayer(body);
+    toast('Parsil diperbarui ✓');
+  } else {
+    const res=await apiFetch(API.parsil,'POST',body);
+    body.id=res.id;
+    addParsilLayer(body);
+    toast('Parsil berhasil ditambahkan ✓');
+  }
+  drawnItems.clearLayers();
+  pendingGeojson=null;
+  closeModal('modal-parsil');
+  if(document.getElementById('sidebar').classList.contains('open')) renderSidebar();
+});
+
+document.getElementById('btn-parsil-delete').addEventListener('click',async()=>{
+  const id=document.getElementById('parsil-id').value;
+  if(!id) return;
+  if(!confirm('Hapus data parsil ini?')) return;
+  await apiFetch(API.parsil+'?id='+id,'DELETE');
+  const old=openEditParsil._layer;
+  if(old) layers.parsil.removeLayer(old);
+  closeModal('modal-parsil');
+  toast('Parsil dihapus','error');
+  if(document.getElementById('sidebar').classList.contains('open')) renderSidebar();
+});
+
+// ═══════════════════════════════════════════════════════
+//  SIDEBAR
+// ═══════════════════════════════════════════════════════
+document.getElementById('btn-sidebar').addEventListener('click',()=>{
+  document.getElementById('sidebar').classList.toggle('open');
+  renderSidebar();
+});
+document.getElementById('sidebar-close-btn').addEventListener('click',()=>
+  document.getElementById('sidebar').classList.remove('open')
+);
+
+async function renderSidebar(){
+  const list =document.getElementById('record-list');
+  const title=document.getElementById('sidebar-title');
+  list.innerHTML='<p style="padding:10px;color:var(--muted);font-size:.8rem">Memuat…</p>';
+
+  if(activeLayer==='spbu'){
+    title.textContent='Daftar SPBU';
+    const data=await apiFetch(API.spbu,'GET');
+    list.innerHTML='';
+    data.forEach(row=>{
+      const div=document.createElement('div');
+      div.className='record-item';
+      div.innerHTML=`
+        <div class="info">
+          <div class="name">${row.nama_spbu}</div>
+          <div class="sub">📞 ${row.nomor_wa}</div>
+          <div class="sub">📍 ${(+row.latitude).toFixed(5)}, ${(+row.longitude).toFixed(5)}</div>
+        </div>
+        <div style="display:flex;flex-direction:column;align-items:flex-end;gap:5px">
+          <span class="badge ${Number(row.buka_24jam) === 1 ? 'badge-green' : 'badge-red'}">
+            ${Number(row.buka_24jam) === 1 ? '24 Jam' : 'Terbatas'}
+          </span>
+          <div class="record-actions">
+            <button class="btn-icon" data-act="zoom-spbu" data-id="${row.id}"
+              data-lat="${row.latitude}" data-lng="${row.longitude}">🔍</button>
+            <button class="btn-icon" data-act="edit-spbu" data-id="${row.id}">✏️</button>
+          </div>
+        </div>`;
+      list.appendChild(div);
+    });
+    if(!data.length) list.innerHTML='<p style="padding:10px;color:var(--muted);font-size:.8rem">Belum ada data SPBU.</p>';
+
+  } else if(activeLayer==='jalan'){
+    title.textContent='Daftar Jalan';
+    const data=await apiFetch(API.jalan,'GET');
+    list.innerHTML='';
+    const bc={nasional:'badge-nat',provinsi:'badge-prov',kabupaten:'badge-kab'};
+    data.forEach(row=>{
+      const div=document.createElement('div');
+      div.className='record-item';
+      div.innerHTML=`
+        <div class="info">
+          <div class="name">${row.nama_jalan}</div>
+          <div class="sub">📏 ${(+row.panjang_m).toFixed(1)} m</div>
+        </div>
+        <div style="display:flex;flex-direction:column;align-items:flex-end;gap:5px">
+          <span class="badge ${bc[row.status_jalan]||''}">${row.status_jalan}</span>
+          <div class="record-actions">
+            <button class="btn-icon" data-act="zoom-jalan" data-id="${row.id}">🔍</button>
+            <button class="btn-icon" data-act="edit-jalan" data-id="${row.id}">✏️</button>
+            <button class="btn-icon danger" data-act="del-jalan" data-id="${row.id}">🗑</button>
+          </div>
+        </div>`;
+      list.appendChild(div);
+    });
+    if(!data.length) list.innerHTML='<p style="padding:10px;color:var(--muted);font-size:.8rem">Belum ada data jalan.</p>';
+
+  } else if(activeLayer==='parsil'){
+    title.textContent='Daftar Parsil Tanah';
+    const data=await apiFetch(API.parsil,'GET');
+    list.innerHTML='';
+    const bc={SHM:'badge-yellow',HGB:'badge-blue',HGU:'badge-green',HP:'badge-red'};
+    data.forEach(row=>{
+      const div=document.createElement('div');
+      div.className='record-item';
+      div.innerHTML=`
+        <div class="info">
+          <div class="name">${row.nama_pemilik}</div>
+          <div class="sub">📐 ${(+row.luas_m2).toFixed(2)} m²</div>
+        </div>
+        <div style="display:flex;flex-direction:column;align-items:flex-end;gap:5px">
+          <span class="badge ${bc[row.status_sertifikat]||''}">${row.status_sertifikat}</span>
+          <div class="record-actions">
+            <button class="btn-icon" data-act="zoom-parsil" data-id="${row.id}">🔍</button>
+            <button class="btn-icon" data-act="edit-parsil" data-id="${row.id}">✏️</button>
+            <button class="btn-icon danger" data-act="del-parsil" data-id="${row.id}">🗑</button>
+          </div>
+        </div>`;
+      list.appendChild(div);
+    });
+    if(!data.length) list.innerHTML='<p style="padding:10px;color:var(--muted);font-size:.8rem">Belum ada data parsil.</p>';
+  }
+
+  // Sidebar action delegate
+  list.onclick=function(e){
+    const btn=e.target.closest('[data-act]');
+    if(!btn) return;
+    const act=btn.dataset.act, id=btn.dataset.id;
+
+    if(act==='zoom-spbu'){
+      map.setView([+btn.dataset.lat,+btn.dataset.lng],17);
+    }
+    if(act==='edit-spbu'){
+      layers.spbu.eachLayer(m=>{ if(m._spbuData?.id==id) openEditSpbu(m); });
+    }
+    if(act==='zoom-jalan'){
+      layers.jalan.eachLayer(l=>{ if(l._jalanData?.id==id) map.fitBounds(l.getBounds(),{padding:[30,30]}); });
+    }
+    if(act==='edit-jalan'){
+      layers.jalan.eachLayer(l=>{ if(l._jalanData?.id==id) openEditJalan(l); });
+    }
+    if(act==='del-jalan'){
+      if(!confirm('Hapus jalan ini?')) return;
+      apiFetch(API.jalan+'?id='+id,'DELETE').then(()=>{
+        layers.jalan.eachLayer(l=>{ if(l._jalanData?.id==id) layers.jalan.removeLayer(l); });
+        toast('Jalan dihapus','error'); renderSidebar();
+      });
+    }
+    if(act==='zoom-parsil'){
+      layers.parsil.eachLayer(l=>{ if(l._parsilData?.id==id) map.fitBounds(l.getBounds(),{padding:[30,30]}); });
+    }
+    if(act==='edit-parsil'){
+      layers.parsil.eachLayer(l=>{ if(l._parsilData?.id==id) openEditParsil(l); });
+    }
+    if(act==='del-parsil'){
+      if(!confirm('Hapus parsil ini?')) return;
+      apiFetch(API.parsil+'?id='+id,'DELETE').then(()=>{
+        layers.parsil.eachLayer(l=>{ if(l._parsilData?.id==id) layers.parsil.removeLayer(l); });
+        toast('Parsil dihapus','error'); renderSidebar();
+      });
+    }
+  };
+}
+
+// ═══════════════════════════════════════════════════════
+//  API helper
+// ═══════════════════════════════════════════════════════
+async function apiFetch(url,method='GET',body=null){
+  const opts={method,headers:{'Content-Type':'application/json'}};
+  if(body) opts.body=JSON.stringify(body);
+  try{
+    const res =await fetch(url,opts);
+    const data=await res.json();
+    if(data.error) throw new Error(data.error);
+    return data;
+  }catch(e){ toast('Error: '+e.message,'error'); return []; }
+}
+
+// ═══════════════════════════════════════════════════════
+//  LEGEND
+// ═══════════════════════════════════════════════════════
+const legend=L.control({position:'bottomleft'});
+legend.onAdd=function(){
+  const d=L.DomUtil.create('div');
+  d.style.cssText='background:rgba(26,37,53,.93);border:1px solid #2e3f57;border-radius:8px;padding:10px 14px;font-size:.71rem;color:#e2eaf5;min-width:155px;line-height:1.8;';
+  d.innerHTML=`
+    <b style="display:block;margin-bottom:4px;color:#3b9eff">Legenda</b>
+    <div><span style="background:#56d4a0;border-radius:50%;display:inline-block;width:10px;height:10px;margin-right:5px"></span>SPBU 24 Jam</div>
+    <div><span style="background:#ff5c5c;border-radius:50%;display:inline-block;width:10px;height:10px;margin-right:5px"></span>SPBU Terbatas</div>
+    <hr style="border-color:#2e3f57;margin:5px 0">
+    <div><span style="background:#7fd4ff;display:inline-block;width:18px;height:4px;margin-right:5px;vertical-align:middle"></span>Jalan Nasional</div>
+    <div><span style="background:#c07fff;display:inline-block;width:18px;height:4px;margin-right:5px;vertical-align:middle"></span>Jalan Provinsi</div>
+    <div><span style="background:#7fffc0;display:inline-block;width:18px;height:4px;margin-right:5px;vertical-align:middle"></span>Jalan Kabupaten</div>
+    <hr style="border-color:#2e3f57;margin:5px 0">
+    <div><span style="background:#ffb84d55;border:2px solid #ffb84d;display:inline-block;width:14px;height:10px;margin-right:5px"></span>SHM</div>
+    <div><span style="background:#3b9eff55;border:2px solid #3b9eff;display:inline-block;width:14px;height:10px;margin-right:5px"></span>HGB</div>
+    <div><span style="background:#56d4a055;border:2px solid #56d4a0;display:inline-block;width:14px;height:10px;margin-right:5px"></span>HGU</div>
+    <div><span style="background:#ff9fdf55;border:2px solid #ff9fdf;display:inline-block;width:14px;height:10px;margin-right:5px"></span>HP</div>`;
+  return d;
+};
+legend.addTo(map);
+
+fetch('data/Admin_Kecamatan_lengkap.geojson')
+  .then(res => res.json())
+  .then(data => {
+    L.geoJSON(data, {
+      style: {
+        color: '#ffff00',
+        weight: 2,
+        fillOpacity: 0.12
+      },
+      onEachFeature: (feature, layer) => {
+        layer.bindTooltip(feature.properties.Ket || 'Kecamatan');
+      }
+    }).addTo(map);
+  });
+
+// ═══════════════════════════════════════════════════════
+//  INIT
+// ═══════════════════════════════════════════════════════
+(async function(){
+  await Promise.all([loadSPBU(),loadJalan(),loadParsil()]);
+  updateDrawControl();
+})();
+</script>
+</body>
+</html>