I'm trying to combine Globe GL's Labels Layer with USGS data but I'm facing some challenges. The issue arises when adding Label Layer code into the existing setup I have. It all works and a globe is displayed until '// Points' comment is inserted.
Is the Label Layer code wrong? I tried to follow the earthquake globe example for the naming.
Did I insert the Layer code wrongly? It does not work even if I combined the function containing label properties with the above function with document.getElementbyId.
const world = Globe({ animateIn: false })(
document.getElementById("globeViz")
)
.globeImageUrl(
"//unpkg.com/three-globe/example/img/earth-blue-marble.jpg"
)
.bumpImageUrl(
"//unpkg.com/three-globe/example/img/earth-topology.png"
);
world.backgroundColor("hsl(245 10% 10%)");
world.width(710);
world.height(650);
// Auto-rotate
world.controls().autoRotate = true;
world.controls().autoRotateSpeed = 0.63;
// Points
fetch(
"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/significant_month.geojson"
)
.then((res) => res.json())
.then((equakes) => {
world.labelsData(equakes.features);
});
const world = Globe()
.labelsData(equakes.features)
.labelLabel((d) => d.properties.title)
.labelLat((d) => d.geometry.coordinates[1])
.labelLng((d) => d.geometry.coordinates[0])
.labelText((d) => d.properties.title)
.labelSize((d) => Math.sqrt(d.properties.mag) * 4e-4)
.labelDotRadius((d) => Math.sqrt(d.properties.mag) * 4e-4)
.labelColor(() => "rgba(255, 165, 0, 0.75)")
.labelResolution(2)(document.getElementById("globeViz"));