diyoanggara
/
MIF_E31221222
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: fix bug district pop up always show while selected district is not focus

This commit is contained in:
vergiLgood1 2025-05-14 10:06:09 +07:00
parent 834d4b02cf
commit 9c6e005839
9 changed files with 1915 additions and 1931 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
sigap-website/app/_components/map/layers/cluster-layer.tsx
View File

@ -27,6 +27,7 @@ export default function ClusterLayer({
(e: any) => {
if (!map) return
// Stop event propagation to prevent district layer from handling this click
e.originalEvent.stopPropagation()
e.preventDefault()
@ -219,6 +220,7 @@ export default function ClusterLayer({
const handleCrimePointClick = (e: any) => {
if (!map) return
// Stop event propagation
e.originalEvent.stopPropagation()
e.preventDefault()
@ -423,6 +425,7 @@ export default function ClusterLayer({
const handleCrimePointClick = (e: any) => {
if (!map) return
// Stop event propagation
e.originalEvent.stopPropagation()
e.preventDefault()
@ -504,19 +507,19 @@ export default function ClusterLayer({
map.off("click", "clusters", handleClusterClick)
if (sourceType === "cbu" && map.getLayer("crime-points")) {
// Define properly typed event handlers
const crimePointsMouseEnter = function () {
const crimePointsMouseEnter = () => {
if (map && map.getCanvas()) {
map.getCanvas().style.cursor = "pointer";
}
};
const crimePointsMouseLeave = function () {
const crimePointsMouseLeave = () => {
if (map && map.getCanvas()) {
map.getCanvas().style.cursor = "";
}
};
const crimePointsClick = function (e: mapboxgl.MapMouseEvent) {
const crimePointsClick = (e: mapboxgl.MapMouseEvent) => {
if (!map) return;
e.originalEvent.stopPropagation();

94
sigap-website/app/_components/map/layers/district-extrusion-layer.tsx
View File

@ -1,7 +1,7 @@
"use client"
import { getCrimeRateColor } from "@/app/_utils/map"
import { IExtrusionLayerProps } from "@/app/_utils/types/map"
import type { IExtrusionLayerProps } from "@/app/_utils/types/map"
import { useEffect, useRef } from "react"
export default function DistrictExtrusionLayer({
@ -21,6 +21,8 @@ export default function DistrictExtrusionLayer({
useEffect(() => {
if (!map || !visible) return
console.log("DistrictExtrusionLayer effect running, focusedDistrictId:", focusedDistrictId)
const onStyleLoad = () => {
if (!map) return
@ -43,8 +45,8 @@ export default function DistrictExtrusionLayer({
// Make sure the districts source exists
if (!map.getSource("districts")) {
if (!tilesetId) {
console.error("No tileset ID provided for districts source");
return;
console.error("No tileset ID provided for districts source")
return
}
map.addSource("districts", {
@ -84,13 +86,15 @@ export default function DistrictExtrusionLayer({
},
filter: ["==", ["get", "kode_kec"], focusedDistrictId || ""],
},
firstSymbolId
firstSymbolId,
)
extrusionCreatedRef.current = true
console.log("District extrusion layer created")
// If a district is focused, start the animation
if (focusedDistrictId) {
console.log("Starting animation for district:", focusedDistrictId)
lastFocusedDistrictRef.current = focusedDistrictId
animateExtrusion()
}
@ -111,14 +115,16 @@ export default function DistrictExtrusionLayer({
animationRef.current = null
}
}
}, [map, visible, tilesetId])
}, [map, visible, tilesetId, focusedDistrictId, crimeDataByDistrict])
// Update filter and color when focused district changes
useEffect(() => {
if (!map || !map.getLayer("district-extrusion")) return
console.log("Updating district extrusion for district:", focusedDistrictId)
// Skip unnecessary updates if nothing has changed
if (lastFocusedDistrictRef.current === focusedDistrictId) return;
if (lastFocusedDistrictRef.current === focusedDistrictId) return
// If we're unfocusing a district
if (!focusedDistrictId) {
@ -131,17 +137,17 @@ export default function DistrictExtrusionLayer({
// Animate height down
const animateHeightDown = () => {
if (!map || !map.getLayer("district-extrusion")) return;
if (!map || !map.getLayer("district-extrusion")) return
let currentHeight = 800;
const duration = 500;
const startTime = performance.now();
const currentHeight = 800
const duration = 500
const startTime = performance.now()
const animate = (time: number) => {
const elapsed = time - startTime;
const progress = Math.min(elapsed / duration, 1);
const easedProgress = progress * (2 - progress); // easeOutQuad
const height = 800 - (800 * easedProgress);
const elapsed = time - startTime
const progress = Math.min(elapsed / duration, 1)
const easedProgress = progress * (2 - progress) // easeOutQuad
const height = 800 - 800 * easedProgress
try {
map.setPaintProperty("district-extrusion", "fill-extrusion-height", [
@ -149,10 +155,10 @@ export default function DistrictExtrusionLayer({
["has", "kode_kec"],
["match", ["get", "kode_kec"], lastFocusedDistrictRef.current || "", height, 0],
0,
]);
])
if (progress < 1) {
animationRef.current = requestAnimationFrame(animate);
animationRef.current = requestAnimationFrame(animate)
} else {
// Reset when animation completes
map.setPaintProperty("district-extrusion", "fill-extrusion-height", [
@ -160,36 +166,36 @@ export default function DistrictExtrusionLayer({
["has", "kode_kec"],
["match", ["get", "kode_kec"], "", 0, 0],
0,
]);
map.setFilter("district-extrusion", ["==", ["get", "kode_kec"], ""]);
])
map.setFilter("district-extrusion", ["==", ["get", "kode_kec"], ""])
lastFocusedDistrictRef.current = null;
lastFocusedDistrictRef.current = null
// Ensure bearing is reset
map.setBearing(0);
map.setBearing(0)
}
} catch (error) {
console.error("Error animating extrusion down:", error);
console.error("Error animating extrusion down:", error)
if (animationRef.current) {
cancelAnimationFrame(animationRef.current);
animationRef.current = null;
cancelAnimationFrame(animationRef.current)
animationRef.current = null
}
}
}
};
if (animationRef.current) {
cancelAnimationFrame(animationRef.current);
cancelAnimationFrame(animationRef.current)
}
animationRef.current = requestAnimationFrame(animate)
}
animationRef.current = requestAnimationFrame(animate);
};
animateHeightDown();
return;
animateHeightDown()
return
}
try {
// Update filter for the new district
map.setFilter("district-extrusion", ["==", ["get", "kode_kec"], focusedDistrictId]);
map.setFilter("district-extrusion", ["==", ["get", "kode_kec"], focusedDistrictId])
// Update the extrusion color
map.setPaintProperty("district-extrusion", "fill-extrusion-color", [
@ -203,7 +209,7 @@ export default function DistrictExtrusionLayer({
"transparent",
],
"transparent",
]);
])
// Reset height for animation
map.setPaintProperty("district-extrusion", "fill-extrusion-height", [
@ -211,27 +217,27 @@ export default function DistrictExtrusionLayer({
["has", "kode_kec"],
["match", ["get", "kode_kec"], focusedDistrictId, 0, 0],
0,
]);
])
// Store current focused district
lastFocusedDistrictRef.current = focusedDistrictId;
lastFocusedDistrictRef.current = focusedDistrictId
// Stop any existing animations and restart
if (rotationAnimationRef.current) {
cancelAnimationFrame(rotationAnimationRef.current);
rotationAnimationRef.current = null;
cancelAnimationFrame(rotationAnimationRef.current)
rotationAnimationRef.current = null
}
if (animationRef.current) {
cancelAnimationFrame(animationRef.current);
animationRef.current = null;
cancelAnimationFrame(animationRef.current)
animationRef.current = null
}
// Start animation with small delay to ensure smooth transition
setTimeout(() => {
animateExtrusion();
}, 100);
console.log("Starting animation after district update")
animateExtrusion()
}, 100)
} catch (error) {
console.error("Error updating district extrusion:", error)
}
@ -253,7 +259,12 @@ export default function DistrictExtrusionLayer({
// Animate extrusion height
const animateExtrusion = () => {
if (!map || !map.getLayer("district-extrusion") || !focusedDistrictId) return
if (!map || !map.getLayer("district-extrusion") || !focusedDistrictId) {
console.log("Cannot animate extrusion: missing map, layer, or focusedDistrictId")
return
}
console.log("Animating extrusion for district:", focusedDistrictId)
if (animationRef.current) {
cancelAnimationFrame(animationRef.current)
@ -282,6 +293,7 @@ export default function DistrictExtrusionLayer({
if (progress < 1) {
animationRef.current = requestAnimationFrame(animate)
} else {
console.log("Extrusion animation complete, starting rotation")
// Start rotation after extrusion completes
startRotation()
}

38
sigap-website/app/_components/map/layers/district-layer.tsx
View File

@ -2,10 +2,9 @@
import { BASE_BEARING, BASE_PITCH, BASE_ZOOM } from "@/app/_utils/const/map"
import { createFillColorExpression, processDistrictFeature } from "@/app/_utils/map"
import { IDistrictLayerProps } from "@/app/_utils/types/map"
import type { IDistrictLayerProps } from "@/app/_utils/types/map"
import { useEffect } from "react"
export default function DistrictFillLineLayer({
visible = true,
map,
@ -21,16 +20,27 @@ export default function DistrictFillLineLayer({
crimeDataByDistrict,
showFill = true,
activeControl,
}: IDistrictLayerProps & { onDistrictClick?: (district: any) => void }) { // Extend the type inline
}: IDistrictLayerProps & { onDistrictClick?: (district: any) => void }) {
// Extend the type inline
useEffect(() => {
if (!map || !visible) return
const handleDistrictClick = (e: any) => {
// First check if the click was on a marker or cluster
const incidentFeatures = map.queryRenderedFeatures(e.point, {
layers: ["unclustered-point", "clusters"],
layers: [
"unclustered-point",
"clusters",
"crime-points",
"units-points",
"incidents-points",
"timeline-markers",
"recent-incidents",
],
})
if (incidentFeatures && incidentFeatures.length > 0) {
// Click was on a marker or cluster, so don't process it as a district click
return
}
@ -164,7 +174,7 @@ export default function DistrictFillLineLayer({
const fillColorExpression = createFillColorExpression(focusedDistrictId, crimeDataByDistrict)
// Determine fill opacity based on active control
const fillOpacity = getFillOpacity(activeControl, showFill);
const fillOpacity = getFillOpacity(activeControl, showFill)
if (!map.getLayer("district-fill")) {
map.addLayer(
@ -215,8 +225,8 @@ export default function DistrictFillLineLayer({
map.setPaintProperty("district-fill", "fill-color", fillColorExpression as any)
// Update fill opacity when active control changes
const fillOpacity = getFillOpacity(activeControl, showFill);
map.setPaintProperty("district-fill", "fill-opacity", fillOpacity);
const fillOpacity = getFillOpacity(activeControl, showFill)
map.setPaintProperty("district-fill", "fill-opacity", fillOpacity)
}
}
} catch (error) {
@ -254,15 +264,15 @@ export default function DistrictFillLineLayer({
// Add an effect to update the fill color and opacity whenever relevant props change
useEffect(() => {
if (!map || !map.getLayer("district-fill")) return;
if (!map || !map.getLayer("district-fill")) return
try {
const fillColorExpression = createFillColorExpression(focusedDistrictId, crimeDataByDistrict)
map.setPaintProperty("district-fill", "fill-color", fillColorExpression as any)
// Update fill opacity when active control changes
const fillOpacity = getFillOpacity(activeControl, showFill);
map.setPaintProperty("district-fill", "fill-opacity", fillOpacity);
const fillOpacity = getFillOpacity(activeControl, showFill)
map.setPaintProperty("district-fill", "fill-opacity", fillOpacity)
} catch (error) {
console.error("Error updating district fill colors or opacity:", error)
}
@ -273,18 +283,18 @@ export default function DistrictFillLineLayer({
// Helper function to determine fill opacity based on active control
function getFillOpacity(activeControl?: string, showFill?: boolean): number {
if (!showFill) return 0;
if (!showFill) return 0
// Full opacity for incidents and clusters
if (activeControl === "incidents" || activeControl === "clusters") {
return 0.6;
return 0.6
}
// Low opacity for timeline to show markers but still see district boundaries
if (activeControl === "timeline") {
return 0.1;
return 0.1
}
// No fill for other controls, but keep boundaries visible
return 0;
return 0
}

158
sigap-website/app/_components/map/layers/layers.tsx
View File

@ -1,6 +1,6 @@
"use client"
import { useState, useRef, useEffect, useCallback, act } from "react"
import { useState, useRef, useEffect, useCallback } 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"
@ -20,17 +20,13 @@ import type { IUnits } from "@/app/_utils/types/units"
import UnitsLayer from "./units-layer"
import DistrictFillLineLayer from "./district-layer"
import CrimePopup from "../pop-up/crime-popup"
import TimeZonesDisplay from "./timezone"
import TimezoneLayer from "./timezone"
import FaultLinesLayer from "./fault-lines"
import CoastlineLayer from "./coastline"
import EWSAlertLayer from "./ews-alert-layer"
import PanicButtonDemo from "../controls/panic-button-demo"
import { IIncidentLog } from "@/app/_utils/types/ews"
import type { IIncidentLog } from "@/app/_utils/types/ews"
import { addMockIncident, getAllIncidents, resolveIncident } from "@/app/_utils/mock/ews-data"
import HistoricalIncidentsLayer from "./historical-incidents-layer"
import RecentIncidentsLayer from "./recent-incidents-layer"
// Interface for crime incident
@ -108,40 +104,44 @@ export default function Layers({
const [selectedIncident, setSelectedIncident] = useState<ICrimeIncident | null>(null)
const [focusedDistrictId, setFocusedDistrictId] = useState<string | null>(null)
const selectedDistrictRef = useRef<IDistrictFeature | null>(null)
// Track if we're currently interacting with a marker to prevent district selection
const isInteractingWithMarker = useRef<boolean>(false)
const crimeDataByDistrict = processCrimeDataByDistrict(crimes)
const [ewsIncidents, setEwsIncidents] = useState<IIncidentLog[]>([]);
const [showPanicDemo, setShowPanicDemo] = useState(true);
const [ewsIncidents, setEwsIncidents] = useState<IIncidentLog[]>([])
const [showPanicDemo, setShowPanicDemo] = useState(true)
const [displayPanicDemo, setDisplayPanicDemo] = useState(showEWS && showPanicDemo)
useEffect(() => {
setEwsIncidents(getAllIncidents());
}, []);
setEwsIncidents(getAllIncidents())
}, [])
const handleTriggerAlert = useCallback((priority: 'high' | 'medium' | 'low') => {
const newIncident = addMockIncident({ priority });
setEwsIncidents(getAllIncidents());
}, []);
const handleTriggerAlert = useCallback((priority: "high" | "medium" | "low") => {
const newIncident = addMockIncident({ priority })
setEwsIncidents(getAllIncidents())
}, [])
const handleResolveIncident = useCallback((id: string) => {
resolveIncident(id);
setEwsIncidents(getAllIncidents());
}, []);
resolveIncident(id)
setEwsIncidents(getAllIncidents())
}, [])
const handleResolveAllAlerts = useCallback(() => {
ewsIncidents.forEach(incident => {
if (incident.status === 'active') {
resolveIncident(incident.id);
ewsIncidents.forEach((incident) => {
if (incident.status === "active") {
resolveIncident(incident.id)
}
});
setEwsIncidents(getAllIncidents());
}, [ewsIncidents]);
})
setEwsIncidents(getAllIncidents())
}, [ewsIncidents])
const handlePopupClose = useCallback(() => {
selectedDistrictRef.current = null
setSelectedDistrict(null)
setSelectedIncident(null)
setFocusedDistrictId(null)
isInteractingWithMarker.current = false
if (map) {
map.easeTo({
@ -180,8 +180,16 @@ export default function Layers({
(feature: IDistrictFeature) => {
console.log("District clicked:", feature)
// If we're currently interacting with a marker, don't process district click
if (isInteractingWithMarker.current) {
console.log("Ignoring district click because we're interacting with a marker")
return
}
// Clear any existing incident selection
setSelectedIncident(null)
// Set the district as selected
setSelectedDistrict(feature)
selectedDistrictRef.current = feature
setFocusedDistrictId(feature.id)
@ -196,6 +204,7 @@ export default function Layers({
easing: (t) => t * (2 - t),
})
// Hide clusters when focusing on a district
if (map.getLayer("clusters")) {
map.getMap().setLayoutProperty("clusters", "visibility", "none")
}
@ -246,6 +255,9 @@ export default function Layers({
return
}
// Set the marker interaction flag to prevent district selection
isInteractingWithMarker.current = true
const incidentId = customEvent.detail.id || customEvent.detail.incidentId || customEvent.detail.incident_id
if (!incidentId) {
@ -300,21 +312,29 @@ export default function Layers({
if (!foundIncident) {
console.error("Could not find incident with ID:", incidentId)
isInteractingWithMarker.current = false
return
}
if (!foundIncident.latitude || !foundIncident.longitude) {
console.error("Found incident has invalid coordinates:", foundIncident)
isInteractingWithMarker.current = false
return
}
console.log("Setting selected incident:", foundIncident)
// Clear district selection when showing an incident
setSelectedDistrict(null)
selectedDistrictRef.current = null
setFocusedDistrictId(null)
setSelectedIncident(foundIncident)
// Reset the marker interaction flag after a delay
setTimeout(() => {
isInteractingWithMarker.current = false
}, 1000)
}
mapboxMap.getCanvas().addEventListener("incident_click", handleIncidentClickEvent as EventListener)
@ -331,6 +351,31 @@ export default function Layers({
}
}, [mapboxMap, crimes, setFocusedDistrictId])
// Add a listener for unit clicks to set the marker interaction flag
useEffect(() => {
if (!mapboxMap) return
const handleUnitClickEvent = (e: Event) => {
// Set the marker interaction flag to prevent district selection
isInteractingWithMarker.current = true
// Reset the flag after a delay
setTimeout(() => {
isInteractingWithMarker.current = false
}, 1000)
}
mapboxMap.getCanvas().addEventListener("unit_click", handleUnitClickEvent as EventListener)
document.addEventListener("unit_click", handleUnitClickEvent as EventListener)
return () => {
if (mapboxMap && mapboxMap.getCanvas()) {
mapboxMap.getCanvas().removeEventListener("unit_click", handleUnitClickEvent as EventListener)
}
document.removeEventListener("unit_click", handleUnitClickEvent as EventListener)
}
}, [mapboxMap])
useEffect(() => {
if (selectedDistrictRef.current) {
const districtId = selectedDistrictRef.current.id
@ -414,20 +459,40 @@ export default function Layers({
const handleSetFocusedDistrictId = useCallback((id: string | null, isMarkerClick = false) => {
console.log("Setting focused district ID:", id, "from marker click:", isMarkerClick)
// If this is from a marker click, set the marker interaction flag
if (isMarkerClick) {
isInteractingWithMarker.current = true
// Reset the flag after a delay
setTimeout(() => {
isInteractingWithMarker.current = false
}, 1000)
}
setFocusedDistrictId(id)
}, [])
if (!visible) return null
const crimesVisible = activeControl === "incidents"
const showHeatmapLayer = activeControl === "heatmap" && sourceType !== "cbu"
const showUnitsLayer = activeControl === "units"
const showTimelineLayer = activeControl === "timeline"
const showHistoricalLayer = activeControl === "historical"
const showRecentIncidents = activeControl === "recents"
const showDistrictFill = activeControl === "incidents" || activeControl === "clusters" || activeControl === "historical" || activeControl === "recents"
const showDistrictFill =
activeControl === "incidents" ||
activeControl === "clusters" ||
activeControl === "historical" ||
activeControl === "recents"
const showIncidentMarkers = activeControl !== "heatmap" && activeControl !== "timeline" && sourceType !== "cbu"
// Ensure showPanicDemo is always defined
// const [displayPanicDemo, setDisplayPanicDemo] = useState(showEWS && showPanicDemo)
// Always render the DistrictExtrusionLayer when a district is focused
// This ensures it's available when needed
const shouldShowExtrusion = focusedDistrictId !== null && !isInteractingWithMarker.current
return (
<>
<DistrictFillLineLayer
@ -446,12 +511,19 @@ export default function Layers({
onDistrictClick={handleDistrictClick}
/>
{/* Recent Incidents Layer (24 hours) */}
<RecentIncidentsLayer
visible={showRecentIncidents}
{/* Always render the extrusion layer when a district is focused */}
{shouldShowExtrusion && (
<DistrictExtrusionLayer
visible={true}
map={mapboxMap}
incidents={recentIncidents}
tilesetId={tilesetId}
focusedDistrictId={focusedDistrictId}
crimeDataByDistrict={crimeDataByDistrict}
/>
)}
{/* Recent Incidents Layer (24 hours) */}
<RecentIncidentsLayer visible={showRecentIncidents} map={mapboxMap} incidents={recentIncidents} />
<HeatmapLayer
crimes={crimes}
@ -501,8 +573,7 @@ export default function Layers({
focusedDistrictId={focusedDistrictId}
/>
{selectedDistrict && !selectedIncident && (
<>
{selectedDistrict && !selectedIncident && !isInteractingWithMarker.current && (
<DistrictPopup
longitude={selectedDistrict.longitude || 0}
latitude={selectedDistrict.latitude || 0}
@ -512,37 +583,20 @@ export default function Layers({
month={month}
filterCategory={filterCategory}
/>
<DistrictExtrusionLayer
visible={visible}
map={mapboxMap}
tilesetId={tilesetId}
focusedDistrictId={focusedDistrictId}
crimeDataByDistrict={crimeDataByDistrict}
/>
</>
)}
<TimezoneLayer map={mapboxMap} />
<FaultLinesLayer map={mapboxMap} />
{/* <CoastlineLayer map={mapboxMap} /> */}
{showEWS && <EWSAlertLayer map={mapboxMap} incidents={ewsIncidents} onIncidentResolved={handleResolveIncident} />}
{showEWS && (
<EWSAlertLayer
map={mapboxMap}
incidents={ewsIncidents}
onIncidentResolved={handleResolveIncident}
/>
)}
{showEWS && showPanicDemo && (
{showEWS && displayPanicDemo && (
<div className="absolute top-0 right-20 z-50 p-2">
<PanicButtonDemo
onTriggerAlert={handleTriggerAlert}
onResolveAllAlerts={handleResolveAllAlerts}
activeIncidents={ewsIncidents.filter(inc => inc.status === 'active')}
activeIncidents={ewsIncidents.filter((inc) => inc.status === "active")}
/>
</div>
)}

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

@ -9,37 +9,37 @@ interface RecentIncidentsLayerProps {
incidents?: IIncidentLogs[]
}
export default function RecentIncidentsLayer({
visible = false,
map,
incidents = [],
}: RecentIncidentsLayerProps) {
const isInteractingWithMarker = useRef(false);
export default function RecentIncidentsLayer({ visible = false, map, incidents = [] }: RecentIncidentsLayerProps) {
const isInteractingWithMarker = useRef(false)
// Filter incidents from the last 24 hours
const recentIncidents = incidents.filter(incident => {
if (!incident.timestamp) return false;
const incidentDate = new Date(incident.timestamp);
const now = new Date();
const timeDiff = now.getTime() - incidentDate.getTime();
const recentIncidents = incidents.filter((incident) => {
if (!incident.timestamp) return false
const incidentDate = new Date(incident.timestamp)
const now = new Date()
const timeDiff = now.getTime() - incidentDate.getTime()
// 86400000 = 24 hours in milliseconds
return timeDiff <= 86400000;
});
return timeDiff <= 86400000
})
const handleIncidentClick = useCallback(
(e: any) => {
if (!map) return;
if (!map) return
const features = map.queryRenderedFeatures(e.point, { layers: ["recent-incidents"] });
if (!features || features.length === 0) return;
const features = map.queryRenderedFeatures(e.point, { layers: ["recent-incidents"] })
if (!features || features.length === 0) return
isInteractingWithMarker.current = true;
// Stop event propagation
e.originalEvent.stopPropagation()
e.preventDefault()
const incident = features[0];
if (!incident.properties) return;
isInteractingWithMarker.current = true
e.originalEvent.stopPropagation();
e.preventDefault();
const incident = features[0]
if (!incident.properties) return
e.originalEvent.stopPropagation()
e.preventDefault()
const incidentDetails = {
id: incident.properties.id,
@ -49,13 +49,13 @@ export default function RecentIncidentsLayer({
latitude: (incident.geometry as any).coordinates[1],
timestamp: new Date(incident.properties.timestamp || Date.now()),
category: incident.properties.category,
};
}
console.log("Recent incident clicked:", incidentDetails);
console.log("Recent incident clicked:", incidentDetails)
// Ensure markers stay visible
if (map.getLayer("recent-incidents")) {
map.setLayoutProperty("recent-incidents", "visibility", "visible");
map.setLayoutProperty("recent-incidents", "visibility", "visible")
}
// First fly to the incident location
@ -65,34 +65,34 @@ export default function RecentIncidentsLayer({
bearing: 0,
pitch: 45,
duration: 2000,
});
})
// Dispatch the incident_click event to show the popup
const customEvent = new CustomEvent("incident_click", {
detail: incidentDetails,
bubbles: true,
});
})
map.getCanvas().dispatchEvent(customEvent);
document.dispatchEvent(customEvent);
map.getCanvas().dispatchEvent(customEvent)
document.dispatchEvent(customEvent)
// Reset the flag after a delay
setTimeout(() => {
isInteractingWithMarker.current = false;
}, 5000);
isInteractingWithMarker.current = false
}, 5000)
},
[map]
);
[map],
)
useEffect(() => {
if (!map || !visible) return;
if (!map || !visible) return
console.log(`Setting up recent incidents layer with ${recentIncidents.length} incidents from the last 24 hours`);
console.log(`Setting up recent incidents layer with ${recentIncidents.length} incidents from the last 24 hours`)
// Convert incidents to GeoJSON
const recentData = {
type: "FeatureCollection" as const,
features: recentIncidents.map(incident => ({
features: recentIncidents.map((incident) => ({
type: "Feature" as const,
geometry: {
type: "Point" as const,
@ -111,34 +111,35 @@ export default function RecentIncidentsLayer({
source: incident.source,
},
})),
};
}
const setupLayerAndSource = () => {
try {
// Check if source exists and update it
if (map.getSource("recent-incidents-source")) {
(map.getSource("recent-incidents-source") as any).setData(recentData);
; (map.getSource("recent-incidents-source") as any).setData(recentData)
} else {
// If not, add source
map.addSource("recent-incidents-source", {
type: "geojson",
data: recentData,
});
})
}
// Find first symbol layer for proper layering
const layers = map.getStyle().layers;
let firstSymbolId: string | undefined;
const layers = map.getStyle().layers
let firstSymbolId: string | undefined
for (const layer of layers) {
if (layer.type === "symbol") {
firstSymbolId = layer.id;
break;
firstSymbolId = layer.id
break
}
}
// Check if layer exists already
if (!map.getLayer("recent-incidents")) {
map.addLayer({
map.addLayer(
{
id: "recent-incidents",
type: "circle",
source: "recent-incidents-source",
@ -148,95 +149,89 @@ export default function RecentIncidentsLayer({
"interpolate",
["linear"],
["zoom"],
7, 4, // Slightly larger at lower zooms for visibility
12, 8,
15, 12, // Larger maximum size
7,
4, // Slightly larger at lower zooms for visibility
12,
8,
15,
12, // Larger maximum size
],
"circle-stroke-width": 2,
"circle-stroke-color": "#FFFFFF",
"circle-opacity": 0.8,
// Add a pulsing effect
"circle-stroke-opacity": [
"interpolate",
["linear"],
["zoom"],
7, 0.5,
15, 0.8
],
"circle-stroke-opacity": ["interpolate", ["linear"], ["zoom"], 7, 0.5, 15, 0.8],
},
layout: {
visibility: visible ? "visible" : "none",
}
}, firstSymbolId);
},
},
firstSymbolId,
)
// Add a glow effect with a larger circle behind
map.addLayer({
map.addLayer(
{
id: "recent-incidents-glow",
type: "circle",
source: "recent-incidents-source",
paint: {
"circle-color": "#FF5252",
"circle-radius": [
"interpolate",
["linear"],
["zoom"],
7, 6,
12, 12,
15, 18,
],
"circle-radius": ["interpolate", ["linear"], ["zoom"], 7, 6, 12, 12, 15, 18],
"circle-opacity": 0.2,
"circle-blur": 1,
},
layout: {
visibility: visible ? "visible" : "none",
}
}, "recent-incidents");
},
},
"recent-incidents",
)
// Add mouse events
map.on("mouseenter", "recent-incidents", () => {
map.getCanvas().style.cursor = "pointer";
});
map.getCanvas().style.cursor = "pointer"
})
map.on("mouseleave", "recent-incidents", () => {
map.getCanvas().style.cursor = "";
});
map.getCanvas().style.cursor = ""
})
} else {
// Update existing layer visibility
map.setLayoutProperty("recent-incidents", "visibility", visible ? "visible" : "none");
map.setLayoutProperty("recent-incidents-glow", "visibility", visible ? "visible" : "none");
map.setLayoutProperty("recent-incidents", "visibility", visible ? "visible" : "none")
map.setLayoutProperty("recent-incidents-glow", "visibility", visible ? "visible" : "none")
}
// Ensure click handler is properly registered
map.off("click", "recent-incidents", handleIncidentClick);
map.on("click", "recent-incidents", handleIncidentClick);
map.off("click", "recent-incidents", handleIncidentClick)
map.on("click", "recent-incidents", handleIncidentClick)
} catch (error) {
console.error("Error setting up recent incidents layer:", error);
console.error("Error setting up recent incidents layer:", error)
}
}
};
// Check if style is loaded and set up layer accordingly
if (map.isStyleLoaded()) {
setupLayerAndSource();
setupLayerAndSource()
} else {
map.once("style.load", setupLayerAndSource);
map.once("style.load", setupLayerAndSource)
// Fallback
setTimeout(() => {
if (map.isStyleLoaded()) {
setupLayerAndSource();
setupLayerAndSource()
} else {
console.warn("Map style still not loaded after timeout");
console.warn("Map style still not loaded after timeout")
}
}, 1000);
}, 1000)
}
return () => {
if (map) {
map.off("click", "recent-incidents", handleIncidentClick);
map.off("click", "recent-incidents", handleIncidentClick)
}
};
}, [map, visible, recentIncidents, handleIncidentClick]);
}
}, [map, visible, recentIncidents, handleIncidentClick])
return null;
return null
}

7
sigap-website/app/_components/map/layers/timeline-layer.tsx
View File

@ -7,7 +7,6 @@ import type mapboxgl from "mapbox-gl"
import { format } from "date-fns"
import { calculateAverageTimeOfDay } from "@/app/_utils/time"
import TimelinePopup from "../pop-up/timeline-popup"
import TimeZonesDisplay from "./timezone"
interface TimelineLayerProps {
crimes: ICrimes[]
@ -143,6 +142,10 @@ export default function TimelineLayer({
(e: mapboxgl.MapMouseEvent & { features?: mapboxgl.MapboxGeoJSONFeature[] }) => {
if (!e.features || e.features.length === 0) return
// Stop event propagation
e.originalEvent.stopPropagation()
e.preventDefault()
const feature = e.features[0]
const props = feature.properties
if (!props) return
@ -290,8 +293,6 @@ export default function TimelineLayer({
district={selectedDistrict}
/>
)}
</>
)
}

50
sigap-website/app/_components/map/layers/units-layer.tsx
View File

@ -64,18 +64,17 @@ export default function UnitsLayer({ crimes, units = [], filterCategory, visible
// Process units data to GeoJSON format
const unitsGeoJSON = useMemo(() => {
console.log("Units data being processed:", unitsData); // Debug log
console.log("Units data being processed:", unitsData) // Debug log
return {
type: "FeatureCollection" as const,
features: unitsData
.map((unit) => {
features: unitsData.map((unit) => {
// Debug log for individual units
console.log("Processing unit:", unit.code_unit, unit.name, {
longitude: unit.longitude,
latitude: unit.latitude,
district: unit.district_name
});
district: unit.district_name,
})
return {
type: "Feature" as const,
@ -91,13 +90,13 @@ export default function UnitsLayer({ crimes, units = [], filterCategory, visible
geometry: {
type: "Point" as const,
coordinates: [
parseFloat(String(unit.longitude)) || 0,
parseFloat(String(unit.latitude)) || 0
Number.parseFloat(String(unit.longitude)) || 0,
Number.parseFloat(String(unit.latitude)) || 0,
],
},
};
})
};
}
}),
}
}, [unitsData])
// Process incident data to GeoJSON format
@ -225,6 +224,7 @@ export default function UnitsLayer({ crimes, units = [], filterCategory, visible
(e: mapboxgl.MapMouseEvent & { features?: mapboxgl.MapboxGeoJSONFeature[] }) => {
if (!e.features || e.features.length === 0) return
// Stop event propagation to prevent district layer from handling this click
e.originalEvent.stopPropagation()
e.preventDefault()
@ -236,27 +236,26 @@ export default function UnitsLayer({ crimes, units = [], filterCategory, visible
// Find the unit in our data
const unit = unitsData.find((u) => u.code_unit === properties.id)
if (!unit) {
console.log("Unit not found in data:", properties.id);
return;
console.log("Unit not found in data:", properties.id)
return
}
setIsLoading(true)
// Find all incidents in the same district as the unit
const districtIncidents: IDistrictIncidents[] = []
crimes.forEach(crime => {
crimes.forEach((crime) => {
// Check if this crime is in the same district as the unit
console.log("Checking district ID:", crime.district_id, "against unit district ID:", unit.district_id);
if (crime.districts.name === unit.district_name) {
crime.crime_incidents.forEach(incident => {
if (incident.locations && typeof incident.locations.distance_to_unit !== 'undefined') {
if (selectedUnit?.code_unit === unit.code_unit) {
crime.crime_incidents.forEach((incident) => {
if (incident.locations && typeof incident.locations.distance_to_unit !== "undefined") {
districtIncidents.push({
incident_id: incident.id,
category_name: incident.crime_categories.name,
incident_description: incident.description || 'No description',
incident_description: incident.description || "No description",
distance_meters: incident.locations.distance_to_unit!,
timestamp: incident.timestamp
timestamp: incident.timestamp,
})
}
})
@ -266,12 +265,11 @@ export default function UnitsLayer({ crimes, units = [], filterCategory, visible
// Sort by distance (closest first)
districtIncidents.sort((a, b) => a.distance_meters - b.distance_meters)
console.log("Sorted district incidents:", districtIncidents);
console.log("Sorted district incidents:", districtIncidents)
// Update the state with the distance results
setUnitIncident(districtIncidents)
setIsLoading(false)
// Fly to the unit location
map.flyTo({
@ -325,6 +323,7 @@ export default function UnitsLayer({ crimes, units = [], filterCategory, visible
(e: mapboxgl.MapMouseEvent & { features?: mapboxgl.MapboxGeoJSONFeature[] }) => {
if (!e.features || e.features.length === 0) return
// Stop event propagation
e.originalEvent.stopPropagation()
e.preventDefault()
@ -430,7 +429,10 @@ export default function UnitsLayer({ crimes, units = [], filterCategory, visible
if (!map || !visible) return
// Debug log to confirm map layers
console.log("Available map layers:", map.getStyle().layers?.map(l => l.id));
console.log(
"Available map layers:",
map.getStyle().layers?.map((l) => l.id),
)
// Define event handlers that can be referenced for both adding and removing
const handleMouseEnter = () => {

27
sigap-website/app/_components/map/pop-up/unit-popup.tsx
View File

@ -62,12 +62,12 @@ export default function UnitPopup({
closeOnClick={false}
onClose={onClose}
anchor="top"
maxWidth="420px"
maxWidth="320px"
className="unit-popup z-50"
>
<div className="relative">
<Card
className="bg-background p-0 w-full max-w-[420px] shadow-xl border-0 overflow-hidden border-l-4 border-l-blue-700"
className="bg-background p-0 w-full max-w-[320px] shadow-xl border-0 overflow-hidden border-l-4 border-l-blue-700"
>
<div className="p-4 relative">
{/* Custom close button */}
@ -172,7 +172,28 @@ export default function UnitPopup({
</div>
</div>
</Card>
{/* Connection line */}
<div
className="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-full"
style={{
width: '2px',
height: '20px',
backgroundColor: 'red',
boxShadow: '0 0 4px rgba(0, 0, 0, 0.3)'
}}
/>
{/* Connection dot */}
<div
className="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-full"
style={{
width: '6px',
height: '6px',
backgroundColor: 'red',
borderRadius: '50%',
marginTop: '20px',
boxShadow: '0 0 4px rgba(0, 0, 0, 0.3)'
}}
/>
</div>
</Popup>
)

506
sigap-website/app/_styles/ui.css
View File

File diff suppressed because one or more lines are too long