-
- Real DC crash data (2010+)
+
+
+ Real DC crash data (2020+)
diff --git a/web/src/app/components/MapView.tsx b/web/src/app/components/MapView.tsx
index c25b80a..bfbe357 100644
--- a/web/src/app/components/MapView.tsx
+++ b/web/src/app/components/MapView.tsx
@@ -41,6 +41,7 @@ interface MapViewProps {
onGeocoderResult?: (lngLat: [number, number]) => void;
useRealCrashData?: boolean; // whether to use real crash data or synthetic data
crashData?: CrashData[]; // external crash data to use
+ isMapPickingMode?: boolean; // whether map is in picking mode (prevents popups)
}
export default function MapView({
@@ -53,7 +54,8 @@ export default function MapView({
onPopupCreate,
onGeocoderResult,
useRealCrashData = true,
- crashData = []
+ crashData = [],
+ isMapPickingMode = false
}: MapViewProps) {
const containerRef = useRef
(null);
const mapContainerRef = useRef(null);
@@ -88,7 +90,7 @@ export default function MapView({
// Add layers if they don't exist
if (!map.getLayer('dc-heat')) {
map.addLayer({
- id: 'dc-heat', type: 'heatmap', source: 'dc-quakes', maxzoom: 15,
+ id: 'dc-heat', type: 'heatmap', source: 'dc-quakes',
paint: {
'heatmap-weight': ['interpolate', ['linear'], ['get', 'mag'], 0, 0, 6, 1],
'heatmap-intensity': heatIntensity,
@@ -317,7 +319,7 @@ export default function MapView({
if (!map.getLayer('dc-heat')) {
map.addLayer({
- id: 'dc-heat', type: 'heatmap', source: 'dc-quakes', maxzoom: 15,
+ id: 'dc-heat', type: 'heatmap', source: 'dc-quakes',
paint: {
'heatmap-weight': ['interpolate', ['linear'], ['get', 'mag'], 0, 0, 6, 1],
'heatmap-intensity': heatIntensity,
@@ -403,7 +405,7 @@ Fatalities: ${(crashData.fatalDriver || 0) + (crashData.fatalPedestrian || 0) +
Major Injuries: ${(crashData.majorInjuriesDriver || 0) + (crashData.majorInjuriesPedestrian || 0) + (crashData.majorInjuriesBicyclist || 0)}`;
}
- if (onPopupCreate) onPopupCreate({ lngLat: coords, mag, crashData, text, stats });
+ if (onPopupCreate && !isMapPickingMode) onPopupCreate({ lngLat: coords, mag, crashData, text, stats });
});
map.on('click', 'dc-heat', async (e) => {
@@ -421,7 +423,7 @@ Major Injuries: ${(crashData.majorInjuriesDriver || 0) + (crashData.majorInjurie
coords[0] === 0 || coords[1] === 0) {
console.warn('Invalid coordinates for heat map click:', coords);
const stats = await computeNearbyStats([e.lngLat.lng, e.lngLat.lat], 300);
- if (onPopupCreate) onPopupCreate({ lngLat: [e.lngLat.lng, e.lngLat.lat], text: 'Zoom in to see individual crash reports and details', stats });
+ if (onPopupCreate && !isMapPickingMode) onPopupCreate({ lngLat: [e.lngLat.lng, e.lngLat.lat], text: 'Zoom in to see individual crash reports and details', stats });
return;
}
@@ -439,10 +441,10 @@ Fatalities: ${(crashData.fatalDriver || 0) + (crashData.fatalPedestrian || 0) +
Major Injuries: ${(crashData.majorInjuriesDriver || 0) + (crashData.majorInjuriesPedestrian || 0) + (crashData.majorInjuriesBicyclist || 0)}`;
}
- if (onPopupCreate) onPopupCreate({ lngLat: coords, mag, crashData, text, stats });
+ if (onPopupCreate && !isMapPickingMode) onPopupCreate({ lngLat: coords, mag, crashData, text, stats });
} else {
const stats = await computeNearbyStats([e.lngLat.lng, e.lngLat.lat], 300);
- if (onPopupCreate) onPopupCreate({ lngLat: [e.lngLat.lng, e.lngLat.lat], text: 'Zoom in to see individual crash reports and details', stats });
+ if (onPopupCreate && !isMapPickingMode) onPopupCreate({ lngLat: [e.lngLat.lng, e.lngLat.lat], text: 'Zoom in to see individual crash reports and details', stats });
}
});
@@ -478,7 +480,7 @@ Major Injuries: ${(crashData.majorInjuriesDriver || 0) + (crashData.majorInjurie
detailedText = `Detailed Analysis - ${crashData.address}`;
}
- if (onPopupCreate) onPopupCreate({
+ if (onPopupCreate && !isMapPickingMode) onPopupCreate({
lngLat: coords,
crashData,
text: detailedText,
@@ -495,7 +497,7 @@ Major Injuries: ${(crashData.majorInjuriesDriver || 0) + (crashData.majorInjurie
// Get comprehensive stats for the clicked location
const stats = await computeNearbyStats(coords, 500); // 500m radius
- if (onPopupCreate) onPopupCreate({
+ if (onPopupCreate && !isMapPickingMode) onPopupCreate({
lngLat: coords,
text: 'Area Crash Analysis',
stats
@@ -516,13 +518,13 @@ Major Injuries: ${(crashData.majorInjuriesDriver || 0) + (crashData.majorInjurie
const stats = await computeNearbyStats(coords, 400); // 400m radius for general clicks
if (stats.count > 0) {
- if (onPopupCreate) onPopupCreate({
+ if (onPopupCreate && !isMapPickingMode) onPopupCreate({
lngLat: coords,
text: 'Location Analysis',
stats
});
} else {
- if (onPopupCreate) onPopupCreate({
+ if (onPopupCreate && !isMapPickingMode) onPopupCreate({
lngLat: coords,
text: 'No crashes found in this area',
stats: { count: 0, radiusMeters: 800 }
diff --git a/web/src/app/hooks/useCrashData.ts b/web/src/app/hooks/useCrashData.ts
index 5b9963c..6c32d1b 100644
--- a/web/src/app/hooks/useCrashData.ts
+++ b/web/src/app/hooks/useCrashData.ts
@@ -36,7 +36,8 @@ export function useCrashData(options: UseCrashDataOptions = {}): UseCrashDataRes
const params = new URLSearchParams({
page: page.toString(),
- limit: limit.toString(),
+ // When year filter is active, request all data by setting a high limit
+ limit: yearFilter ? '100000' : limit.toString(),
});
if (yearFilter) {
@@ -51,10 +52,11 @@ export function useCrashData(options: UseCrashDataOptions = {}): UseCrashDataRes
const result: CrashResponse = await response.json();
- if (append) {
- setData(prevData => [...prevData, ...result.data]);
- } else {
+ // When year filter is active, always replace data (don't append)
+ if (yearFilter || !append) {
setData(result.data);
+ } else {
+ setData(prevData => [...prevData, ...result.data]);
}
setPagination(result.pagination);
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 04d5f20..a42afcd 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -4,7 +4,6 @@ import React, { useRef, useState } from 'react';
import MapView, { PopupData } from './components/MapView';
import ControlsPanel from './components/ControlsPanel';
import PopupOverlay from './components/PopupOverlay';
-import Legend from './components/Legend';
import MapNavigationControl from './components/MapNavigationControl';
import DirectionsSidebar from './components/DirectionsSidebar';
import CrashDataControls from './components/CrashDataControls';
@@ -22,16 +21,21 @@ export default function Home() {
});
const [popup, setPopup] = useState(null);
const [popupVisible, setPopupVisible] = useState(false);
+ const [isMapPickingMode, setIsMapPickingMode] = useState(false);
- // Shared crash data state
- const crashDataHook = useCrashData({ autoLoad: true, limit: 10000 });
+ // Shared crash data state - load all data for filtered year
+ const crashDataHook = useCrashData({ autoLoad: true });
return (
{/* Render sidebar as an overlay inside the map container so collapsing doesn't shift layout */}
-
+
{ mapRef.current = m; }}
onPopupCreate={(p) => { setPopupVisible(false); setPopup(p); requestAnimationFrame(() => setPopupVisible(true)); }}
/>
@@ -63,10 +68,8 @@ export default function Home() {
{/* Native Mapbox navigation control (zoom + compass) */}
- {/* Crash data loading controls */}
+ {/* Crash data loading controls with integrated crash density legend */}
-
-
{ setPopupVisible(false); setTimeout(() => setPopup(null), 220); }} />