Abimanyu Ridho
90 lines
3.3 KiB
HTML
90 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>WebGIS - Poverty Mapping & Spatial Management</title>
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
|
|
<link rel="stylesheet" href="css/app.css" />
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/6.5.0/turf.min.js"></script>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<header id="header">
|
|
<div class="brand">
|
|
<a href="index.html" style="text-decoration:none; color:inherit"><div class="brand-title">WebGIS Poverty</div></a>
|
|
<div class="brand-sub">Sistem Informasi Geografis Berbasis Web</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="header-search" id="header-search">
|
|
<div class="search-box">
|
|
<span class="search-icon">⌕</span>
|
|
<input id="search-input" type="search" autocomplete="off" placeholder="Telusuri Webgis Poverty" aria-label="Cari objek peta" />
|
|
</div>
|
|
<div class="search-results" id="search-results" aria-label="Hasil pencarian"></div>
|
|
</div>
|
|
|
|
<div class="header-right">
|
|
<div class="coord-display" id="coord-display">Lat: - | Lng: -</div>
|
|
<div class="status-pill"><span id="status-zoom">Zoom: 13</span></div>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="main">
|
|
<section id="map-wrap">
|
|
<div id="instruction-banner"></div>
|
|
<div id="map"></div>
|
|
</section>
|
|
|
|
<aside id="panel">
|
|
<div id="panel-head">
|
|
<a href="index.html" class="btn btn-ghost btn-sm" style="margin-bottom: 12px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none;">
|
|
<span style="font-size: 14px;">←</span> Kembali ke Beranda
|
|
</a>
|
|
<h2 id="panel-title">Rumah Ibadah & Kemiskinan</h2>
|
|
<!-- <div class="panel-meta">
|
|
<span>Drag marker untuk update lokasi</span>
|
|
<span>Draw polyline untuk jalan</span>
|
|
<span>Draw polygon untuk persil</span>
|
|
</div> -->
|
|
</div>
|
|
<div id="panel-body">
|
|
<div class="loading"><span class="spinner"></span>Memuat data...</div>
|
|
</div>
|
|
</aside>
|
|
</main>
|
|
</div>
|
|
|
|
<div id="modal-overlay" aria-hidden="true">
|
|
<div id="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
|
|
<div class="modal-head"><h3 id="modal-title">Modal</h3></div>
|
|
<div id="modal-body"></div>
|
|
<div id="modal-footer"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="toast-container"></div>
|
|
|
|
<script src="js/app-core.js"></script>
|
|
<script src="js/feature-kemiskinan.js"></script>
|
|
<script src="js/feature-spbu.js"></script>
|
|
<script src="js/feature-jalan.js"></script>
|
|
<script src="js/feature-persil.js"></script>
|
|
<script src="js/feature-basemap.js"></script>
|
|
<script>
|
|
initPage('spbu');
|
|
</script>
|
|
</body>
|
|
</html>
|