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());