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