Empty MapGL fly

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Empty MapGL fly</title>
    <style>
        html,
        body,
        #container {
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="container"></div>

<script src="https://mapgl.2gis.com/api/js/v1"></script>
<script>
function sleep(time) {
    return new Promise((resolve) => {
        setTimeout(resolve, time);
    });
}

function waitIdle() {
    return new Promise((resolve) => {
        map.once('idle', resolve);
    });
}

async function runScenario(scenario) {
    for (const part of scenario) {
        // console.log(part);
        const duration = part.duration || 0;
        if (part.zoom !== undefined) {
            const params = {
                duration,
                animateHeight: true,
            };
            if (part.zoomEasing) {
                params.easing = part.zoomEasing;
            }
            map.setZoom(part.zoom, params);
        }
        if (part.pitch !== undefined) {
            const params = {
                duration,
            };
            if (part.pitchEasing) {
                params.easing = part.pitchEasing;
            }
            map.setPitch(part.pitch, params);
        }
        if (part.center) {
            const params = {
                duration,
            };
            if (part.centerEasing) {
                params.easing = part.centerEasing;
            }
            map.setCenter(part.center, params);
        }
        if (part.rotation !== undefined) {
            const params = {
                duration,
            };
            if (part.rotationEasing) {
                params.easing = part.rotationEasing;
            }
            map.setRotation(part.rotation, params);
        }

        if (typeof part.f === 'function') {
			part.f();
		}

        if (part.waitIdle) {
            await waitIdle();
        } else {
            await sleep(duration);
        }
    }
}

const map = new mapgl.Map('container', {
    center: [55.31878, 25.23584],
    zoom: 13,
    maxZoom: 20.8,
    hillshade: true,
    style: new URL(location.href).searchParams.get('styleId') ?? 'eb10e2c3-3c28-4b81-b74b-859c9c4cf47e',
    key: '042b5b75-f847-4f2a-b695-b5f58adc9dfd',
    maxPitch: 70,
    lowZoomMaxPitch: 45,
    pitchHightLimitation: 90,
    enableFog: true,
    enableSky: true,
});
map.on('click', ev => console.log(ev));

window.addEventListener('resize', () => map.invalidateSize());
</script>
</body>
</html>