Syariffullah
232 lines
11 KiB
PHP
232 lines
11 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WebGIS Pemetaan Kemiskinan</title>
|
|
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- FontAwesome (Icons) -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
<!-- Leaflet CSS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
|
|
<!-- Leaflet Draw CSS -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="assets/css/style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- UI Container over map -->
|
|
<div class="ui-container">
|
|
<!-- Search Bar -->
|
|
<div class="search-bar">
|
|
<div class="search-icon">
|
|
<i class="fas fa-search"></i>
|
|
</div>
|
|
<input type="text" class="search-input" id="searchInput" placeholder="Cari SPBU, jalan, parsil, rumah ibadah...">
|
|
<button class="search-clear" id="searchClear">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<!-- Search Results -->
|
|
<div id="searchResults" style="display: none; background: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); max-height: 200px; overflow-y: auto;">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Custom Zoom Control -->
|
|
<div class="custom-zoom-control" style="position: absolute; top: 20px; left: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 5px;">
|
|
<button class="custom-layer-btn" id="zoomInBtn" style="position: relative; top: 0; left: 0; right: auto;" title="Zoom In"><i class="fas fa-plus"></i></button>
|
|
<button class="custom-layer-btn" id="zoomOutBtn" style="position: relative; top: 0; left: 0; right: auto;" title="Zoom Out"><i class="fas fa-minus"></i></button>
|
|
</div>
|
|
|
|
<!-- Action Menu Toggle Button -->
|
|
<button class="custom-layer-btn" id="actionMenuBtn" style="top: 185px; left: 20px; right: auto;" title="Menu Tambah Data">
|
|
<i class="fas fa-chevron-right"></i>
|
|
</button>
|
|
|
|
<!-- Action Menu (Kiri) -->
|
|
<div class="action-menu" id="actionMenu" style="display: none; top: 240px; left: 20px;">
|
|
<button id="btnMenuSpbu" onclick="window.activateAddMode('spbu')"><i class="fas fa-gas-pump"></i> Tambah SPBU</button>
|
|
<button id="btnMenuIbadah" onclick="window.activateAddMode('rumah_ibadah')"><i class="fas fa-mosque"></i> Tambah Rumah Ibadah</button>
|
|
<button id="btnMenuJalan" onclick="window.activateDraw('polyline')"><i class="fas fa-road"></i> Tambah Jalan</button>
|
|
<button id="btnMenuParsil" onclick="window.activateDraw('polygon')"><i class="fas fa-draw-polygon"></i> Tambah Parsil Tanah</button>
|
|
</div>
|
|
|
|
<!-- Custom Layer Control Button -->
|
|
<button class="custom-layer-btn" id="layerBtn" title="Atur Layer">
|
|
<i class="fas fa-layer-group fa-lg"></i>
|
|
</button>
|
|
|
|
<!-- Custom Layer Control Panel -->
|
|
<div class="custom-layer-panel" id="layerPanel">
|
|
<h3>Daftar Layer</h3>
|
|
|
|
<!-- SPBU -->
|
|
<div class="layer-group-item">
|
|
<div class="layer-group-header">
|
|
<label class="layer-option" style="margin:0; flex:1;">
|
|
<input type="checkbox" id="layerSpbu" checked> SPBU
|
|
</label>
|
|
<span class="layer-toggle-icon collapsed" onclick="toggleSubLayer('subSpbu', this)"><i class="fas fa-chevron-down"></i></span>
|
|
</div>
|
|
<div id="subSpbu" class="sub-layer-list" style="display:none;">
|
|
<label class="layer-option sub-option">
|
|
<input type="checkbox" class="sub-spbu" value="1" checked onchange="applySubFilter('spbu')"> 24 Jam
|
|
</label>
|
|
<label class="layer-option sub-option">
|
|
<input type="checkbox" class="sub-spbu" value="0" checked onchange="applySubFilter('spbu')"> Tidak 24 Jam
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Jalan -->
|
|
<div class="layer-group-item">
|
|
<div class="layer-group-header">
|
|
<label class="layer-option" style="margin:0; flex:1;">
|
|
<input type="checkbox" id="layerJalan" checked> Jalan
|
|
</label>
|
|
<span class="layer-toggle-icon collapsed" onclick="toggleSubLayer('subJalan', this)"><i class="fas fa-chevron-down"></i></span>
|
|
</div>
|
|
<div id="subJalan" class="sub-layer-list" style="display:none;">
|
|
<label class="layer-option sub-option">
|
|
<input type="checkbox" class="sub-jalan" value="Nasional" checked onchange="applySubFilter('jalan')"> Nasional
|
|
</label>
|
|
<label class="layer-option sub-option">
|
|
<input type="checkbox" class="sub-jalan" value="Provinsi" checked onchange="applySubFilter('jalan')"> Provinsi
|
|
</label>
|
|
<label class="layer-option sub-option">
|
|
<input type="checkbox" class="sub-jalan" value="Kabupaten" checked onchange="applySubFilter('jalan')"> Kabupaten
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Parsil -->
|
|
<div class="layer-group-item">
|
|
<div class="layer-group-header">
|
|
<label class="layer-option" style="margin:0; flex:1;">
|
|
<input type="checkbox" id="layerParsil" checked> Parsil Tanah
|
|
</label>
|
|
<span class="layer-toggle-icon collapsed" onclick="toggleSubLayer('subParsil', this)"><i class="fas fa-chevron-down"></i></span>
|
|
</div>
|
|
<div id="subParsil" class="sub-layer-list" style="display:none;">
|
|
<label class="layer-option sub-option">
|
|
<input type="checkbox" class="sub-parsil" value="SHM" checked onchange="applySubFilter('parsil')"> SHM
|
|
</label>
|
|
<label class="layer-option sub-option">
|
|
<input type="checkbox" class="sub-parsil" value="HGB" checked onchange="applySubFilter('parsil')"> HGB
|
|
</label>
|
|
<label class="layer-option sub-option">
|
|
<input type="checkbox" class="sub-parsil" value="HGU" checked onchange="applySubFilter('parsil')"> HGU
|
|
</label>
|
|
<label class="layer-option sub-option">
|
|
<input type="checkbox" class="sub-parsil" value="HP" checked onchange="applySubFilter('parsil')"> HP
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rumah Ibadah -->
|
|
<label class="layer-option">
|
|
<input type="checkbox" id="layerRumahIbadah" checked> Rumah Ibadah
|
|
</label>
|
|
|
|
<!-- Penduduk Miskin -->
|
|
<div class="layer-group-item">
|
|
<div class="layer-group-header">
|
|
<label class="layer-option" style="margin:0; flex:1;">
|
|
<input type="checkbox" id="layerMiskin" checked> Penduduk Miskin
|
|
</label>
|
|
<span class="layer-toggle-icon collapsed" onclick="toggleSubLayer('subMiskin', this)"><i class="fas fa-chevron-down"></i></span>
|
|
</div>
|
|
<div id="subMiskin" class="sub-layer-list" style="display:none;">
|
|
<label class="layer-option sub-option">
|
|
<input type="checkbox" class="sub-miskin" value="Makan" checked onchange="applySubFilter('miskin')"> Bantuan Makan
|
|
</label>
|
|
<label class="layer-option sub-option">
|
|
<input type="checkbox" class="sub-miskin" value="Pemberdayaan" checked onchange="applySubFilter('miskin')"> Pemberdayaan
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- GeoJSON Eksternal -->
|
|
<div class="layer-group" style="margin-top: 10px; border-top: 1px solid #eee; padding-top: 10px;">
|
|
<div class="layer-group-header" onclick="window.toggleGeoJsonMenu()" style="cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-size:14px; margin-bottom:8px; font-weight: 500;">
|
|
<span><i class="fas fa-folder"></i> GeoJSON Eksternal</span>
|
|
<i id="geoJsonToggleIcon" class="fas fa-plus"></i>
|
|
</div>
|
|
<div id="geoJsonFileList" style="display:none; padding-left:15px; margin-bottom:10px;">
|
|
<div id="geoJsonLayersContainer"></div>
|
|
<div style="margin-top: 10px; padding-top: 10px; border-top: 1px dashed #ddd;">
|
|
<label style="font-size: 12px; display:block; margin-bottom: 5px;">Import GeoJSON Baru:</label>
|
|
<input type="file" id="fileGeoJson" accept=".geojson,.json" style="font-size: 12px; max-width: 100%;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Map Container -->
|
|
<div id="map"></div>
|
|
|
|
<!-- Unified Modal -->
|
|
<div id="unifiedModal" class="unified-modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 id="modalTitle">Judul Form</h3>
|
|
<span class="modal-close" onclick="closeModal()">×</span>
|
|
</div>
|
|
<div class="modal-body" id="modalBody">
|
|
<!-- Konten dinamis -->
|
|
</div>
|
|
<div class="modal-footer" id="modalFooter">
|
|
<button id="modalSaveBtn" class="btn-save">Simpan</button>
|
|
<button class="btn-cancel" onclick="closeModal()">Batal</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Confirm Modal -->
|
|
<div id="confirmModal" class="unified-modal">
|
|
<div class="modal-content" style="width: 300px;">
|
|
<div class="modal-header">
|
|
<h3>Konfirmasi</h3>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p id="confirmMessage"></p>
|
|
</div>
|
|
<div class="modal-footer" style="display: flex; gap: 10px; justify-content: flex-end;">
|
|
<button id="confirmYesBtn" class="btn-save" style="background-color: #dc3545;">Ya, Hapus</button>
|
|
<button class="btn-cancel" onclick="closeConfirmModal()">Batal</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Leaflet JS -->
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
|
|
<!-- Leaflet Draw JS -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
|
|
|
|
<!-- Leaflet TextPath JS (untuk teks diagonal) -->
|
|
<script src="https://cdn.jsdelivr.net/npm/leaflet-textpath@1.2.3/leaflet.textpath.min.js"></script>
|
|
|
|
<!-- Main Map Initialization -->
|
|
<script src="assets/js/map.js"></script>
|
|
<!-- Fitur & Komponen -->
|
|
<script src="assets/js/features/spbu.js"></script>
|
|
<script src="assets/js/features/jalan.js"></script>
|
|
<script src="assets/js/features/parsil.js"></script>
|
|
<script src="assets/js/features/draw_control.js"></script>
|
|
<script src="assets/js/features/geolocation.js"></script>
|
|
<script src="assets/js/features/kemiskinan.js"></script>
|
|
<script src="assets/js/features/geojson.js"></script>
|
|
<!-- (Akan ditambahkan sesuai tahapan) -->
|
|
|
|
</body>
|
|
</html>
|