From bac2e3b17fb0fbc058c245d382b397e83e146171 Mon Sep 17 00:00:00 2001
From: Daniel <daniel@daddelolymp.de>
Date: Fri, 6 Mar 2026 09:35:48 +0100
Subject: [PATCH] fix: scale radio globe points with zoom level

Points now shrink proportionally when zooming in, preventing
overlap in dense areas and making individual stations clickable.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/plugins/radio/RadioTab.tsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/web/src/plugins/radio/RadioTab.tsx b/web/src/plugins/radio/RadioTab.tsx
index ec4c887..755b355 100644
--- a/web/src/plugins/radio/RadioTab.tsx
+++ b/web/src/plugins/radio/RadioTab.tsx
@@ -196,6 +196,22 @@ export default function RadioTab({ data }: { data: any }) {
       controls.autoRotateSpeed = 0.3;
     }
 
+    // Scale point radius based on zoom altitude so points don't overlap when zoomed in
+    let scaleRafId = 0;
+    const BASE_ALT = 2.0; // default altitude
+    const onControlsChange = () => {
+      cancelAnimationFrame(scaleRafId);
+      scaleRafId = requestAnimationFrame(() => {
+        const alt = globe.pointOfView().altitude;
+        const scale = Math.max(0.1, alt / BASE_ALT);
+        globe.pointRadius((d: any) => {
+          const base = Math.max(0.12, Math.min(0.45, 0.06 + (d.size ?? 1) * 0.005));
+          return base * scale;
+        });
+      });
+    };
+    controls.addEventListener('change', onControlsChange);
+
     globeRef.current = globe;
 
     // Pause rotation on any globe interaction (drag, scroll, touch)
@@ -215,6 +231,8 @@ export default function RadioTab({ data }: { data: any }) {
     window.addEventListener('resize', onResize);
 
     return () => {
+      controls.removeEventListener('change', onControlsChange);
+      cancelAnimationFrame(scaleRafId);
       el.removeEventListener('mousedown', onInteract);
       el.removeEventListener('touchstart', onInteract);
       el.removeEventListener('wheel', onInteract);