Animate Map Camera Around a Point

Animate Map Camera Around a Point in Maptoolkit Maps JS

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/maps@11.0.0-beta.3/dist/maptoolkit.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@maptoolkit/maps@11.0.0-beta.3/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.

How it works

The orbit is bearing advanced a little at a time while the centre stays put, so the camera circles the same location.

Driving it with rotateTo and a matching duration, or with setBearing inside a frame loop, both work. The distinction that matters is that camera animations can be interrupted by user interaction, so a loop that assumes the previous animation finished will drift.

Pitch is what makes an orbit worth doing. At pitch 0 rotation just spins a flat map; tilted, it reveals terrain and buildings from each side, which is why this pairs with the 3D examples.

An endless orbit is motion the user did not ask for. Stop it on interaction, and respect a reduced-motion preference rather than marking it essential.

Next steps

An orbit is a presentation device, so the next step is deciding when it runs: on a landing page until the user interacts, in a kiosk that nobody touches, or as a short reveal when a location is first shown rather than an endless loop.

Orbiting tilted over terrain or extruded buildings is what makes it worth doing at all, and pairing it with a slow zoom gives a much stronger reveal than rotation alone.

Animate a Symbol to Follow the Mouse Attach a Popup to a Marker Instance

Animate Map Camera Around a Point in Maptoolkit Maps JS

How it works

Next steps

Related Examples