<div id="map"></div>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
coordinates = [
  [139.773056, 35.698634], // Akihabara
  [139.768435, 35.681054] // Tokyo
];

class CameraControl {
  onAdd(map) {
    this._cnt = 0;
    this._map = map;

    const container = document.createElement("div");
    container.className = "mapboxgl-ctrl";

    const flyTo = document.createElement("button");
    flyTo.textContent = "flyTo";
    flyTo.onclick = () => {
      map.flyTo({
        center: coordinates[this._cnt++ % coordinates.length],
        zoom: 15,
        speed: 0.5
      });
    };

    const easeTo = document.createElement("button");
    easeTo.textContent = "easeTo";
    easeTo.onclick = () => {
      map.easeTo({
        center: coordinates[this._cnt++ % coordinates.length],
        zoom: 15,
        duration: 5000
      });
    };

    const jumpTo = document.createElement("button");
    jumpTo.textContent = "jumpTo";
    jumpTo.onclick = () => {
      map.jumpTo({
        center: coordinates[this._cnt++ % coordinates.length],
        zoom: 15
      });
    };

    container.appendChild(flyTo);
    container.appendChild(easeTo);
    container.appendChild(jumpTo);
    return container;
  }

  onRemove() {
    this._container.parentNode.removeChild(this._container);
    this._map = undefined;
  }
}

mapboxgl.accessToken =
  "pk.eyJ1Ijoib3R0eWxhYiIsImEiOiJjbTNsYmhxdWwwaWJtMnFxenIzNmJuaGJmIn0.QEnCKZZKJQBAbK8GFBzAcw";

const map = new mapboxgl.Map({
  container: "map", // container ID
  style: "mapbox://styles/mapbox/streets-v12", // style URL
  center: [139.768435, 35.681054], // starting position [lng, lat]
  zoom: 15 // starting zoom
});

map.addControl(new CameraControl());

External CSS

  1. https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css

External JavaScript

  1. https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js