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>
This commit is contained in:
Daniel 2026-03-06 09:35:48 +01:00
parent 90ef17932c
commit bac2e3b17f

View file

@ -196,6 +196,22 @@ export default function RadioTab({ data }: { data: any }) {
controls.autoRotateSpeed = 0.3; 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; globeRef.current = globe;
// Pause rotation on any globe interaction (drag, scroll, touch) // Pause rotation on any globe interaction (drag, scroll, touch)
@ -215,6 +231,8 @@ export default function RadioTab({ data }: { data: any }) {
window.addEventListener('resize', onResize); window.addEventListener('resize', onResize);
return () => { return () => {
controls.removeEventListener('change', onControlsChange);
cancelAnimationFrame(scaleRafId);
el.removeEventListener('mousedown', onInteract); el.removeEventListener('mousedown', onInteract);
el.removeEventListener('touchstart', onInteract); el.removeEventListener('touchstart', onInteract);
el.removeEventListener('wheel', onInteract); el.removeEventListener('wheel', onInteract);