update besar besaran

2026-06-12 16:36:31 +07:00
parent 515c830342
commit 017fe392bc
63 changed files with 4219 additions and 75 deletions
@@ -0,0 +1,63 @@
+/* ═══════════════════════════════════════════════════════════
+   13. MAP RENDER
+═══════════════════════════════════════════════════════════ */
+function renderMap(){
+  const db=Store.allDb();
+  // SPBU
+  App._groups.spbu.clearLayers();
+  db.spbu.forEach(r=>{
+    const m=L.circleMarker([r.lat,r.lng],{radius:9,fillColor:CFG.spbu.color(r),color:'#fff',weight:2,fillOpacity:1});
+    m.bindPopup(Popup.spbu(r),{maxWidth:320});
+    m.on('click',()=>highlightCard(r.id));
+    App._groups.spbu.addLayer(m);
+  });
+  // Warga
+  App._groups.warga.clearLayers();
+  db.warga.forEach(r=>{
+    const clr=CFG.warga.color(r);
+    // Check if in any RI radius
+    const inRadius=db.rumahIbadah.some(hub=>{
+      if(!hub.lat) return false;
+      const d=L.latLng(r.lat,r.lng).distanceTo(L.latLng(hub.lat,hub.lng));
+      return d<=(parseFloat(hub.radius)||300);
+    });
+    const iconHtml=`<div style="width:22px;height:22px;background:${clr};border:2px solid #fff;border-radius:50%;
+      display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.4);
+      font-size:11px;line-height:1">👨‍👩‍👧</div>${inRadius?'':'<div style="position:absolute;top:-4px;right:-4px;width:10px;height:10px;background:#f05c5c;border-radius:50%;border:1px solid #fff"></div>'}`;
+    const icon=L.divIcon({html:`<div style="position:relative">${iconHtml}</div>`,className:'',iconSize:[22,22],iconAnchor:[11,11]});
+    const m=L.marker([r.lat,r.lng],{icon});
+    m.bindPopup(Popup.warga(r),{maxWidth:360});
+    m.on('click',()=>highlightCard(r.id));
+    App._groups.warga.addLayer(m);
+  });
+  // Rumah Ibadah
+  App._groups.rumahIbadah.clearLayers();
+  db.rumahIbadah.forEach(r=>{
+    const clr=CFG.rumahIbadah.color(r);
+    const m=L.circleMarker([r.lat,r.lng],{radius:10,fillColor:clr,color:'#fff',weight:2.5,fillOpacity:1});
+    m.bindPopup(Popup.rumahIbadah(r),{maxWidth:320});
+    m.on('click',()=>highlightCard(r.id));
+    App._groups.rumahIbadah.addLayer(m);
+    // Always draw radius 300m coverage circle
+    const radiusM=parseFloat(r.radius)||300;
+    const ring=L.circle([r.lat,r.lng],{radius:radiusM,color:clr,weight:1.5,fillColor:clr,fillOpacity:.06,dashArray:'6 4'});
+    App._groups.rumahIbadah.addLayer(ring);
+  });
+  // Jalan
+  App._groups.jalan.clearLayers();
+  db.jalan.forEach(r=>{
+    const l=L.polyline(r.coords,{color:CFG.jalan.color(r),weight:4,opacity:.9});
+    l.bindPopup(Popup.jalan(r),{maxWidth:300});
+    l.on('click',()=>highlightCard(r.id));
+    App._groups.jalan.addLayer(l);
+  });
+  // Parsil
+  App._groups.parsil.clearLayers();
+  db.parsil.forEach(r=>{
+    const clr=CFG.parsil.color(r);
+    const p=L.polygon(r.coords,{color:clr,weight:2,fillColor:clr,fillOpacity:.2});
+    p.bindPopup(Popup.parsil(r),{maxWidth:300});
+    p.on('click',()=>highlightCard(r.id));
+    App._groups.parsil.addLayer(p);
+  });
+}