feat: implement web GIS layout with sidebar, custom UI controls, and modular map feature integration

assets/js/features/draw_control.js

@@ -37,36 +37,33 @@ map.on(L.Draw.Event.DRAWSTOP, function (e) {
         isDrawingMode = false; 
         window.currentDrawMode = null;
         window.activeDrawHandler = null;
-        deactivateAddMode(); 
+        window.deactivateAddMode(); 
     }, 200);
 });
 
 window.activateDraw = function(type) {
-    // Toggle: cek dari class button, lebih reliable daripada state variable
-    const btnJalan = document.getElementById('btnMenuJalan');
-    const btnParsil = document.getElementById('btnMenuParsil');
-    const isJalanActive = btnJalan.classList.contains('active');
-    const isParsilActive = btnParsil.classList.contains('active');
-    
-    if ((type === 'polyline' && isJalanActive) || (type === 'polygon' && isParsilActive)) {
+    console.log("-> activateDraw dipanggil untuk tipe:", type);
+
+    // Toggle: jika mode yang sama ditekan lagi, batalkan
+    if (window.currentDrawMode === type) {
+        console.log("Mode", type, "sudah aktif, membatalkan...");
         window.deactivateAddMode();
         return;
     }
     
-    deactivateAddMode();
+    window.deactivateAddMode();
     window.currentDrawMode = type;
+    console.log("Mengaktifkan mode menggambar:", type);
     
     if (type === 'polyline') {
         const handler = new L.Draw.Polyline(map, drawControl.options.draw.polyline);
         handler.enable();
         window.activeDrawHandler = handler;
-        btnJalan.classList.add('active');
         if (window.cursorTooltip) window.cursorTooltip.textContent = 'Klik untuk menggambar Jalan';
     } else if (type === 'polygon') {
         const handler = new L.Draw.Polygon(map, drawControl.options.draw.polygon);
         handler.enable();
         window.activeDrawHandler = handler;
-        btnParsil.classList.add('active');
         if (window.cursorTooltip) window.cursorTooltip.textContent = 'Klik untuk menggambar Parsil';
     }
 };

assets/js/features/jalan.js

@@ -105,6 +105,7 @@ window.saveEditJalan = function(id, namaId, statusId) {
     .then(data => {
         if(data.status === 'success') {
             map.closePopup();
+            closeModal();
             loadJalan();
         } else {
             alert(data.message);

assets/js/features/kemiskinan.js

@@ -63,7 +63,7 @@ map.on('mouseup', function(e) {
         isResizing = false;
         map.dragging.enable();
         if (resizingIbadah) {
-            updateIbadah(resizingIbadah.id, resizingIbadah.nama, resizingIbadah.alamat, resizingIbadah.radius, resizingIbadah.lat, resizingIbadah.lng);
+            updateIbadah(resizingIbadah.id, resizingIbadah.nama, resizingIbadah.jenis, resizingIbadah.alamat, resizingIbadah.radius, resizingIbadah.lat, resizingIbadah.lng);
         }
         resizingCircle = null;
         resizingIbadah = null;
@@ -89,11 +89,17 @@ function loadRumahIbadah() {
 }
 
 function addIbadahMarker(item) {
-    const marker = L.marker([item.lat, item.lng], { icon: makeIbadahIcon(item.jenis), draggable: true });
+    const lat = parseFloat(item.lat);
+    const lng = parseFloat(item.lng);
+    const radius = parseFloat(item.radius) || 100; // fallback if invalid
+
+    if (isNaN(lat) || isNaN(lng)) return;
+
+    const marker = L.marker([lat, lng], { icon: makeIbadahIcon(item.jenis), draggable: true });
     
     // Lingkaran radius
-    const circle = L.circle([item.lat, item.lng], {
-        radius: item.radius,
+    const circle = L.circle([lat, lng], {
+        radius: radius,
         color: '#ff7800',
         weight: 2,
         fillColor: '#ff7800',
@@ -153,7 +159,7 @@ function addIbadahMarker(item) {
         item.lat = newPos.lat;
         item.lng = newPos.lng;
         // Update ke DB
-        updateIbadah(item.id, item.nama, item.alamat, item.radius, newPos.lat, newPos.lng);
+        updateIbadah(item.id, item.nama, item.jenis, item.alamat, item.radius, newPos.lat, newPos.lng);
     });
 
     rumahIbadahLayer.addLayer(circle);
@@ -340,7 +346,11 @@ function updateIbadah(id, nama, jenis, alamat, radius, lat, lng) {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ id, nama, jenis, alamat, radius, lat, lng })
     }).then(res => res.json()).then(data => {
-        if(data.status === 'success') { map.closePopup(); loadRumahIbadah(); }
+        if(data.status === 'success') { 
+            if (typeof closeModal === 'function') closeModal();
+            map.closePopup(); 
+            loadRumahIbadah(); 
+        }
     });
 }
 
@@ -375,7 +385,11 @@ function loadPendudukMiskin() {
 }
 
 function addMiskinMarker(item) {
-    const marker = L.marker([item.lat, item.lng], { icon: makeMiskinIcon(false), draggable: true });
+    const lat = parseFloat(item.lat);
+    const lng = parseFloat(item.lng);
+    if (isNaN(lat) || isNaN(lng)) return;
+
+    const marker = L.marker([lat, lng], { icon: makeMiskinIcon(false), draggable: true });
     marker.miskinData = item;
     
     const d = item;

assets/js/features/parsil.js

@@ -97,6 +97,7 @@ window.saveEditParsil = function(id, namaId, statusId) {
     .then(data => {
         if(data.status === 'success') {
             map.closePopup();
+            closeModal();
             loadParsil();
         } else {
             alert(data.message);

assets/js/features/spbu.js

@@ -175,6 +175,7 @@ function updateSpbu(id, nama, no_wa, is_24_jam, lat, lng) {
     .then(data => {
         if(data.status === 'success') {
             map.closePopup();
+            closeModal();
             loadSpbu();
         } else {
             alert(data.message);

assets/js/map.js

@@ -22,6 +22,10 @@ const geoJsonLayer = L.featureGroup().addTo(map);
 const searchInput = document.getElementById('searchInput');
 const searchClear = document.getElementById('searchClear');
 
+searchInput.addEventListener('focus', function() {
+    if (typeof window.deactivateAddMode === 'function') window.deactivateAddMode();
+});
+
 searchInput.addEventListener('input', function() {
     const val = this.value.toLowerCase();
     if (val.length > 0) {
@@ -111,6 +115,7 @@ const layerBtn   = document.getElementById('layerBtn');
 const layerPanel = document.getElementById('layerPanel');
 
 layerBtn.addEventListener('click', function() {
+    if (typeof window.deactivateAddMode === 'function') window.deactivateAddMode();
     layerPanel.style.display = layerPanel.style.display === 'block' ? 'none' : 'block';
 });
 

assets/js/panel.js

@@ -55,8 +55,10 @@
 
     // ---- Open / Close Panel ----
     function openPanel(panel) {
+        if (typeof window.deactivateAddMode === 'function') window.deactivateAddMode();
         activePanel = panel;
         rightPanel.classList.add('open');
+        document.body.classList.add('right-panel-open');
         document.querySelectorAll('.sidebar-btn').forEach(b => b.classList.remove('active'));
         const activeBtn = document.querySelector(`.sidebar-btn[data-panel="${panel}"]`);
         if (activeBtn) activeBtn.classList.add('active');
@@ -64,8 +66,10 @@
     }
 
     function closePanel() {
+        if (typeof window.deactivateAddMode === 'function') window.deactivateAddMode();
         activePanel = null;
         rightPanel.classList.remove('open');
+        document.body.classList.remove('right-panel-open');
         document.querySelectorAll('.sidebar-btn').forEach(b => b.classList.remove('active'));
     }