<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/WebScene"], function(
  SceneView,
  WebScene
) {
  var scene = new WebScene({
    portalItem: {
      id: "02b635b4926c42ddb4fa21c99305fb23"
    },
  });

  var view = new SceneView({
    map: scene,
    container: "viewDiv",
  });
  
  view.watch("camera.heading", (heading) => {
    label.innerHTML = `Heading: ${heading.toFixed(1)}&deg;`;
  });
  
  
  let abort = false;
  let center = null;
  function rotate() {
    
    if (!view.interacting && !abort) {
      
      play.style.display = "none";
      pause.style.display = "block";
      
      center = center || view.center;
      
      view.goTo({
        heading: view.camera.heading + 0.2,
        center
      }, {animate: false});
      
      requestAnimationFrame(rotate);
    } else {
      abort = false;
      center = null;
      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.