I am working on a project where I use the Globe.gl library to visualize the globe. I want to add static pointers to specific locations on the globe, and I've provided the static coordinates in the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Globe.gl with Random Markers</title>
<style>
body { margin: 0; }
</style>
<script src="https://unpkg.com/three"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script src="https://unpkg.com/globe.gl"></script>
</head>
<body>
<div id="globeViz" style="width: 100vw; height: 100vh;"></div>
<script>
console.log('Script loaded successfully!');
const world = Globe()
(document.getElementById('globeViz'))
.backgroundColor('black')
.showGlobe(false)
.showAtmosphere(false);
fetch('https://unpkg.com/world-atlas/land-110m.json')
.then(res => res.json())
.then(landTopo => {
world
.polygonsData(topojson.feature(landTopo, landTopo.objects.land).features)
.polygonCapMaterial(new THREE.MeshLambertMaterial({ color: 'cyan', side: THREE.DoubleSide }))
.polygonSideColor(() => 'transparent');
const staticCoordinates = [
{ lat: 40.7128, lon: -74.0060 },
{ lat: 51.5074, lon: -0.1278 },
{ lat: 35.6895, lon: 139.6917 },
{ lat: -23.5505, lon: -46.6333 },
{ lat: 37.7749, lon: -122.4194 },
];
world.pointsData(staticCoordinates)
.pointRadius(1)
.pointAltitude(() => 2.1)
.pointColor(() => 'black');
})
.catch(error => {
console.error('Error loading world atlas data:', error);
});
</script>
</body>
</html>
However, I am facing an issue where the pointers are not being displayed on the globe. Here are some additional details:
I've included the static coordinates in the staticCoordinates array. I've set the pointRadius to 1, pointAltitude to 2.1, and pointColor to black. Despite these settings, the pointers are not appearing on the globe. I've followed the documentation, but it seems I might be missing something. Can someone help me identify the issue or provide guidance on how to correctly add static pointers to the Globe.gl visualization?
Any insights or suggestions would be greatly appreciated. Thank you in advance for your assistance!