[questions]How to Centered/keep left the globe in the viewport?

[moranno]

The globe are always on the right of the canvas no matter how I adjust the canvas.

And you may discover the "count" error as I mentioned here: https://github.com/vasturiano/react-globe.gl/issues/59#issuecomment-864419796

[snshn]

Looks like #globeViz needs to have fixed width set. Currently it doesn't have overflow: hidden, hence the canvas element overflows it (being rendered oversized).

[moranno]

Looks like #globeViz needs to have fixed width set. Currently it doesn't have overflow: hidden, hence the canvas element overflows it (being rendered oversized).

Thanks, so how can I solve it, since it has to responsive?

[snshn]

You'd need to set width: 500px or width: 25% on one of the parent DIVs, before Globe() gets called. Hard to tell which one and what the exact value should be in your case, but that'll likely solve the problem.

[moranno]

You'd need to set width: 500px or width: 25% on one of the parent DIVs, before Globe() gets called. Hard to tell which one and what the exact value should be in your case, but that'll likely solve the problem.

<div style="float:left; width:500px;height:500px;">
<div id="globeViz" ></div>
</div>

Unfortunately... It doesn't work. It seems the canvas has a higher level than div.

[snshn]

Oh, that's weird. Seems like THREE.js doesn't have that functionality built-in (https://stackoverflow.com/questions/29884485/threejs-canvas-size-based-on-container), likely will have to set the canvas' width & height CSS properties manually. My current case is easier, since I just use globe.gl as a full-page/full-screen component.

You'll likely need to implement

window.addEventListener('resize', (event) => {
  world.width([event.target.innerWidth])
  world.height([event.target.innerHeight])
});

along with triggering the same world.width/world.height once the page loads, that way the canvas will fit perfect inside the parent DIV.

[moranno]

Oh, that's weird. Seems like THREE.js doesn't have that functionality built-in (https://stackoverflow.com/questions/29884485/threejs-canvas-size-based-on-container), likely will have to set the canvas' width & height CSS properties manually. My current case is easier, since I just use globe.gl as a full-page/full-screen component.

You'll likely need to implement

window.addEventListener('resize', (event) => {
  world.width([event.target.innerWidth])
  world.height([event.target.innerHeight])
});

along with triggering the same world.width/world.height once the page loads, that way the canvas will fit perfect inside the parent DIV.

Thanks! Any ideas how to write the code in DIV to read the world.width/world.height ?

[snshn]

This should do it: https://www.javascripttutorial.net/javascript-dom/javascript-width-height/

[ralyodio]

i get a lot of flashing of white when I resize. I tried setting html, body { background-color: #001;} but i style get a white flash when resizing.