feat: implement web GIS layout with sidebar, custom UI controls, and modular map feature integration
This commit is contained in:
Syariffullah
@@ -76,130 +76,132 @@
|
||||
</nav>
|
||||
|
||||
|
||||
<!-- Right Data Panel (includes layer control) -->
|
||||
<div class="right-panel" id="rightPanel">
|
||||
<div class="right-panel-header">
|
||||
<h3 id="rightPanelTitle">Data</h3>
|
||||
<button class="right-panel-close" id="rightPanelClose"><i class="fas fa-times"></i></button>
|
||||
</div>
|
||||
<div class="right-panel-actions" id="rightPanelActions"></div>
|
||||
<div class="right-panel-body" id="rightPanelBody">
|
||||
<div class="panel-empty">Pilih menu di kiri untuk menampilkan data</div>
|
||||
</div>
|
||||
</div><!-- /right-panel -->
|
||||
|
||||
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
</div>
|
||||
</div><!-- /custom-layer-panel -->
|
||||
|
||||
<!-- 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><!-- /custom-layer-panel -->
|
||||
|
||||
<!-- Right Data Panel -->
|
||||
<div class="right-panel" id="rightPanel">
|
||||
<div class="right-panel-header">
|
||||
<h3 id="rightPanelTitle">Data</h3>
|
||||
<button class="right-panel-close" id="rightPanelClose"><i class="fas fa-times"></i></button>
|
||||
</div>
|
||||
<div class="right-panel-actions" id="rightPanelActions"></div>
|
||||
<div class="right-panel-body" id="rightPanelBody">
|
||||
<div class="panel-empty">Pilih menu di kiri untuk menampilkan data</div>
|
||||
</div>
|
||||
</div><!-- /right-panel -->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Map Container -->
|
||||
@@ -298,16 +300,16 @@
|
||||
<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>
|
||||
<script src="assets/js/map.js?v=<?= time() ?>"></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>
|
||||
<script src="assets/js/panel.js"></script>
|
||||
<script src="assets/js/features/spbu.js?v=<?= time() ?>"></script>
|
||||
<script src="assets/js/features/jalan.js?v=<?= time() ?>"></script>
|
||||
<script src="assets/js/features/parsil.js?v=<?= time() ?>"></script>
|
||||
<script src="assets/js/features/draw_control.js?v=<?= time() ?>"></script>
|
||||
<script src="assets/js/features/geolocation.js?v=<?= time() ?>"></script>
|
||||
<script src="assets/js/features/kemiskinan.js?v=<?= time() ?>"></script>
|
||||
<script src="assets/js/features/geojson.js?v=<?= time() ?>"></script>
|
||||
<script src="assets/js/panel.js?v=<?= time() ?>"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user