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:
24
src/types/leaflet-heat.d.ts
vendored
Normal file
24
src/types/leaflet-heat.d.ts
vendored
Normal 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;
|
||||
}
|
||||
Reference in New Issue
Block a user