Why does the map when you click behaves?

Good day.

Example:
ucheba486.site

When you click on the red block, changing the size of the container for the map. That's just the map not changing after the container.
How to fix it?

the <body>
<div id="starmap"></div>

<div class="btn" id="btn"></div>

 <script src="stuquery.min.js"></script>
 <script src="virtualsky.min.js"></script>
the <script>
 S(document).ready(function() {

 var planetarium = S. virtualsky({
 id: 'starmap',
 projection: 'stereo',
 latitude: 34.4326,
 longitude: -119.86286
});
});
 document.getElementById('btn').onclick = function() {
document.getElementById('starmap').classList.add('box--large');
};
</script>
</body>
April 19th 20 at 12:00
2 answers
April 19th 20 at 12:02
Solution
Do not over styles.
It is sufficient to cause the event to resize to the window after the added or removed class box--large

document.getElementById('btn').onclick = function() {
document.getElementById('starmap').classList.add('box--large');
 window.dispatchEvent(new Event('resize'));
};
April 19th 20 at 12:04
Solution
canvas#starmap_inner {
 width: 100% !important;
 height: 100% !important;
}

Find more questions by tags JavaScript