naukyy
166 lines
8.1 KiB
HTML
166 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WebGIS — Pertemuan 03: Analisis Spasial</title>
|
|
<meta name="description" content="Modul 03 — Choropleth Map dinamis berbasis Point-in-Polygon berbasis WebGIS.">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<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" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
|
<link rel="stylesheet" href="css/main.css">
|
|
<style>
|
|
.result-item {
|
|
background: var(--bg-input);
|
|
padding: 8px 10px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border-glass);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 0.82rem;
|
|
}
|
|
.badge {
|
|
background: var(--primary-deep);
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
font-size: 0.68rem;
|
|
font-weight: 700;
|
|
color: white;
|
|
}
|
|
.stat-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 0.82rem;
|
|
}
|
|
.stat-row strong { font-weight: 700; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Map container -->
|
|
<div id="map"></div>
|
|
|
|
<!-- Floating Dock -->
|
|
<div class="floating-dock">
|
|
|
|
<!-- Dock top bar -->
|
|
<div class="dock-topbar">
|
|
<a href="../../portal.html" class="btn-back-portal" title="Kembali ke Portal">
|
|
<i class="fas fa-chevron-left"></i>
|
|
Portal
|
|
</a>
|
|
<div class="dock-controls">
|
|
<button class="btn-theme-dock" id="themeToggle" title="Toggle tema" aria-label="Toggle dark/light mode">
|
|
<i class="fas fa-moon" id="themeIcon"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<h2>P03: Analisis Spasial</h2>
|
|
<p>Kumulatif P01 & P02 + Choropleth Map (Point-in-Polygon).</p>
|
|
</div>
|
|
|
|
<!-- Layer Peta (Centang) -->
|
|
<div class="menu-group">
|
|
<div class="menu-title">Layer Peta</div>
|
|
<div class="form-panel" style="gap: 10px;">
|
|
<label class="checkbox-group">
|
|
<input type="checkbox" id="layer-spbu" checked>
|
|
<span>Stasiun SPBU</span>
|
|
</label>
|
|
<label class="checkbox-group">
|
|
<input type="checkbox" id="layer-jalan" checked>
|
|
<span>Jalur Jalan</span>
|
|
</label>
|
|
<label class="checkbox-group">
|
|
<input type="checkbox" id="layer-rumah" checked>
|
|
<span>Rumah Ibadah</span>
|
|
</label>
|
|
<label class="checkbox-group">
|
|
<input type="checkbox" id="layer-warga" checked>
|
|
<span>Warga Miskin</span>
|
|
</label>
|
|
<label class="checkbox-group">
|
|
<input type="checkbox" id="layer-choro" checked>
|
|
<span>Choropleth Kepadatan</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Draw Tools -->
|
|
<div class="menu-group">
|
|
<div class="menu-title">Draw Tools</div>
|
|
<button id="btn-draw-spbu" class="btn-action btn-spbu">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.242-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
|
|
Tambah SPBU
|
|
</button>
|
|
<button id="btn-draw-jalan" class="btn-action btn-jalan">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg>
|
|
Tambah Jalan
|
|
</button>
|
|
<button id="btn-draw-kavling" class="btn-action btn-kavling">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
|
|
Tambah Kavling
|
|
</button>
|
|
<button id="btn-draw-rumah" class="btn-action btn-rumah">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
|
|
Tambah Rumah Ibadah
|
|
</button>
|
|
<button id="btn-draw-warga" class="btn-action btn-warga">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
|
|
Tambah Warga Miskin
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Choropleth stats panel -->
|
|
<div id="choropleth-panel" class="form-panel" style="margin-top:4px; background:rgba(16,185,129,0.07); border-color:rgba(16,185,129,0.25);">
|
|
<h3 style="margin:0 0 8px 0; font-size:0.85rem; color:#10B981; font-weight:600;">
|
|
<i class="fas fa-chart-area" style="margin-right:6px;"></i>Statistik Kavling (Choropleth)
|
|
</h3>
|
|
<p style="font-size:0.78rem; margin:0 0 10px 0; color:var(--text-muted);">Pewarnaan otomatis area kavling berdasarkan jumlah warga miskin yang bermukim di atasnya.</p>
|
|
<div class="stat-row" style="margin-bottom:6px;">
|
|
<span>Total Penduduk Miskin:</span>
|
|
<strong id="stat-total-warga" style="color:var(--text-main);">0</strong>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span>Kavling Padat (>2 warga):</span>
|
|
<strong id="stat-kavling-merah" style="color:#EF4444;">0</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dynamic form container -->
|
|
<div id="form-container" style="display: none;"></div>
|
|
</div>
|
|
|
|
<!-- Toast -->
|
|
<div id="toast-container" class="toast-container"></div>
|
|
|
|
<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>
|
|
// ── Theme toggle ──
|
|
const html = document.documentElement;
|
|
const btn = document.getElementById('themeToggle');
|
|
const icon = document.getElementById('themeIcon');
|
|
const saved = localStorage.getItem('portal-theme') || 'dark';
|
|
setTheme(saved);
|
|
btn.addEventListener('click', () => {
|
|
const next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
|
|
setTheme(next);
|
|
localStorage.setItem('portal-theme', next);
|
|
});
|
|
function setTheme(t) {
|
|
html.setAttribute('data-theme', t);
|
|
icon.className = t === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
|
|
}
|
|
</script>
|
|
<script type="module" src="js/app.js?v=20260613-9"></script>
|
|
|
|
</body>
|
|
</html>
|