feat: add layer visibility management for recent incidents and ensure proper initialization

sigap-website/app/_components/map/layers/layers.tsx

@@ -172,7 +172,6 @@ export default function Layers({
         }
     }, [map, crimeDataByDistrict])
 
-
     const animateExtrusionDown = () => {
         if (!map || !map.getLayer("district-extrusion") || !focusedDistrictId) {
             return
@@ -439,6 +438,29 @@ export default function Layers({
     // This ensures it's available when needed
     const shouldShowExtrusion = focusedDistrictId !== null && !isInteractingWithMarker.current
 
+    useEffect(() => {
+        if (!mapboxMap) return;
+
+        const ensureLayerVisibility = () => {
+            if (activeControl !== "recents") {
+                const recentLayerIds = [
+                    "very-recent-incidents-pulse",
+                    "recent-incidents-glow",
+                    "recent-incidents"
+                ];
+
+                recentLayerIds.forEach(layerId => {
+                    if (mapboxMap.getLayer(layerId)) {
+                        mapboxMap.setLayoutProperty(layerId, "visibility", "none");
+                    }
+                });
+            }
+        };
+
+        ensureLayerVisibility();
+
+    }, [activeControl, mapboxMap]);
+
     return (
         <>
             <DistrictFillLineLayer
@@ -468,8 +490,11 @@ export default function Layers({
                 />
             )}
 
-            {/* Recent Incidents Layer (24 hours) */}
-            <RecentIncidentsLayer visible={showRecentIncidents} map={mapboxMap} incidents={recentIncidents} />
+            <RecentIncidentsLayer
+                visible={showRecentIncidents}
+                map={mapboxMap}
+                incidents={recentIncidents}
+            />
 
             <HeatmapLayer
                 crimes={crimes}

sigap-website/app/_components/map/layers/recent-incidents-layer.tsx

@@ -46,6 +46,9 @@ export default function RecentIncidentsLayer({ visible = false, map, incidents =
     const animationFrameRef = useRef<number | null>(null)
     const [selectedIncident, setSelectedIncident] = useState<IIncidentDetails | null>(null)
 
+    // Add a ref to track if layers are initialized
+    const layersInitialized = useRef(false);
+
     // Filter incidents from the last 24 hours
     const recentIncidents = incidents.filter((incident) => {
         if (!incident.timestamp) return false
@@ -137,6 +140,42 @@ export default function RecentIncidentsLayer({ visible = false, map, incidents =
         setSelectedIncident(null)
     }, [map])
 
+    // This effect handles visibility changes and ensures markers are shown/hidden properly
+    useEffect(() => {
+        if (!map) return;
+
+        // Function to update layer visibility
+        const updateLayerVisibility = () => {
+            if (!map.isStyleLoaded()) return;
+
+            const layers = [
+                "very-recent-incidents-pulse",
+                "recent-incidents-glow",
+                "recent-incidents"
+            ];
+
+            layers.forEach(layerId => {
+                if (map.getLayer(layerId)) {
+                    map.setLayoutProperty(
+                        layerId,
+                        "visibility",
+                        visible ? "visible" : "none"
+                    );
+                }
+            });
+
+            // If closing, also close any open popups
+            if (!visible) {
+                setSelectedIncident(null);
+            }
+        };
+
+        // If layers are initialized, update their visibility
+        if (layersInitialized.current) {
+            updateLayerVisibility();
+        }
+    }, [visible, map]);
+
     useEffect(() => {
         if (!map || !visible) return
 
@@ -364,6 +403,9 @@ export default function RecentIncidentsLayer({ visible = false, map, incidents =
                 // Ensure click handler is properly registered
                 map.off("click", "recent-incidents", handleIncidentClick)
                 map.on("click", "recent-incidents", handleIncidentClick)
+
+                // Mark layers as initialized
+                layersInitialized.current = true;
             } catch (error) {
                 console.error("Error setting up recent incidents layer:", error)
             }