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
01/index.html
+283
View File
@@ -0,0 +1,283 @@
<!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">
<!-- Mode 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 PANEL -->
<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>
<!-- SEARCH -->
<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>
<div class="layer-wrap" id="lw">
<button class="layer-btn" id="ldbtn">🗺️ Layer <span class="chev">▼</span></button>
<div class="layer-menu" id="layer-menu">
<div class="lm-label">Tampilkan</div>
<button class="lm-item active" id="lm-point">📍 SPBU</button>
<button class="lm-item active" id="lm-jalan">📏 Jalan</button>
<button class="lm-item active" id="lm-parsil">🗺️ Parsil</button>
</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 ======================== -->
<!-- Modal Tambah SPBU -->
<div class="overlay" id="m-add-spbu">
<div class="modal">
<div class="modal-head"><h2>Tambah SPBU</h2></div>
<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</label>
<select id="spbu-status"><option value="full">24 Jam</option><option value="limited">Tidak 24 Jam</option></select>
</div>
<div class="form-group">
<label>Koordinat</label>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;">
<input id="spbu-lat" placeholder="Latitude" readonly>
<input id="spbu-lng" placeholder="Longitude" readonly>
</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</button>
</div>
</div>
</div>
<!-- Modal Tambah Jalan -->
<div class="overlay" id="m-add-jalan">
<div class="modal">
<div class="modal-head"><h2>Tambah Jalan</h2></div>
<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 class="modal-foot">
<button class="btn-ghost" onclick="closeModal('m-add-jalan')">Batal</button>
<button class="btn-primary green" onclick="saveJalan()">Simpan</button>
</div>
</div>
</div>
<!-- Modal Tambah Parsil -->
<div class="overlay" id="m-add-parsil">
<div class="modal">
<div class="modal-head"><h2>Tambah Parsil</h2></div>
<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</option><option value="HGB">HGB</option><option value="HGU">HGU</option><option value="HP">HP</option></select>
</div>
<div class="form-group"><label>Luas (m²)</label><input id="p-luas" readonly></div>
<div class="modal-foot">
<button class="btn-ghost" onclick="closeModal('m-add-parsil')">Batal</button>
<button class="btn-primary purple" onclick="saveParsil()">Simpan</button>
</div>
</div>
</div>
<!-- Modal Edit SPBU -->
<div class="overlay" id="m-edit-spbu">
<div class="modal">
<div class="modal-head"><h2>Edit SPBU</h2></div>
<input type="hidden" id="e-spbu-id">
<div class="form-group"><label>Nama SPBU</label><input id="e-spbu-nama"></div>
<div class="form-group"><label>No WA</label><input id="e-spbu-wa"></div>
<div class="form-group">
<label>Status</label>
<select id="e-spbu-status"><option value="full">24 Jam</option><option value="limited">Tidak 24 Jam</option></select>
</div>
<div class="modal-foot">
<button class="btn-ghost" onclick="closeModal('m-edit-spbu')">Batal</button>
<button class="btn-primary green" onclick="updateSpbu()">Update</button>
</div>
</div>
</div>
<!-- Modal Edit Jalan -->
<div class="overlay" id="m-edit-jalan">
<div class="modal">
<div class="modal-head"><h2>Edit Jalan</h2></div>
<input type="hidden" id="e-jalan-id">
<div class="form-group"><label>Nama Jalan</label><input id="e-j-nama"></div>
<div class="form-group">
<label>Status</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 class="modal-foot">
<button class="btn-ghost" onclick="closeModal('m-edit-jalan')">Batal</button>
<button class="btn-primary blue" onclick="updateJalan()">Update</button>
</div>
</div>
</div>
<!-- Modal Edit Parsil -->
<div class="overlay" id="m-edit-parsil">
<div class="modal">
<div class="modal-head"><h2>Edit Parsil</h2></div>
<input type="hidden" id="e-parsil-id">
<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</option><option value="HGB">HGB</option><option value="HGU">HGU</option><option value="HP">HP</option></select>
</div>
<div class="form-group"><label>Luas (m²)</label><input id="e-p-luas" readonly></div>
<div class="modal-foot">
<button class="btn-ghost" onclick="closeModal('m-edit-parsil')">Batal</button>
<button class="btn-primary purple" onclick="updateParsil()">Update</button>
</div>
</div>
</div>
<!-- ======================== CUSTOM CONFIRM DIALOG ======================== -->
<div class="overlay" id="confirm-overlay">
<div class="modal confirm-modal">
<div class="confirm-icon">⚠️</div>
<h2 id="confirm-title" class="confirm-title">Konfirmasi</h2>
<p id="confirm-message" class="confirm-message">Apakah Anda yakin?</p>
<div class="modal-foot">
<button class="btn-ghost" id="confirm-cancel">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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
</body>
</html>