Mapgl Fly Around

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>2GIS Map API</title>
        <meta name="description" content="Quckstart with 2GIS Map API">
        <style>
          html,
          body,
          #container {
              margin: 0;
              width: 100%;
              height: 100%;
              overflow: hidden;
          }

          #fly-button {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
          }
          #fly-duration {
            position: absolute;
            top: 0;
            left: 50px;
            z-index: 2;
          }
        </style>
    </head>
    <body>
        <button id="fly-button" onclick="fly()">
        fly
        </button>
        <input id="fly-duration" size="8" value="5000">
        
        <div id="container"></div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
        <script>
          const map = new mapgl.Map('container', {
              center: [55.31878, 25.23584],
              zoom: 13,
              key: 'bfd8bbca-8abf-11ea-b033-5fa57aae2de7',
              style: 'c080bb6a-8134-4993-93a1-5b4d8c36a59b'
          });
         
          async function fly() {
            const durationEl = document.querySelector('#fly-duration');
            const duration = +(durationEl && durationEl.value || 5000);
            map.setRotation(360, { normalize: false, duration }); 
          }
        </script>
    </body>
</html>