denavy/D1041231027-WebGIS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
dena27
2026-06-10 18:48:37 +07:00
commit 084b171dbd
44 changed files with 35487 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
03/index.html
+420
View File
@@ -0,0 +1,420 @@
<!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</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fira+Code:wght@400;500&display=swap">
</head>
<body>
<div id="loading">
<div class="ld-inner">
<div class="spin"></div>
<p>Memuat WebGIS…</p>
</div>
</div>
<div id="app">
<!-- ═══════════ SIDEBAR ═══════════ -->
<aside id="sidebar">
<div class="sb-header">
<div class="sb-brand">
<div class="sb-icon">⛽</div>
<div>
<div class="sb-title">WebGIS SPBU</div>
<div class="sb-sub">Jalan & Parsil Tanah</div>
</div>
</div>
</div>
<div class="sb-scroll">
<!-- Tipe Geometri -->
<div class="sb-section">
<div class="sb-label">Tipe Geometri</div>
<div class="geom-selector">
<button class="geom-btn" data-geom="point">📍 Point</button>
<button class="geom-btn" data-geom="polyline">📏 Line</button>
<button class="geom-btn" data-geom="polygon">🗺️ Polygon</button>
</div>
<div class="geom-hint" id="geom-hint">
<span class="gh-dot"></span>
<span id="geom-hint-text">Klik tipe untuk mulai menggambar</span>
</div>
</div>
<!-- Legenda SPBU -->
<div class="sb-section">
<div class="sb-label">Legenda SPBU</div>
<div class="legend-card">
<div class="leg-row"><span class="leg-dot spbu-24"></span> Buka 24 Jam</div>
<div class="leg-row"><span class="leg-dot spbu-ltd"></span> Tidak 24 Jam</div>
</div>
</div>
<!-- Legenda Jalan -->
<div class="sb-section">
<div class="sb-label">Legenda Jalan</div>
<div class="legend-card">
<div class="leg-row"><span class="leg-line jalan-nas"></span> Jalan Nasional</div>
<div class="leg-row"><span class="leg-line jalan-prov"></span> Jalan Provinsi</div>
<div class="leg-row"><span class="leg-line jalan-kab"></span> Jalan Kabupaten</div>
</div>
</div>
<!-- Legenda Parsil -->
<div class="sb-section">
<div class="sb-label">Legenda Parsil Tanah</div>
<div class="legend-card">
<div class="leg-row"><span class="leg-poly parsil-shm"></span> SHM — Hak Milik</div>
<div class="leg-row"><span class="leg-poly parsil-hgb"></span> HGB — Hak Guna Bangunan</div>
<div class="leg-row"><span class="leg-poly parsil-hgu"></span> HGU — Hak Guna Usaha</div>
<div class="leg-row"><span class="leg-poly parsil-hp"></span> HP — Hak Pakai</div>
</div>
</div>
<!-- Statistik -->
<div class="sb-section">
<div class="sb-label">Statistik</div>
<div class="stat-grid">
<div class="stat-item"><div class="stat-num" id="cnt-total">—</div><div class="stat-lbl">Total SPBU</div></div>
<div class="stat-item green"><div class="stat-num" id="cnt-24">—</div><div class="stat-lbl">Buka 24 Jam</div></div>
<div class="stat-item blue"><div class="stat-num" id="cnt-jalan">—</div><div class="stat-lbl">Jalan</div></div>
<div class="stat-item purple"><div class="stat-num" id="cnt-parsil">—</div><div class="stat-lbl">Parsil</div></div>
</div>
</div>
<!-- Daftar SPBU -->
<div class="sb-section">
<div class="sb-label">Daftar SPBU</div>
<div id="spbu-list"></div>
</div>
</div>
</aside>
<!-- ═══════════ MAIN ═══════════ -->
<div id="main">
<div id="topbar">
<div class="coord-pill">
<span>📍</span>
<span id="cur-lat">—</span><span class="pill-sep">|</span><span id="cur-lng">—</span>
</div>
<div id="search-wrap">
<div class="search-box">
<span class="search-icon">🔍</span>
<input id="search-input" type="text" placeholder="Cari SPBU, Jalan, Parsil…" autocomplete="off">
</div>
<div id="search-results"></div>
</div>
<!-- Layer toggle button -->
<div class="layer-wrap" id="lw">
<button class="layer-btn" id="ldbtn">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 1L14.5 4.5L8 8L1.5 4.5L8 1Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>
<path d="M1.5 8L8 11.5L14.5 8" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>
<path d="M1.5 11.5L8 15L14.5 11.5" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>
</svg>
Layer <span class="chev">▼</span>
</button>
<div class="layer-menu" id="layer-menu">
<div class="lm-label">Tampilkan Layer</div>
<label class="lm-item">
<input type="checkbox" id="lm-point" checked>
<span class="lm-check"></span>
<span class="lm-icon">📍</span>
<span>SPBU</span>
</label>
<div class="lm-sub" id="lm-sub-spbu">
<label class="lm-sub-item">
<input type="checkbox" id="lm-spbu24" checked>
<span class="lm-check sm"></span>
<span class="lm-sub-dot dot-green"></span>
<span>Buka 24 Jam</span>
</label>
<label class="lm-sub-item">
<input type="checkbox" id="lm-spbuLtd" checked>
<span class="lm-check sm"></span>
<span class="lm-sub-dot dot-red"></span>
<span>Tidak 24 Jam</span>
</label>
</div>
<label class="lm-item">
<input type="checkbox" id="lm-jalan" checked>
<span class="lm-check"></span>
<span class="lm-icon">📏</span>
<span>Jalan</span>
</label>
<label class="lm-item">
<input type="checkbox" id="lm-parsil" checked>
<span class="lm-check"></span>
<span class="lm-icon">🗺️</span>
<span>Parsil</span>
</label>
</div>
</div>
</div>
<div id="map-wrap">
<div id="map"></div>
<!-- Draw toolbar -->
<div id="draw-toolbar">
<div class="dt-hint">ℹ️ <span id="dt-hint-text">Klik peta untuk menggambar</span></div>
<span class="dt-counter" id="dt-counter">0 titik</span>
<button class="dt-btn undo" id="btn-undo" disabled>↩️ Undo</button>
<button class="dt-btn redo" id="btn-redo" disabled>↪️ Redo</button>
<button class="dt-btn cancel" id="btn-cancel-draw">❌ Batal</button>
<button class="dt-btn finish" id="btn-finish">✅ Selesai</button>
</div>
<!-- Geom Edit toolbar -->
<div id="geom-edit-toolbar">
<div class="dt-hint">📐 <span id="geom-edit-hint">Drag titik untuk edit geometri</span></div>
<span class="dt-counter geom-edit-counter" id="geom-edit-info"></span>
<button class="dt-btn cancel" id="btn-geom-cancel">❌ Batal</button>
<button class="dt-btn finish" id="btn-geom-save">💾 Simpan</button>
</div>
</div>
</div>
</div>
<!-- ═══════════ MODALS ═══════════ -->
<!-- Tambah SPBU -->
<div class="overlay" id="m-add-spbu">
<div class="modal">
<div class="modal-head">
<div class="modal-head-icon">⛽</div>
<h2>Tambah SPBU</h2>
</div>
<div class="modal-body">
<div class="form-group">
<label>Nama SPBU</label>
<input id="spbu-nama" placeholder="Contoh: SPBU MJ 1234">
</div>
<div class="form-group">
<label>No WhatsApp</label>
<input id="spbu-wa" placeholder="Contoh: 62812345678">
</div>
<div class="form-group">
<label>Status Operasional</label>
<select id="spbu-status">
<option value="full">Buka 24 Jam</option>
<option value="limited">Tidak 24 Jam</option>
</select>
</div>
<div class="form-group">
<label>Koordinat</label>
<div class="form-row">
<input id="spbu-lat" placeholder="Latitude" readonly>
<input id="spbu-lng" placeholder="Longitude" readonly>
</div>
</div>
</div>
<div class="modal-foot">
<button class="btn-ghost" onclick="closeModal('m-add-spbu')">Batal</button>
<button class="btn-primary green" onclick="saveSpbu()">💾 Simpan SPBU</button>
</div>
</div>
</div>
<!-- Tambah Jalan -->
<div class="overlay" id="m-add-jalan">
<div class="modal">
<div class="modal-head">
<div class="modal-head-icon">🛣️</div>
<h2>Tambah Jalan</h2>
</div>
<div class="modal-body">
<div class="form-group">
<label>Nama Jalan</label>
<input id="j-nama" placeholder="Contoh: Jalan Ahmad Yani">
</div>
<div class="form-group">
<label>Status Jalan</label>
<select id="j-status">
<option value="nasional">Nasional</option>
<option value="provinsi">Provinsi</option>
<option value="kabupaten">Kabupaten</option>
</select>
</div>
<div class="form-group">
<label>Panjang (meter)</label>
<input id="j-panjang" readonly>
</div>
</div>
<div class="modal-foot">
<button class="btn-ghost" onclick="closeModal('m-add-jalan')">Batal</button>
<button class="btn-primary green" onclick="saveJalan()">💾 Simpan Jalan</button>
</div>
</div>
</div>
<!-- Tambah Parsil -->
<div class="overlay" id="m-add-parsil">
<div class="modal">
<div class="modal-head">
<div class="modal-head-icon">🗺️</div>
<h2>Tambah Parsil</h2>
</div>
<div class="modal-body">
<div class="form-group">
<label>Nama Parsil</label>
<input id="p-nama" placeholder="Contoh: Tanah A">
</div>
<div class="form-group">
<label>Status Kepemilikan</label>
<select id="p-status">
<option value="SHM">SHM — 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="form-group">
<label>Luas (m²)</label>
<input id="p-luas" readonly>
</div>
</div>
<div class="modal-foot">
<button class="btn-ghost" onclick="closeModal('m-add-parsil')">Batal</button>
<button class="btn-primary purple" onclick="saveParsil()">💾 Simpan Parsil</button>
</div>
</div>
</div>
<!-- Edit SPBU -->
<div class="overlay" id="m-edit-spbu">
<div class="modal">
<div class="modal-head">
<div class="modal-head-icon">✏️</div>
<h2>Edit SPBU</h2>
</div>
<input type="hidden" id="e-spbu-id">
<div class="modal-body">
<div class="form-group">
<label>Nama SPBU</label>
<input id="e-spbu-nama">
</div>
<div class="form-group">
<label>No WhatsApp</label>
<input id="e-spbu-wa">
</div>
<div class="form-group">
<label>Status Operasional</label>
<select id="e-spbu-status">
<option value="full">Buka 24 Jam</option>
<option value="limited">Tidak 24 Jam</option>
</select>
</div>
</div>
<div class="modal-foot">
<button class="btn-ghost" onclick="closeModal('m-edit-spbu')">Batal</button>
<button class="btn-primary green" onclick="updateSpbu()">✅ Update SPBU</button>
</div>
</div>
</div>
<!-- Edit Jalan -->
<div class="overlay" id="m-edit-jalan">
<div class="modal">
<div class="modal-head">
<div class="modal-head-icon">✏️</div>
<h2>Edit Jalan</h2>
</div>
<input type="hidden" id="e-jalan-id">
<div class="modal-body">
<div class="form-group">
<label>Nama Jalan</label>
<input id="e-j-nama">
</div>
<div class="form-group">
<label>Status Jalan</label>
<select id="e-j-status">
<option value="nasional">Nasional</option>
<option value="provinsi">Provinsi</option>
<option value="kabupaten">Kabupaten</option>
</select>
</div>
<div class="form-group">
<label>Panjang (meter)</label>
<input id="e-j-panjang" readonly>
</div>
</div>
<div class="modal-foot">
<button class="btn-ghost" onclick="closeModal('m-edit-jalan')">Batal</button>
<button class="btn-primary blue" onclick="updateJalan()">✅ Update Jalan</button>
</div>
</div>
</div>
<!-- Edit Parsil -->
<div class="overlay" id="m-edit-parsil">
<div class="modal">
<div class="modal-head">
<div class="modal-head-icon">✏️</div>
<h2>Edit Parsil</h2>
</div>
<input type="hidden" id="e-parsil-id">
<div class="modal-body">
<div class="form-group">
<label>Nama Parsil</label>
<input id="e-p-nama">
</div>
<div class="form-group">
<label>Status Kepemilikan</label>
<select id="e-p-status">
<option value="SHM">SHM — 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="form-group">
<label>Luas (m²)</label>
<input id="e-p-luas" readonly>
</div>
</div>
<div class="modal-foot">
<button class="btn-ghost" onclick="closeModal('m-edit-parsil')">Batal</button>
<button class="btn-primary purple" onclick="updateParsil()">✅ Update Parsil</button>
</div>
</div>
</div>
<!-- Confirm Dialog -->
<div class="overlay" id="confirm-overlay">
<div class="modal confirm-modal">
<div class="modal-head">
<div class="modal-head-icon" style="background:#dc2626;">⚠️</div>
<h2 id="confirm-title" style="color:var(--red);">Konfirmasi</h2>
</div>
<div class="confirm-body">
<p id="confirm-message" class="confirm-message">Apakah Anda yakin?</p>
</div>
<div class="modal-foot">
<button class="btn-ghost" id="confirm-cancel">Tidak, Batal</button>
<button class="btn-primary red" id="confirm-ok">🗑️ Ya, Hapus</button>
</div>
</div>
</div>
<div id="toasts"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>