pauseAnimation() and resize event

[gmzbri]

I am trying to serve a static version of the globe as I don't need an interactive version of it. I am using pauseAnimation() which works fine for this; but on resize the globe won't become responsive as I can't call the width() and height() attributes on a resize event unless I resume the animation again.

Is there a trivial way to allow the globe to contain on resize despite we freeze the globe and cancel interaction?

Thanks in advance.

[vasturiano]

@gmzbri thanks for reaching out.

pauseAnimationcauses all rendering of the globe canvas to halt. So if after you modify the container dimensions (via width or height), the container DOM element will resize, but the content of the canvas will not update, leading to loss of proportion ratio and a squashed globe.

So, if you want to have a canvas that is mainly static but can respond to dimension changes, the best is to resume animation momentarily when updating the container dimensions, and pause it immediately after.

On the other hand, if you just want to cancel user interaction, you could disable it via .enablePointerInteraction(false), instead of pausing the animation frame cycle. And if you want disable the navigation controls, you can do it via:

.controls().enabled = false