@@ -224,6 +224,7 @@ export default function EWSAlertLayer({
{incident.location.district}
{incident.location.address}
Reported by: {incident.reporter.name}
+
Auto-closing in 10s
@@ -315,30 +316,6 @@ export default function EWSAlertLayer({
// Create status indicator element if it doesn't exist
let statusContainer = document.getElementById('ews-status-indicator');
- if (!statusContainer) {
- statusContainer = document.createElement('div');
- statusContainer.id = 'ews-status-indicator';
- statusContainer.className = 'absolute top-16 left-1/2 transform -translate-x-1/2 z-50';
- map.getContainer().appendChild(statusContainer);
-
- // Use React for the status indicator
- const root = createRoot(statusContainer);
- root.render(
-
-
-
- {ewsStatus === 'alert'
- ? `Alert: ${activeIncidents.length} Active Emergencies`
- : 'System Active'}
-
-
- );
- }
-
// Cleanup function
return () => {
if (statusContainer && statusContainer.parentNode) {
diff --git a/sigap-website/app/_components/map/layers/layers.tsx b/sigap-website/app/_components/map/layers/layers.tsx
index fb08e78..a6bbf6e 100644
--- a/sigap-website/app/_components/map/layers/layers.tsx
+++ b/sigap-website/app/_components/map/layers/layers.tsx
@@ -1,6 +1,6 @@
"use client"
-import { useState, useRef, useEffect, useCallback } from "react"
+import { useState, useRef, useEffect, useCallback, act } from "react"
import { useMap } from "react-map-gl/mapbox"
import { BASE_BEARING, BASE_PITCH, BASE_ZOOM, MAPBOX_TILESET_ID } from "@/app/_utils/const/map"
import DistrictPopup from "../pop-up/district-popup"
@@ -9,7 +9,7 @@ import ClusterLayer from "./cluster-layer"
import HeatmapLayer from "./heatmap-layer"
import TimelineLayer from "./timeline-layer"
-import type { ICrimes } from "@/app/_utils/types/crimes"
+import type { ICrimes, IIncidentLogs } from "@/app/_utils/types/crimes"
import type { IDistrictFeature } from "@/app/_utils/types/map"
import { createFillColorExpression, processCrimeDataByDistrict } from "@/app/_utils/map"
import UnclusteredPointLayer from "./uncluster-layer"
@@ -29,6 +29,7 @@ import PanicButtonDemo from "../controls/panic-button-demo"
import { IIncidentLog } from "@/app/_utils/types/ews"
import { addMockIncident, getAllIncidents, resolveIncident } from "@/app/_utils/mock/ews-data"
+import RecentIncidentsLayer from "./recent-crimes-layer"
// Interface for crime incident
interface ICrimeIncident {
@@ -67,6 +68,7 @@ interface LayersProps {
visible?: boolean
crimes: ICrimes[]
units?: IUnits[]
+ recentIncidents: IIncidentLogs[]
year: string
month: string
filterCategory: string | "all"
@@ -79,6 +81,7 @@ interface LayersProps {
export default function Layers({
visible = true,
crimes,
+ recentIncidents,
units,
year,
month,
@@ -412,14 +415,11 @@ export default function Layers({
if (!visible) return null
- const showDistrictLayer = activeControl === "incidents"
+ const crimesVisible = activeControl === "incidents"
const showHeatmapLayer = activeControl === "heatmap"
- const showClustersLayer = activeControl === "clusters"
const showUnitsLayer = activeControl === "units"
const showTimelineLayer = activeControl === "timeline"
-
const showDistrictFill = activeControl === "incidents" || activeControl === "clusters"
-
const showIncidentMarkers = activeControl !== "heatmap" && activeControl !== "timeline"
return (
@@ -440,6 +440,13 @@ export default function Layers({
onDistrictClick={handleDistrictClick}
/>
+ {/* Recent Crimes Layer for showing crime data from the last 24 hours */}
+
+
+
void;
+}
+
+export default function RecentCrimesLayer({
+ map,
+ incidents,
+ visible,
+ onIncidentClick,
+}: RecentCrimesLayerProps) {
+ const markersRef = useRef>(new Map());
+
+ // Filter incidents to only show those from the last 24 hours
+ const recentIncidents = incidents.filter(incident => {
+ const incidentDate = new Date(incident.timestamp);
+ const now = new Date();
+ const timeDiff = now.getTime() - incidentDate.getTime();
+ const hoursDiff = timeDiff / (1000 * 60 * 60);
+ return hoursDiff <= 24;
+ });
+
+ // Create markers for each incident
+ useEffect(() => {
+ if (!map || !visible) {
+ // Remove all markers if layer is not visible
+ markersRef.current.forEach(marker => marker.remove());
+ return;
+ }
+
+ // Track existing incident IDs to avoid recreating markers
+ const existingIds = new Set(Array.from(markersRef.current.keys()));
+
+ // Add markers for each recent incident
+ recentIncidents.forEach(incident => {
+ existingIds.delete(incident.id);
+
+ if (!markersRef.current.has(incident.id)) {
+ // Create marker element
+ const el = document.createElement('div');
+ el.className = 'crime-marker';
+
+ // Style based on severity
+ const colors = {
+ high: 'bg-red-500',
+ medium: 'bg-amber-500',
+ low: 'bg-blue-500'
+ };
+
+ const markerRoot = createRoot(el);
+ markerRoot.render(
+
+
+
+ );
+
+ // Create popup content
+ const popupEl = document.createElement('div');
+ const popupRoot = createRoot(popupEl);
+
+ popupRoot.render(
+
+
+
+ {incident.category}
+
+
+
+ {formatDistanceToNow(new Date(incident.timestamp), { addSuffix: true })}
+
+
+
+
{incident.district}
+
{incident.address}
+
+
{incident.description}
+
+
+ ID: {incident.id.substring(0, 8)}...
+
+
+