<html>
  <head>
    <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.16/"></script>
  </head>

  <body>
    <div id="viewDiv" />
    
    <div class="overlay">
      <div>
        <span id="play" class="button esri-icon-play" style="display: block;" />
      </div>
      <div>
        <span id="pause" class="button esri-icon-pause" style="display: none;" />
      </div>
      <div id="label">Heading: 0&deg;</div>
    </div>
  </body>
</html>

html,
body,
#viewDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

.overlay {
  position: absolute;
  width: 100%;
  bottom: 50px;
  left: 0px;
  background-color: rgba(80, 80, 80, 0.5);
  text-align: center;
  font-family: "Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;
}

.button {
  cursor: pointer;
  font-size: 45pt !important;
  font-weight: bold !important;
  color: rgb(230, 230, 230);
}

.button:hover, #label {
  color: white;
}

.button, #label {
  margin: 15px;
}

.esri-view-surface--inset-outline:focus::after {
    outline: none !important;
}
require(["esri/views/SceneView", "esri/Map"], function(
  SceneView,
  Map
) {
  var scene = new Map({
    basemap: "hybrid",
    ground: "world-elevation"
  });

  var view = new SceneView({
    map: scene,
    container: "viewDiv",
    camera: {
      position: [
        8.22216751,
        46.48873434,
        13032241.44725,
      ],
      heading: 0.00,
      tilt: 0.16,
    }
  });
  
  view.watch("camera.position.longitude", (longitude) => {
    label.innerHTML = `Longitude: ${longitude.toFixed(1)}&deg;`;
  });
  
  let abort = false;
  function rotate() {
    
    if (!view.interacting && !abort) {
      
      play.style.display = "none";
      pause.style.display = "block";
      
      const camera = view.camera.clone();
      camera.position.longitude -= 0.2;
      view.goTo(camera, { animate: false });
      
      requestAnimationFrame(rotate);
    } else {
      abort = false;
      play.style.display = "block";
      pause.style.display = "none";
    }
  }
  
  play.onclick = rotate;
  pause.onclick = function() {
    abort = true;
  };
  
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.