Jump to a Series of Locations

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/[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%; }
        #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.

Get Features Under the Mouse Pointer Measure Distances

Jump to a Series of Locations

Related Examples