Why does the map when you click behaves?

Question

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>

JavaScript

lessie64 asked April 19th 20 at 12:00

Related questions

More answers about "Why does the map when you click behaves?"

2 answers

Jimmie answered on · Accepted Answer · 2020-04-19T10:02:24.719Z

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'));
};

Immanuel95 answered on · Accepted Answer · 2020-04-19T10:04:24.719Z

canvas#starmap_inner {
 width: 100% !important;
 height: 100% !important;
}