root/gaming-hub
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix radio marker object placement

Browse source
This commit is contained in:
Daniel 2026-03-06 16:15:44 +01:00
parent 3d59eda3da
commit 99421f4577
1 changed files with 11 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

22
web/src/plugins/radio/RadioTab.tsx
View file

@ -181,8 +181,8 @@ export default function RadioTab({ data }: { data: any }) {
const accentRgb = style.getPropertyValue('--accent-rgb').trim(); const accentRgb = style.getPropertyValue('--accent-rgb').trim();
const spriteTexture = createMarkerTexture(`rgb(${accentRgb})`); const spriteTexture = createMarkerTexture(`rgb(${accentRgb})`);
globeRef.current.atmosphereColor(`rgb(${accentRgb})`); globeRef.current.atmosphereColor(`rgb(${accentRgb})`);
globeRef.current.customLayerData(places); globeRef.current.objectsData(places);
globeRef.current.customThreeObject((d: any) => { globeRef.current.objectThreeObject((d: any) => {
const material = new SpriteMaterial({ const material = new SpriteMaterial({
map: spriteTexture ?? undefined, map: spriteTexture ?? undefined,
color: `rgb(${accentRgb})`, color: `rgb(${accentRgb})`,
@ -231,7 +231,7 @@ export default function RadioTab({ data }: { data: any }) {
if (!containerRef.current || places.length === 0) return; if (!containerRef.current || places.length === 0) return;
if (globeRef.current) { if (globeRef.current) {
globeRef.current.customLayerData(places); globeRef.current.objectsData(places);
return; return;
} }
@ -244,12 +244,16 @@ export default function RadioTab({ data }: { data: any }) {
.atmosphereColor(`rgb(${initRgb})`) .atmosphereColor(`rgb(${initRgb})`)
.atmosphereAltitude(0.12) .atmosphereAltitude(0.12)
.globeImageUrl('/nasa-blue-marble.jpg') .globeImageUrl('/nasa-blue-marble.jpg')
.customLayerData(places) .objectsData(places)
.customLayerLabel((d: any) => .objectLat((d: any) => d.geo[1])
.objectLng((d: any) => d.geo[0])
.objectAltitude(0.0012)
.objectFacesSurface(false)
.objectLabel((d: any) =>
`<div style="font-family:system-ui;font-size:13px;color:#fff;background:rgba(30,31,34,0.92);padding:6px 10px;border-radius:6px;border:1px solid rgba(${initRgb},0.3);pointer-events:none">` + `<div style="font-family:system-ui;font-size:13px;color:#fff;background:rgba(30,31,34,0.92);padding:6px 10px;border-radius:6px;border:1px solid rgba(${initRgb},0.3);pointer-events:none">` +
`<b>${d.title}</b><br/><span style="color:#949ba4;font-size:11px">${d.country}</span></div>` `<b>${d.title}</b><br/><span style="color:#949ba4;font-size:11px">${d.country}</span></div>`
) )
.customThreeObject((d: any) => { .objectThreeObject((d: any) => {
const material = new SpriteMaterial({ const material = new SpriteMaterial({
map: markerTexture ?? undefined, map: markerTexture ?? undefined,
color: `rgb(${initRgb})`, color: `rgb(${initRgb})`,
@ -261,11 +265,7 @@ export default function RadioTab({ data }: { data: any }) {
sprite.scale.set(scale, scale, 1); sprite.scale.set(scale, scale, 1);
return sprite; return sprite;
}) })
.customThreeObjectUpdate((obj: any, d: any) => { .onObjectClick((d: any) => handlePointClickRef.current?.(d))
const scale = markerScale(d.size ?? 1);
obj.scale.set(scale, scale, 1);
})
.onCustomLayerClick((d: any) => handlePointClickRef.current?.(d))
.width(containerRef.current.clientWidth) .width(containerRef.current.clientWidth)
.height(containerRef.current.clientHeight); .height(containerRef.current.clientHeight);