Fitbounds bearing example

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css">

<div id="map"></div>

CSS

body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }

JavaScript

mapboxgl.accessToken = "(ADD YOUR OWN)";
const map = new mapboxgl.Map({
  container: 'map', // container ID
  style: 'mapbox://styles/mapbox/satellite-v9', // style URL
  center: [4.308037244485426,52.1295155482303], // starting position [lng, lat]
  zoom: 13 // starting zoom
});


const pointA = [4.3072676957027625, 52.12886114990445];
const pointB = [4.314638095261273, 52.13343163971214];

const bounds = new mapboxgl.LngLatBounds();

bounds.extend(pointA);
bounds.extend(pointB);

        
let bearing = 0;
map.on('load', function() {
	new mapboxgl.Marker().setLngLat(pointA).addTo(map);
  new mapboxgl.Marker().setLngLat(pointB).addTo(map);

	setInterval(() => {
  	bearing = bearing + 20;
    console.log(bearing);
    map.fitBounds(bounds, {
				preload: true,
				maxZoom: 22,
				pitch: 0,
				bearing: bearing,
				padding: 50,
				linear: true,
			});
  }, 2000);
});