Skip to content
Home
Maptoolkit Maps JS
Examples
Jump to a Series of Locations

Jump to a Series of Locations in Maptoolkit Maps JS

map.jumpTo in Maptoolkit Maps JS teleports the camera to a new center, zoom, pitch, and bearing instantly without any animation. By cycling through an array of locations on a button click or timer, you can create a tour that snaps between places. Use this for guided map experiences, automated demos, or any interface where animated transitions would slow users down or feel disorienting.

const API_KEY = 'YOUR_API_KEY';

    const locations = [
        { center: [11.39085, 47.27574], zoom: 13, label: 'Innsbruck' },
        { center: [13.0550, 47.8095], zoom: 13, label: 'Salzburg' },
        { center: [16.3738, 48.2082], zoom: 13, label: 'Vienna' },
        { center: [15.4395, 47.0707], zoom: 13, label: 'Graz' }
    ];

    const map = new maptoolkit.Map({
        container: 'map',
        apiKey: API_KEY,
        style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
        center: locations[0].center,
        zoom: locations[0].zoom,
        attributionControl: { compact: false }
    });

    map.addControl(new maptoolkit.NavigationControl(), 'top-right');

    function jumpTo(index) {
        map.jumpTo({ center: locations[index].center, zoom: locations[index].zoom });
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Jump to a Series of Locations - Maptoolkit Maps JS</title>
    <meta property="og:description" content="Jump the map camera instantly through a series of locations." />
    <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%; }
        #controls {
            position: absolute;
            top: 10px;
            left: 10px;
            display: flex;
            gap: 8px;
        }
        #controls button {
            padding: 10px 16px;
            background: #3887be;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            font-size: 13px;
        }
    </style>
</head>
<body>
<div id="map"></div>
<div id="controls">
    <button onclick="jumpTo(0)">Innsbruck</button>
    <button onclick="jumpTo(1)">Salzburg</button>
    <button onclick="jumpTo(2)">Vienna</button>
    <button onclick="jumpTo(3)">Graz</button>
</div>
<script>
    const API_KEY = 'YOUR_API_KEY';

    const locations = [
        { center: [11.39085, 47.27574], zoom: 13, label: 'Innsbruck' },
        { center: [13.0550, 47.8095], zoom: 13, label: 'Salzburg' },
        { center: [16.3738, 48.2082], zoom: 13, label: 'Vienna' },
        { center: [15.4395, 47.0707], zoom: 13, label: 'Graz' }
    ];

    const map = new maptoolkit.Map({
        container: 'map',
        apiKey: API_KEY,
        style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
        center: locations[0].center,
        zoom: locations[0].zoom,
        attributionControl: { compact: false }
    });

    map.addControl(new maptoolkit.NavigationControl(), 'top-right');

    function jumpTo(index) {
        map.jumpTo({ center: locations[index].center, zoom: locations[index].zoom });
    }
</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 starting at Innsbruck with zoom 13. Add buttons for Innsbruck, Salzburg, Vienna, and Graz that instantly jump the camera to each city.

How it works

jumpTo sets centre, zoom, pitch and bearing in one call with no animation. The map redraws once at the new view, which makes it the cheapest camera move there is.

Because it does not animate, it will not be interrupted, and it will not fire the stream of move events an animation produces. That makes it the right choice for stepping through locations on a timer, restoring a saved view, or syncing two maps.

Each entry in the array is a full camera state rather than a delta, so pitch and bearing have to be repeated if they should persist; anything omitted keeps its current value.

For a guided tour where the user should follow the movement, flyTo communicates the travel that jumpTo deliberately skips.

Next steps

A sequence of views is the bones of a guided tour, so the next step is usually the controls around it: pause, next, previous, and a way to leave the tour and explore.

Pairing each view with content beside the map is what makes it a story rather than a slideshow, and at that point tying the sequence to the reader’s scroll position is usually a better fit than a timer, since it hands the pacing to them.

Related Examples

Get Features Under the Mouse PointerMeasure Distances