CODEWITHSUNDEEP
three.jswebgl-globe
Shubhashis
Shubhashis

Reputation: 10631

Updating data in globe.gl

I'm using Points Layer provided in the globe gl library. But I cannot seem to update the data after setting Globe().pointsData.

In the following example, I created a Globe instance and after that, wrote a test script that invokes after 2 seconds. But after 2 seconds have elapsed, nothing is updated on the globe even though the data points have been updated.

const N = 1;
var gData = [...Array(N).keys()].map(() => ({
  lat: 5,
  lng: 10,
  size: 0.5,
  color: 'red'
}));

var world = Globe()
  .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
  .pointsData(gData)
  .pointAltitude('size')
  .pointColor('color')
(document.getElementById('globeViz'))

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved')
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();
  
  // Updating the data here
  gData[0].size = 1
  gData[0].lat = 30

  // Setting the updated points
  world.pointsData = gData

  console.log(world.pointsData)
}

asyncCall();

I'm not sure if I should call something that will trigger an update that reflects on the Globe itself. It's not apparent from the apis.

Codepen implementation is here.

Upvotes: 0

Views: 1665

Answers (1)

M -
M -

Reputation: 28472

Looking at their Points Layer API, it looks like instead of pointsData = gData, you need to use pointsData(gData)

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();

  gData[0].size = 1
  gData[0].lat = 30
  gData[0].color = 'green'
  
  world.pointsData(gData)
}

Upvotes: 2

Related Questions