Animate Map Camera Around a Point
Rotating the camera around a point creates an orbiting view that highlights 3D terrain, buildings, or a specific location from all angles. The rotation is driven by incrementing the map’s bearing on each animation frame and calling map.rotateTo or map.jumpTo with the new value. Use this for presentation modes, landing pages, or any scenario where you want the map to draw attention to a particular area.
const API_KEY = 'YOUR_API_KEY';
const map = new maptoolkit.Map({
container: 'map',
apiKey: API_KEY,
style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
center: [11.39085, 47.27574],
zoom: 12,
pitch: 55,
bearing: 0,
attributionControl: { compact: false }
});
map.addControl(new maptoolkit.NavigationControl(), 'top-right');
let rotating = true;
let animationId;
function rotateCamera(timestamp) {
map.rotateTo((timestamp / 100) % 360, { duration: 0 });
animationId = requestAnimationFrame(rotateCamera);
}
map.on('load', () => {
animationId = requestAnimationFrame(rotateCamera);
});
document.getElementById('toggle').addEventListener('click', () => {
if (rotating) {
cancelAnimationFrame(animationId);
document.getElementById('toggle').textContent = 'Resume';
} else {
animationId = requestAnimationFrame(rotateCamera);
document.getElementById('toggle').textContent = 'Pause';
}
rotating = !rotating;
});<!DOCTYPE html>
<html lang="en">
<head>
<title>Animate Map Camera Around a Point - Maptoolkit Maps JS</title>
<meta property="og:description" content="Continuously rotate the map camera around a fixed point." />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/@maptoolkit/[email protected]/dist/maptoolkit.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@maptoolkit/[email protected]/dist/maptoolkit.css" />
<style>
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
#map { width: 100%; height: 100%; }
#toggle {
position: absolute;
top: 10px;
left: 10px;
padding: 10px 20px;
background: #ee8a65;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 14px;
}
</style>
</head>
<body>
<div id="map"></div>
<button id="toggle">Pause</button>
<script>
const API_KEY = 'YOUR_API_KEY';
const map = new maptoolkit.Map({
container: 'map',
apiKey: API_KEY,
style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
center: [11.39085, 47.27574],
zoom: 12,
pitch: 55,
bearing: 0,
attributionControl: { compact: false }
});
map.addControl(new maptoolkit.NavigationControl(), 'top-right');
let rotating = true;
let animationId;
function rotateCamera(timestamp) {
map.rotateTo((timestamp / 100) % 360, { duration: 0 });
animationId = requestAnimationFrame(rotateCamera);
}
map.on('load', () => {
animationId = requestAnimationFrame(rotateCamera);
});
document.getElementById('toggle').addEventListener('click', () => {
if (rotating) {
cancelAnimationFrame(animationId);
document.getElementById('toggle').textContent = 'Resume';
} else {
animationId = requestAnimationFrame(rotateCamera);
document.getElementById('toggle').textContent = 'Pause';
}
rotating = !rotating;
});
</script>
</body>
</html>Use the prompt below with any LLM to get the same result. Make sure the Maptoolkit MCP server is connected first — check out AI Integration & MCP to get started.
Use the Maptoolkit Connector. Create an interactive map with zoom level 12, centered around [11.39085, 47.27574], with pitch 55. Continuously rotate the camera around the center, with a pause/resume button.