z0rayy
530 lines
24 KiB
HTML
530 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Peta Kemiskinan & Rumah Ibadah — WebGIS</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
:root {
|
|
--clr-bg: #0f172a; --clr-surface: #1e293b; --clr-surface-light: #334155;
|
|
--clr-border: #334155; --clr-text: #f1f5f9; --clr-muted: #94a3b8;
|
|
--clr-primary: #3b82f6; --clr-primary-dark: #2563eb;
|
|
--clr-success: #22c55e; --clr-danger: #ef4444;
|
|
--radius: 10px; --shadow: 0 4px 24px rgba(0,0,0,.45);
|
|
--transition: .2s ease;
|
|
--sidebar-width: 260px; --sidebar-collapsed: 70px;
|
|
}
|
|
html, body { height: 100%; font-family: 'Inter', sans-serif; background: var(--clr-bg); color: var(--clr-text); overflow: hidden; }
|
|
|
|
/* ---- Layout ---- */
|
|
.app-wrapper { display: flex; height: 100vh; }
|
|
|
|
/* ---- Sidebar ---- */
|
|
.sidebar {
|
|
width: var(--sidebar-width);
|
|
background: linear-gradient(135deg, #1a2a42 0%, #0f172a 100%);
|
|
border-right: 1px solid var(--clr-border);
|
|
display: flex; flex-direction: column;
|
|
transition: width var(--transition); z-index: 100;
|
|
box-shadow: 2px 0 8px rgba(0,0,0,.3); overflow: hidden;
|
|
}
|
|
.sidebar.collapsed { width: var(--sidebar-collapsed); }
|
|
.sidebar-header {
|
|
padding: 20px; border-bottom: 1px solid var(--clr-border);
|
|
display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
|
|
}
|
|
.sidebar-logo { display: flex; align-items: center; gap: 10px; flex: 1; overflow: hidden; }
|
|
.sidebar-logo-icon {
|
|
width: 40px; height: 40px; flex-shrink: 0;
|
|
background: linear-gradient(135deg, #ef4444, #8b5cf6);
|
|
border-radius: 8px; display: flex; align-items: center; justify-content: center;
|
|
font-size: 14px; font-weight: 700; box-shadow: 0 0 12px rgba(239,68,68,.4);
|
|
}
|
|
.sidebar-logo-text { overflow: hidden; }
|
|
.sidebar-logo-text h2 { font-size: 14px; font-weight: 700; white-space: nowrap; }
|
|
.sidebar-logo-text p { font-size: 11px; color: var(--clr-muted); white-space: nowrap; }
|
|
.sidebar.collapsed .sidebar-logo-text { display: none; }
|
|
.sidebar-toggle { background: transparent; border: none; color: var(--clr-muted); cursor: pointer; font-size: 20px; padding: 4px; flex-shrink: 0; transition: color var(--transition); }
|
|
.sidebar-toggle:hover { color: var(--clr-text); }
|
|
.sidebar-nav { flex: 1; overflow-y: auto; padding: 16px 0; }
|
|
.sidebar-section { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
|
|
.sidebar-section:last-child { border-bottom: none; }
|
|
.sidebar-section-title { padding: 10px 16px; font-size: 10px; font-weight: 700; color: var(--clr-muted); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; }
|
|
.sidebar.collapsed .sidebar-section-title { opacity: 0; }
|
|
.sidebar-menu { display: flex; flex-direction: column; }
|
|
.sidebar-item {
|
|
display: flex; align-items: center; gap: 12px; padding: 13px 16px;
|
|
color: var(--clr-muted); cursor: pointer; text-decoration: none;
|
|
transition: all var(--transition); border-left: 3px solid transparent;
|
|
}
|
|
.sidebar-item:hover { color: var(--clr-text); background: rgba(255,255,255,.05); border-left-color: var(--clr-primary); }
|
|
.sidebar-item.active { color: var(--clr-danger); background: rgba(239,68,68,.1); border-left-color: var(--clr-danger); }
|
|
.sidebar-item-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
|
|
.sidebar-item-text { flex: 1; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; }
|
|
.sidebar.collapsed .sidebar-item-text { display: none; }
|
|
.sidebar-item-user { font-size: 11px; color: var(--clr-muted); padding: 4px 16px 12px; white-space: nowrap; overflow: hidden; }
|
|
.sidebar.collapsed .sidebar-item-user { display: none; }
|
|
|
|
/* ---- Main ---- */
|
|
.main-wrapper { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
|
|
header {
|
|
flex-shrink: 0; height: 60px;
|
|
background: linear-gradient(135deg, #3d1a1a 0%, #0f172a 100%);
|
|
border-bottom: 1px solid var(--clr-border);
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 0 20px; box-shadow: 0 2px 12px rgba(0,0,0,.5);
|
|
}
|
|
.header-title h1 { font-size: 18px; font-weight: 700; color: #fca5a5; }
|
|
.header-breadcrumb { font-size: 13px; color: var(--clr-muted); margin-top: 2px; }
|
|
.header-user { font-size: 13px; color: var(--clr-muted); background: rgba(255,255,255,.06); border: 1px solid var(--clr-border); padding: 6px 14px; border-radius: 8px; }
|
|
.content-area { flex: 1; position: relative; overflow: hidden; }
|
|
|
|
/* ---- Map ---- */
|
|
#map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
|
|
|
|
/* ---- Controls Panel ---- */
|
|
.controls-panel {
|
|
position: absolute; top: 16px; right: 16px;
|
|
background: rgba(30, 41, 59, 0.95); backdrop-filter: blur(8px);
|
|
border: 1px solid var(--clr-border); border-radius: var(--radius);
|
|
padding: 16px; z-index: 1000; width: 280px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.controls-panel h3 { font-size: 13px; font-weight: 700; color: var(--clr-text); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
|
|
.ctrl-input {
|
|
width: 100%; padding: 9px 12px; margin-bottom: 10px;
|
|
background: var(--clr-bg); border: 1px solid var(--clr-border);
|
|
border-radius: 6px; color: var(--clr-text); font-family: inherit; font-size: 13px; outline: none;
|
|
}
|
|
.ctrl-input:focus { border-color: var(--clr-primary); }
|
|
|
|
/* ---- Search Panel (Left) ---- */
|
|
.search-panel {
|
|
position: absolute; top: 16px; left: 60px; /* offset for leaflet zoom controls */
|
|
background: rgba(30, 41, 59, 0.95); backdrop-filter: blur(8px);
|
|
border: 1px solid var(--clr-border); border-radius: var(--radius);
|
|
padding: 12px; z-index: 1000; width: 300px;
|
|
box-shadow: var(--shadow); display: flex; flex-direction: column;
|
|
}
|
|
.search-panel h3 { font-size: 13px; font-weight: 700; color: var(--clr-text); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px; }
|
|
.search-input-wrap { position: relative; margin-bottom: 8px; }
|
|
.search-input-wrap .ctrl-input { margin-bottom: 0; padding-right: 30px; }
|
|
.search-results {
|
|
max-height: 180px; overflow-y: auto; margin-top: 4px;
|
|
display: none; flex-direction: column; gap: 4px;
|
|
}
|
|
.search-results.active { display: flex; margin-bottom: 8px; }
|
|
.search-result-item {
|
|
padding: 8px 10px; background: rgba(255,255,255,0.05); border-radius: 6px;
|
|
cursor: pointer; transition: 0.2s; border: 1px solid transparent;
|
|
}
|
|
.search-result-item:hover { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.3); }
|
|
.search-result-name { font-size: 13px; font-weight: 600; color: #f1f5f9; display: block; margin-bottom: 2px; }
|
|
.search-result-desc { font-size: 11px; color: #94a3b8; display: block; }
|
|
|
|
.legend-panel {
|
|
position: absolute; bottom: 16px; right: 16px;
|
|
background: rgba(30, 41, 59, 0.95); backdrop-filter: blur(8px);
|
|
border: 1px solid var(--clr-border); border-radius: var(--radius);
|
|
padding: 14px; z-index: 1000; width: 230px; font-size: 13px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.legend-panel h3 { font-size: 11px; font-weight: 700; color: var(--clr-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
|
|
.legend-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; color: var(--clr-text); font-size: 12px; }
|
|
.legend-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
|
|
.panel-toggle {
|
|
width: 100%; display: none; align-items: center; justify-content: space-between; gap: 10px;
|
|
background: transparent; border: none; color: var(--clr-text); cursor: pointer;
|
|
font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 0;
|
|
}
|
|
.panel-toggle .toggle-icon { color: var(--clr-muted); transition: transform var(--transition); }
|
|
.panel-collapsed .panel-body { display: none; }
|
|
.panel-collapsed .toggle-icon { transform: rotate(-90deg); }
|
|
|
|
/* ---- Popup Slider ---- */
|
|
.popup-slider-wrap { margin-top: 10px; }
|
|
.popup-slider-label { font-size: 12px; font-weight: 600; color: #334155; display: block; margin-bottom: 4px; }
|
|
.popup-slider { width: 100%; }
|
|
|
|
/* ---- Loader ---- */
|
|
#loader { position: fixed; inset: 0; background: var(--clr-bg); color: var(--clr-text); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 9999; gap: 12px; }
|
|
.loader-spinner { width: 36px; height: 36px; border: 3px solid var(--clr-border); border-top-color: var(--clr-danger); border-radius: 50%; animation: spin 0.8s linear infinite; }
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
/* ---- Custom Marker ---- */
|
|
.custom-marker {
|
|
display: flex; justify-content: center; align-items: center;
|
|
}
|
|
.marker-halo {
|
|
position: absolute;
|
|
width: 40px; height: 40px;
|
|
border-radius: 50%;
|
|
animation: pulse 2s infinite ease-out;
|
|
}
|
|
.marker-halo.ibadah { background: rgba(34, 197, 94, 0.5); }
|
|
.marker-halo.miskin-in { background: rgba(239, 68, 68, 0.5); }
|
|
.marker-halo.miskin-out { background: rgba(30, 41, 59, 0.5); }
|
|
|
|
.marker-icon-inner {
|
|
position: relative; z-index: 2;
|
|
width: 28px; height: 28px;
|
|
background: white; border-radius: 50%;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.5);
|
|
display: flex; justify-content: center; align-items: center;
|
|
font-size: 14px;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { transform: scale(0.5); opacity: 1; }
|
|
100% { transform: scale(1.5); opacity: 0; }
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.sidebar { width: var(--sidebar-collapsed); }
|
|
.sidebar-logo-text,
|
|
.sidebar-item-text,
|
|
.sidebar-section-title,
|
|
.sidebar-item-user { display: none; }
|
|
.sidebar-header { padding: 16px 14px; }
|
|
header { height: auto; min-height: 64px; padding: 10px 14px; }
|
|
.header-title h1 { font-size: 16px; }
|
|
.header-breadcrumb { font-size: 12px; }
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.app-wrapper { height: 100dvh; }
|
|
.sidebar { width: 56px; }
|
|
.sidebar-header { padding: 12px 8px; justify-content: center; }
|
|
.sidebar-logo-icon { width: 34px; height: 34px; font-size: 12px; }
|
|
.sidebar-toggle { display: none; }
|
|
.sidebar-nav { padding: 10px 0; }
|
|
.sidebar-item { padding: 12px 14px; justify-content: center; }
|
|
.search-panel,
|
|
.legend-panel {
|
|
left: 10px; right: 10px; width: auto;
|
|
}
|
|
.search-panel { top: 10px; padding: 10px; }
|
|
.search-results { max-height: 105px; }
|
|
.search-panel h3 { font-size: 11px; margin-bottom: 8px; }
|
|
.panel-toggle { display: flex; }
|
|
.search-panel h3,
|
|
.legend-panel h3 { display: none; }
|
|
.panel-body { margin-top: 10px; }
|
|
.legend-panel { bottom: 10px; padding: 10px; }
|
|
.legend-panel h3 { margin-bottom: 7px; }
|
|
.legend-row { font-size: 11px; margin-bottom: 5px; }
|
|
}
|
|
|
|
@media (max-width: 420px) {
|
|
.header-breadcrumb { display: none; }
|
|
.search-panel { top: 8px; }
|
|
.ctrl-input { padding: 8px 10px; font-size: 12px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
|
|
<div class="app-wrapper">
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar" id="sidebar">
|
|
<div class="sidebar-header">
|
|
<div class="sidebar-logo">
|
|
<div class="sidebar-logo-icon">KM</div>
|
|
<div class="sidebar-logo-text">
|
|
<h2>WebGIS</h2>
|
|
<p>Peta Kemiskinan</p>
|
|
</div>
|
|
</div>
|
|
<button class="sidebar-toggle" id="sidebar-toggle">≡</button>
|
|
</div>
|
|
<nav class="sidebar-nav">
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-section-title">Navigasi</div>
|
|
<div class="sidebar-menu">
|
|
<div class="sidebar-item active">
|
|
<div class="sidebar-item-icon">🗺</div>
|
|
<div class="sidebar-item-text">Peta Kemiskinan</div>
|
|
</div>
|
|
<a href="index.php" class="sidebar-item">
|
|
<div class="sidebar-item-icon">🏠</div>
|
|
<div class="sidebar-item-text">Beranda</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- Main -->
|
|
<div class="main-wrapper">
|
|
<header>
|
|
<div class="header-title">
|
|
<h1>Peta Analisis Kemiskinan</h1>
|
|
<div class="header-breadcrumb">Peta interaktif akses publik</div>
|
|
</div>
|
|
</header>
|
|
<div class="content-area">
|
|
<div id="map"></div>
|
|
|
|
<!-- Search Panel (Left) -->
|
|
<div class="search-panel">
|
|
<button class="panel-toggle" type="button" data-panel-toggle="search-panel"><span>Pencarian</span><span class="toggle-icon">▾</span></button>
|
|
<h3><i class="fa-solid fa-magnifying-glass" style="color:var(--clr-primary)"></i> Pencarian</h3>
|
|
<div class="panel-body">
|
|
<div style="font-size:11px; font-weight:600; color:#94a3b8; margin-bottom:4px;">RUMAH IBADAH</div>
|
|
<div class="search-input-wrap">
|
|
<input id="search-ibadah" class="ctrl-input" type="text" placeholder="Cari Rumah Ibadah..." autocomplete="off">
|
|
</div>
|
|
<div id="results-ibadah" class="search-results"></div>
|
|
|
|
<div style="font-size:11px; font-weight:600; color:#94a3b8; margin-top:8px; margin-bottom:4px;">PENDUDUK MISKIN</div>
|
|
<div class="search-input-wrap">
|
|
<input id="search-miskin" class="ctrl-input" type="text" placeholder="Cari Nama KK Penduduk Miskin..." autocomplete="off">
|
|
</div>
|
|
<div id="results-miskin" class="search-results"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="legend-panel">
|
|
<button class="panel-toggle" type="button" data-panel-toggle="legend-panel"><span>Legenda</span><span class="toggle-icon">▾</span></button>
|
|
<h3>Legenda</h3>
|
|
<div class="panel-body">
|
|
<div class="legend-row"><div class="legend-dot" style="background:#22c55e;"></div> Rumah Ibadah</div>
|
|
<div class="legend-row"><div class="legend-dot" style="background:#ef4444;"></div> Penduduk Miskin (Dalam Radius)</div>
|
|
<div class="legend-row"><div class="legend-dot" style="background:#1e293b; border: 1px solid #64748b;"></div> Penduduk Miskin (Luar Radius)</div>
|
|
<hr style="border-color:#334155; margin: 8px 0;">
|
|
<div style="font-size:11px; color: var(--clr-muted);">💡 Klik Rumah Ibadah untuk atur radius jangkauan</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
|
|
<script>
|
|
// Sidebar toggle
|
|
document.getElementById('sidebar-toggle').addEventListener('click', () => {
|
|
document.getElementById('sidebar').classList.toggle('collapsed');
|
|
});
|
|
|
|
function setupCollapsiblePanels() {
|
|
document.querySelectorAll('[data-panel-toggle]').forEach(btn => {
|
|
const panel = btn.closest('.search-panel, .legend-panel');
|
|
btn.addEventListener('click', () => panel.classList.toggle('panel-collapsed'));
|
|
});
|
|
if (window.matchMedia('(max-width: 760px)').matches) {
|
|
document.querySelectorAll('.search-panel, .legend-panel').forEach(panel => {
|
|
panel.classList.add('panel-collapsed');
|
|
});
|
|
}
|
|
}
|
|
setupCollapsiblePanels();
|
|
|
|
// Global state
|
|
let ibadahData = [], miskinData = [];
|
|
let ibadahLayer, miskinLayer, map;
|
|
let ibadahRadiuses = {}, ibadahPoints = [];
|
|
let ibadahIcon, miskinRedIcon, miskinBlackIcon;
|
|
|
|
async function initMap() {
|
|
map = L.map('map').setView([-0.026, 109.342], 13);
|
|
const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap', maxZoom: 19 });
|
|
const dark = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', { maxZoom: 19 });
|
|
osm.addTo(map);
|
|
L.control.layers({ 'Standard': osm, 'Dark': dark }).addTo(map);
|
|
|
|
ibadahLayer = L.layerGroup().addTo(map);
|
|
miskinLayer = L.layerGroup().addTo(map);
|
|
|
|
const ibadahCustomIcon = L.divIcon({
|
|
className: 'custom-marker',
|
|
html: `<div class="marker-halo ibadah"></div><div class="marker-icon-inner">🕌</div>`,
|
|
iconSize: [28, 28], iconAnchor: [14, 14], popupAnchor: [0, -14]
|
|
});
|
|
|
|
const miskinInIcon = L.divIcon({
|
|
className: 'custom-marker',
|
|
html: `<div class="marker-halo miskin-in"></div><div class="marker-icon-inner">🏠</div>`,
|
|
iconSize: [28, 28], iconAnchor: [14, 14], popupAnchor: [0, -14]
|
|
});
|
|
|
|
const miskinOutIcon = L.divIcon({
|
|
className: 'custom-marker',
|
|
html: `<div class="marker-halo miskin-out"></div><div class="marker-icon-inner" style="filter: grayscale(1);">🏠</div>`,
|
|
iconSize: [28, 28], iconAnchor: [14, 14], popupAnchor: [0, -14]
|
|
});
|
|
|
|
try {
|
|
const [ir, mr] = await Promise.all([fetch('backend/read_ibadah.php'), fetch('backend/read_miskin.php')]);
|
|
ibadahData = (await ir.json()).data || [];
|
|
miskinData = (await mr.json()).data || [];
|
|
ibadahData.forEach(item => { ibadahRadiuses[item.id] = 0; });
|
|
renderAll();
|
|
} catch (e) { console.error('Error loading data:', e); }
|
|
}
|
|
|
|
window.updateRadius = function(id, val) {
|
|
ibadahRadiuses[id] = parseInt(val, 10) || 0;
|
|
syncIbadahPoints();
|
|
renderBuffers();
|
|
renderMiskin();
|
|
};
|
|
|
|
function syncIbadahPoints() {
|
|
ibadahPoints = [];
|
|
ibadahData.forEach(i => {
|
|
const lat = parseFloat(i.latitude), lng = parseFloat(i.longitude);
|
|
if (isNaN(lat) || isNaN(lng)) return;
|
|
ibadahPoints.push({ id: i.id, geom: [lng, lat], rad: ibadahRadiuses[i.id] || 0 });
|
|
});
|
|
}
|
|
|
|
function renderBuffers() {
|
|
map.eachLayer(l => { if (l.options && l.options.isBuffer) map.removeLayer(l); });
|
|
ibadahData.forEach(item => {
|
|
const r = ibadahRadiuses[item.id];
|
|
if (r > 0) {
|
|
const lat = parseFloat(item.latitude), lng = parseFloat(item.longitude);
|
|
if (!isNaN(lat) && !isNaN(lng)) {
|
|
L.circle([lat, lng], { radius: r, color: '#ef4444', fillColor: '#ef4444', fillOpacity: 0.12, weight: 2, isBuffer: true, dashArray: '6,4' }).addTo(map);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderAll() { renderIbadah(); renderBuffers(); renderMiskin(); }
|
|
|
|
function renderIbadah(autoZoom = false) {
|
|
ibadahLayer.clearLayers();
|
|
syncIbadahPoints();
|
|
const bounds = [];
|
|
const f = document.getElementById('search-ibadah').value.toLowerCase();
|
|
ibadahData.forEach(i => {
|
|
if (f && !i.nama.toLowerCase().includes(f)) return;
|
|
const lat = parseFloat(i.latitude), lng = parseFloat(i.longitude);
|
|
if (isNaN(lat) || isNaN(lng)) return;
|
|
const rVal = ibadahRadiuses[i.id] || 0;
|
|
|
|
const marker = L.marker([lat, lng], { icon: L.divIcon({ className: 'custom-marker', html: `<div class="marker-halo ibadah"></div><div class="marker-icon-inner">🕌</div>`, iconSize: [28, 28], iconAnchor: [14, 14], popupAnchor: [0, -14] }) })
|
|
.bindPopup(`
|
|
<strong>${i.nama}</strong><br>${i.alamat}<br><br>
|
|
<label style="font-size:11px;font-weight:600;color:#64748b;">Atur Radius Analisis (meter)</label>
|
|
<input type="range" min="0" max="5000" step="100" value="${rVal}" style="width:100%"
|
|
oninput="document.getElementById('rval-${i.id}').innerText=this.value"
|
|
onchange="updateRadius(${i.id}, this.value)">
|
|
<div style="font-size:11px;color:#94a3b8;margin-top:2px;" id="rval-${i.id}">${rVal}</div>
|
|
`)
|
|
.addTo(ibadahLayer);
|
|
bounds.push([lat, lng]);
|
|
});
|
|
|
|
if (autoZoom && f && bounds.length > 0) {
|
|
if (bounds.length === 1) map.flyTo(bounds[0], 16);
|
|
else map.fitBounds(bounds, { padding: [50, 50] });
|
|
}
|
|
}
|
|
|
|
function renderMiskin(autoZoom = false) {
|
|
miskinLayer.clearLayers();
|
|
const bounds = [];
|
|
const f = document.getElementById('search-miskin').value.toLowerCase();
|
|
miskinData.forEach(m => {
|
|
if (f && !m.nama_kk.toLowerCase().includes(f)) return;
|
|
const lat = parseFloat(m.latitude), lng = parseFloat(m.longitude);
|
|
if (isNaN(lat) || isNaN(lng)) return;
|
|
const pt = [lng, lat];
|
|
let inRadius = false;
|
|
ibadahPoints.forEach(ib => {
|
|
if (ib.rad > 0 && turf.distance(turf.point(ib.geom), turf.point(pt), { units: 'meters' }) <= ib.rad) inRadius = true;
|
|
});
|
|
|
|
const icon = L.divIcon({
|
|
className: 'custom-marker',
|
|
html: `<div class="marker-halo ${inRadius ? 'miskin-in' : 'miskin-out'}"></div><div class="marker-icon-inner" ${inRadius ? '' : 'style="filter: grayscale(1);"'}>🏠</div>`,
|
|
iconSize: [28, 28], iconAnchor: [14, 14], popupAnchor: [0, -14]
|
|
});
|
|
|
|
L.marker([lat, lng], { icon: icon })
|
|
.bindPopup('<strong>KK: ' + m.nama_kk + '</strong><br>' + (m.keterangan || '-') + '<br>Status: ' + (inRadius ? '🔴 Dalam Radius' : '⚫ Luar Radius'))
|
|
.addTo(miskinLayer);
|
|
bounds.push([lat, lng]);
|
|
});
|
|
|
|
if (autoZoom && f && bounds.length > 0) {
|
|
if (bounds.length === 1) map.flyTo(bounds[0], 17);
|
|
else map.fitBounds(bounds, { padding: [50, 50] });
|
|
}
|
|
}
|
|
|
|
document.getElementById('search-ibadah').addEventListener('input', e => {
|
|
const f = e.target.value.toLowerCase();
|
|
const resDiv = document.getElementById('results-ibadah');
|
|
if (!f) {
|
|
resDiv.classList.remove('active');
|
|
renderIbadah(false);
|
|
return;
|
|
}
|
|
const matched = ibadahData.filter(i => i.nama.toLowerCase().includes(f));
|
|
if (matched.length > 0) {
|
|
resDiv.innerHTML = matched.map(m => `
|
|
<div class="search-result-item" onclick="window.selectIbadah(${m.id})">
|
|
<span class="search-result-name">${m.nama}</span>
|
|
<span class="search-result-desc">${m.alamat}</span>
|
|
</div>
|
|
`).join('');
|
|
} else {
|
|
resDiv.innerHTML = '<div style="padding:8px 10px; color:#94a3b8; font-size:12px;">Tidak ditemukan.</div>';
|
|
}
|
|
resDiv.classList.add('active');
|
|
renderIbadah(false);
|
|
});
|
|
|
|
window.selectIbadah = function(id) {
|
|
const item = ibadahData.find(i => i.id == id);
|
|
if (!item) return;
|
|
document.getElementById('search-ibadah').value = item.nama;
|
|
document.getElementById('results-ibadah').classList.remove('active');
|
|
renderIbadah(true);
|
|
};
|
|
|
|
document.getElementById('search-miskin').addEventListener('input', e => {
|
|
const f = e.target.value.toLowerCase();
|
|
const resDiv = document.getElementById('results-miskin');
|
|
if (!f) {
|
|
resDiv.classList.remove('active');
|
|
renderMiskin(false);
|
|
return;
|
|
}
|
|
const matched = miskinData.filter(m => m.nama_kk.toLowerCase().includes(f));
|
|
if (matched.length > 0) {
|
|
resDiv.innerHTML = matched.map(m => `
|
|
<div class="search-result-item" onclick="window.selectMiskin(${m.id})">
|
|
<span class="search-result-name">KK: ${m.nama_kk}</span>
|
|
<span class="search-result-desc">${m.keterangan || 'Tanpa keterangan'}</span>
|
|
</div>
|
|
`).join('');
|
|
} else {
|
|
resDiv.innerHTML = '<div style="padding:8px 10px; color:#94a3b8; font-size:12px;">Tidak ditemukan.</div>';
|
|
}
|
|
resDiv.classList.add('active');
|
|
renderMiskin(false);
|
|
});
|
|
|
|
window.selectMiskin = function(id) {
|
|
const item = miskinData.find(i => i.id == id);
|
|
if (!item) return;
|
|
document.getElementById('search-miskin').value = item.nama_kk;
|
|
document.getElementById('results-miskin').classList.remove('active');
|
|
renderMiskin(true);
|
|
};
|
|
|
|
initMap();
|
|
</script>
|
|
</body>
|
|
</html>
|