284 lines
14 KiB
PHP
284 lines
14 KiB
PHP
<?php
|
|
// Start session for standard PHP structure (if needed in future)
|
|
session_start();
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WebGIS Pertemuan 1 — Pemetaan Jalan & Parsil</title>
|
|
|
|
<!-- Leaflet & Leaflet.draw CDN -->
|
|
<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" />
|
|
|
|
<!-- Premium Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
|
|
<!-- Custom CSS Styles -->
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- ==============================
|
|
HEADER BAR
|
|
============================== -->
|
|
<div class="webgis-header">
|
|
<div class="header-brand">
|
|
<div class="brand-icon">
|
|
<!-- Map icon SVG -->
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="brand-name">WebGIS Spasial</div>
|
|
<div class="brand-subtitle">Pertemuan 1</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header-divider"></div>
|
|
|
|
<!-- SEARCH BAR -->
|
|
<div class="search-wrapper">
|
|
<div class="search-bar">
|
|
<!-- Category Dropdown -->
|
|
<div class="search-category-wrap" id="custom-select-wrap">
|
|
<span class="search-category-icon">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 10h16M4 14h8" />
|
|
</svg>
|
|
</span>
|
|
<div class="custom-select-trigger" id="custom-select-trigger">Semua Layer</div>
|
|
<input type="hidden" id="search-category" value="Semua">
|
|
<span class="category-arrow">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</span>
|
|
|
|
<div class="custom-select-options" id="custom-select-options">
|
|
<div class="custom-option selected" data-value="Semua">Semua Layer</div>
|
|
<div class="custom-option" data-value="Jalan">Jaringan Jalan</div>
|
|
<div class="custom-option" data-value="Parsil">Parsil Lahan</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Input Pencarian -->
|
|
<div class="search-input-wrap">
|
|
<span class="search-icon">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</span>
|
|
<input type="text" id="search-input" placeholder="Cari jalan atau pemilik parsil..."
|
|
onkeyup="jalankanPencarian()" oninput="toggleClearBtn()" autocomplete="off">
|
|
<button class="search-clear-btn" id="search-clear" onclick="clearSearch()" title="Hapus pencarian">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dropdown Hasil Pencarian -->
|
|
<div class="search-results" id="search-results"></div>
|
|
</div>
|
|
|
|
<!-- HEADER RIGHT TOOLS -->
|
|
<div class="header-tools">
|
|
<div class="tool-badge">Peta Aktif</div>
|
|
<div class="tool-btn" title="Status Database">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
|
|
</svg>
|
|
<div class="status-dot"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==============================
|
|
SIDEBAR INPUT DATA
|
|
============================== -->
|
|
<!-- Toggle Button -->
|
|
<button class="sidebar-toggle" id="sidebar-toggle" title="Panel Input Data">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
<span>Input Geometris</span>
|
|
</button>
|
|
|
|
<!-- Sidebar Panel -->
|
|
<div class="input-sidebar" id="input-sidebar">
|
|
<div class="sidebar-header">
|
|
<div class="sidebar-title">
|
|
<div class="sidebar-title-icon">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="sidebar-title-text">Panel Input Data</div>
|
|
<div class="sidebar-title-sub">Tambah polygon & polyline</div>
|
|
</div>
|
|
</div>
|
|
<button class="sidebar-close" id="sidebar-close" title="Tutup">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tab Navigation -->
|
|
<div class="sidebar-tabs">
|
|
<button class="stab active" data-tab="jalan" onclick="switchSidebarTab('jalan')">
|
|
<span class="stab-icon">🛣️</span>
|
|
<span>Jalan (Polyline)</span>
|
|
</button>
|
|
<button class="stab" data-tab="parsil" onclick="switchSidebarTab('parsil')">
|
|
<span class="stab-icon">🏘️</span>
|
|
<span>Parsil (Polygon)</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Scrollable Content -->
|
|
<div class="sidebar-body">
|
|
|
|
<!-- ===== TAB: JALAN (POLYLINE) ===== -->
|
|
<div class="stab-content active" id="tab-jalan">
|
|
<div class="step-guide">
|
|
<div class="step-badge">Langkah 1</div>
|
|
<p>Klik tombol <strong>Gambar Ruas Jalan</strong> di bawah, lalu buat garis di peta. Klik ganda titik akhir untuk menyelesaikan gambar.</p>
|
|
</div>
|
|
|
|
<button class="btn-pick-location btn-draw" id="btn-draw-jalan" onclick="activateDrawMode('polyline')">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
|
</svg>
|
|
Gambar Ruas Jalan
|
|
</button>
|
|
|
|
<div class="coords-display" id="coords-jalan">
|
|
<span class="coords-label">Panjang Terhitung:</span>
|
|
<span class="coords-value" id="coords-jalan-val">Belum digambar</span>
|
|
</div>
|
|
|
|
<div class="step-guide">
|
|
<div class="step-badge">Langkah 2</div>
|
|
<p>Lengkapi atribut data jalan di bawah ini.</p>
|
|
</div>
|
|
|
|
<div class="sfield">
|
|
<label class="sfield-label">Nama Jalan <span class="required">*</span></label>
|
|
<input type="text" id="sb_nama_jalan" class="sinput" placeholder="Contoh: Jl. Ahmad Yani">
|
|
</div>
|
|
|
|
<div class="sfield">
|
|
<label class="sfield-label">Status Administrasi</label>
|
|
<select id="sb_status_jalan" class="sselect">
|
|
<option value="Jalan Nasional">Jalan Nasional</option>
|
|
<option value="Jalan Provinsi">Jalan Provinsi</option>
|
|
<option value="Jalan Kabupaten">Jalan Kabupaten</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="sfield">
|
|
<label class="sfield-label">Panjang Terukur</label>
|
|
<input type="text" id="sb_panjang_jalan" class="sinput" placeholder="Otomatis terhitung setelah menggambar" readonly>
|
|
</div>
|
|
|
|
<button class="btn-save-sidebar" onclick="saveJalanSidebar()">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Simpan Data Jalan
|
|
</button>
|
|
</div>
|
|
|
|
<!-- ===== TAB: PARSIL (POLYGON) ===== -->
|
|
<div class="stab-content" id="tab-parsil">
|
|
<div class="step-guide">
|
|
<div class="step-badge">Langkah 1</div>
|
|
<p>Klik tombol <strong>Gambar Area Parsil</strong> di bawah, lalu tentukan batas area di peta. Klik ganda titik terakhir untuk menyelesaikan.</p>
|
|
</div>
|
|
|
|
<button class="btn-pick-location" id="btn-draw-parsil" onclick="activateDrawMode('polygon')">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
|
|
</svg>
|
|
Gambar Area Parsil
|
|
</button>
|
|
|
|
<div class="coords-display" id="coords-parsil">
|
|
<span class="coords-label">Luas Terhitung:</span>
|
|
<span class="coords-value" id="coords-parsil-val">Belum digambar</span>
|
|
</div>
|
|
|
|
<div class="step-guide">
|
|
<div class="step-badge">Langkah 2</div>
|
|
<p>Lengkapi atribut parsil di bawah ini.</p>
|
|
</div>
|
|
|
|
<div class="sfield">
|
|
<label class="sfield-label">Nama Pemilik <span class="required">*</span></label>
|
|
<input type="text" id="sb_nama_parsil" class="sinput" placeholder="Contoh: Haji Sudirman">
|
|
</div>
|
|
|
|
<div class="sfield">
|
|
<label class="sfield-label">Status Kepemilikan (Sertifikat)</label>
|
|
<select id="sb_status_parsil" class="sselect">
|
|
<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="sfield">
|
|
<label class="sfield-label">Luas Terukur</label>
|
|
<input type="text" id="sb_luas_parsil" class="sinput" placeholder="Otomatis terhitung setelah menggambar" readonly>
|
|
</div>
|
|
|
|
<button class="btn-save-sidebar" onclick="saveParsilSidebar()">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Simpan Data Parsil
|
|
</button>
|
|
</div>
|
|
|
|
</div><!-- end sidebar-body -->
|
|
</div><!-- end input-sidebar -->
|
|
|
|
<!-- Banner Info Mode Menggambar -->
|
|
<div class="pick-mode-overlay" id="pick-overlay">
|
|
<div class="pick-mode-banner">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5" />
|
|
</svg>
|
|
<span id="pick-overlay-text">Klik lokasi di peta...</span>
|
|
<button onclick="deactivatePickMode()">Batal</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Container Peta -->
|
|
<div id="map" style="padding-top: 60px; height: 100vh; box-sizing: border-box;"></div>
|
|
|
|
<!-- Scripts Leaflet, Leaflet.draw, Turf, dan script.js -->
|
|
<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 src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
|
|
</html>
|