Responsive view

[wobsoriano]

Is there an easy way to make the container responsive? Currently when you resize the window, the globe stays in its place.

Any help would be much appreciated.

[wobsoriano]

This is the website btw https://covid-3d.now.sh

[vasturiano]

@sorxrob nice implementation! I've made a similar one at https://observablehq.com/@vasturiano/corona-virus-covid-19-globe

Regarding making it responsive, you can do that by manipulating the width and height properties. And if you prefer you can use something like element-resize-detector to detect changes to your window size.

[wobsoriano]

@sorxrob nice implementation! I've made a similar one at https://observablehq.com/@vasturiano/corona-virus-covid-19-globe

Regarding making it responsive, you can do that by manipulating the width and height properties. And if you prefer you can use something like element-resize-detector to detect changes to your window size.

Nice! Thanks for the API. I'm still checking how to set the width/height dynamically in your docs. Thanks!

[wobsoriano]

Adding this made it responsive. Thank you.

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

[snshn]

Ah, perfect, thank you so much @wobsoriano!

[kqwq]

thanks so much @wobsoriano

[chavinlo]

Thanks @wobsoriano

[ralyodio]

i get a flash of white when i resize. how do i fix this?