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:
parent
90ef17932c
commit
bac2e3b17f
1 changed files with 18 additions and 0 deletions
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue