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;
|
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);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue