Mapbox GL JS Easing (cribbed from @jfire's example) by wboykinm

index.html


<html>
<head>
  <meta charset='utf-8' />
  <title>Mapbox GL JS Easing</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.8.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.8.0/mapbox-gl.css' rel='stylesheet' />
  <link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
  <style>
      body { margin:0; padding:0; }
      #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>

<div id='map'></div>
<a class='button hidden pin-topleft' onclick='map.collisionDebug=!map.collisionDebug'>Toggle collision boxes</a>
<a class='button pin-topright margin1 col1 icon adjust-stroke hidden' onclick='tilter()'>Tilt</a>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';
var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'faraday2.0a27e92a.json', //stylesheet location
  center: [55.68037, 12.58979], // starting position
  zoom: 12.66, // starting zoom,
  //hash:true
});

function rotator(){
  map.easeTo({bearing:60, duration:5000, pitch:55, zoom:14});
  window.setTimeout(function(){
    map.easeTo({bearing:180, duration:8000, pitch:0, zoom:10});
    window.setTimeout(function(){
      map.easeTo({bearing:220, duration:7000, pitch:70, zoom:13});
      window.setTimeout(function(){
        rotator()
      }, 5000)
    }, 8000)
  }, 7000)
}
map.on('load', function(){
  rotator()
})
</script>

</body>
</html>