feat: implement heat map visualization with Leaflet.heat plugin

- Integrate Leaflet.heat plugin for heat map overlay
- Add heat map toggle control in MapFilters component
- Configure heat map intensity based on report quantity levels (minimal: 0.3, moderate: 0.5, significant: 0.7, severe: 1.0)
- Implement heat map layer management with proper cleanup
- Add custom gradient colors (blue to red) for visual intensity representation
- Configure heat map with radius: 25px, blur: 15, maxZoom: 17
- Add TypeScript type declarations for leaflet.heat
- Heat map respects existing filter state (date range, litter type, quantity)

Implements task 5: Create heat map visualization
Requirements: 3.1, 3.5
This commit is contained in:
2025-11-16 16:05:31 +00:00
parent ba324b370e
commit 8f297e1ec4
5 changed files with 114 additions and 1 deletions

24
src/types/leaflet-heat.d.ts vendored Normal file
View File

@@ -0,0 +1,24 @@
// Type declarations for leaflet.heat plugin
import * as L from 'leaflet';
declare module 'leaflet' {
interface HeatLayerOptions {
minOpacity?: number;
maxZoom?: number;
max?: number;
radius?: number;
blur?: number;
gradient?: { [key: number]: string };
}
interface HeatLayer extends Layer {
setLatLngs(latlngs: Array<[number, number, number]>): this;
addLatLng(latlng: [number, number, number]): this;
setOptions(options: HeatLayerOptions): this;
}
function heatLayer(
latlngs: Array<[number, number, number]>,
options?: HeatLayerOptions
): HeatLayer;
}