Why does the map behave like this when clicked?

A

Aleksey2020-04-14 20:22:24

JavaScript

Aleksey, 2020-04-14 20:22:24

Good day.

Example:
ucheba486.site Clicking

on the red block changes the size of the container for the map. But the map does not change after the container.
How to fix it?

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

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

    <script src="stuquery.min.js"></script>
    <script src="virtualsky.min.js"></script>
    <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>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

P

ProjectSoft, 2020-04-15
@sokolik1983

It is not necessary through styles.
It is enough to trigger an event resizefor windowafter adding or removing a classbox--large

document.getElementById('btn').onclick = function() {
        document.getElementById('starmap').classList.add('box--large');
        window.dispatchEvent(new Event('resize'));
};