mytec/rfcp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

@mytec: heatmap fixed (?)

Browse Source
This commit is contained in:
mytec
2026-01-30 09:22:54 +02:00
parent 3f86210706
commit 05a464ce22
1 changed files with 23 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/components/map/Heatmap.tsx
View File

@@ -19,29 +19,37 @@ interface HeatmapProps {
/** /**
* Normalize RSRP to 0-1 intensity for heatmap. * Normalize RSRP to 0-1 intensity for heatmap.
* -120 dBm -> 0.0 (very weak) * -120 dBm -> 0.0 (very weak / blue)
* -70 dBm -> 1.0 (excellent) * -70 dBm -> 1.0 (excellent / red)
*/ */
function rsrpToIntensity(rsrp: number): number { function rsrpToIntensity(rsrp: number): number {
const min = -120; const minRSRP = -120;
const max = -60; const maxRSRP = -70;
return Math.max(0, Math.min(1, (rsrp - min) / (max - min))); return Math.max(0, Math.min(1, (rsrp - minRSRP) / (maxRSRP - minRSRP)));
} }
/** /**
* Calculate adaptive heatmap radius and blur based on zoom level. * Calculate adaptive heatmap params based on zoom level.
* Lower zoom (zoomed out) = larger radius for smoother appearance.
* Higher zoom (zoomed in) = smaller radius to avoid blocky squares.
* *
* Zoom 6 (country): radius=35, blur=18 * radius/blur: smaller at close zoom to avoid blocky squares
* Zoom 10 (region): radius=25, blur=13 * maxIntensity: lower at close zoom so densely packed points
* Zoom 14 (city): radius=15, blur=8 * don't all saturate to a single solid color
* Zoom 18 (street): radius=8, blur=6 *
* Zoom 6 (country): radius=35, blur=18, max=0.90
* Zoom 10 (region): radius=25, blur=13, max=0.70
* Zoom 14 (city): radius=15, blur=9, max=0.50
* Zoom 18 (street): radius=8, blur=6, max=0.30
*/ */
function getHeatmapParams(zoom: number) { function getHeatmapParams(zoom: number) {
const radius = Math.max(8, Math.min(40, 50 - zoom * 2.5)); const radius = Math.max(8, Math.min(40, 50 - zoom * 2.5));
const blur = Math.max(6, Math.min(20, 30 - zoom * 1.5)); const blur = Math.max(6, Math.min(20, 30 - zoom * 1.5));
return { radius: Math.round(radius), blur: Math.round(blur) }; // Dynamic max: prevents saturation at close zoom
const maxIntensity = Math.max(0.3, Math.min(1.0, 1.2 - zoom * 0.05));
return {
radius: Math.round(radius),
blur: Math.round(blur),
maxIntensity,
};
} }
export default function Heatmap({ points, visible }: HeatmapProps) { export default function Heatmap({ points, visible }: HeatmapProps) {
@@ -70,13 +78,13 @@ export default function Heatmap({ points, visible }: HeatmapProps) {
rsrpToIntensity(p.rsrp), rsrpToIntensity(p.rsrp),
]); ]);
const { radius, blur } = getHeatmapParams(mapZoom); const { radius, blur, maxIntensity } = getHeatmapParams(mapZoom);
const heatLayer = L.heatLayer(heatData, { const heatLayer = L.heatLayer(heatData, {
radius, radius,
blur, blur,
maxZoom: 17, maxZoom: 17,
max: 1.0, max: maxIntensity,
minOpacity: 0.3, minOpacity: 0.3,
gradient: { gradient: {
0.0: '#0d47a1', // Dark Blue (very weak, -120 dBm) 0.0: '#0d47a1', // Dark Blue (very weak, -120 dBm)