Fly to a Location Based on Scroll Position

Move the map camera as the user scrolls down the page.

const API_KEY = 'toursprung';

    const map = new maptoolkit.Map({
        container: 'map',
        style: `https://static.maptoolkit.net/styles/toursprung/terrain.json?api_key=${API_KEY}`,
        center: [11.39085, 47.27574],
        zoom: 12,
        interactive: false,
        attributionControl: { compact: false }
    });

    const steps = document.querySelectorAll('.step');

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const el = entry.target;
                const [lng, lat] = el.dataset.center.split(',').map(Number);
                const zoom = Number(el.dataset.zoom);
                map.flyTo({ center: [lng, lat], zoom, essential: true });
            }
        });
    }, { threshold: 0.5 });

    steps.forEach(step => observer.observe(step));

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Fly to a Location Based on Scroll Position – Maptoolkit Maps JS</title>
    <meta property="og:description" content="Move the map camera as the user scrolls down the page." />
    <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.2/dist/maptoolkit.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@maptoolkit/maps@11.0.0-beta.2/dist/maptoolkit.css" />
    <style>
        body { margin: 0; padding: 0; }
        #map { position: sticky; top: 0; width: 100%; height: 100vh; }
        #story {
            position: relative;
            z-index: 1;
            pointer-events: none;
        }
        .step {
            height: 100vh;
            display: flex;
            align-items: center;
            padding: 0 40px;
        }
        .step-inner {
            background: rgba(255,255,255,0.9);
            padding: 20px;
            border-radius: 8px;
            max-width: 300px;
            pointer-events: auto;
        }
    </style>
</head>
<body>
<div id="map"></div>
<div id="story">
    <div class="step" data-center="11.39085,47.27574" data-zoom="12">
        <div class="step-inner"><h3>Innsbruck</h3><p>Capital of Tyrol, nestled in the Alps at 574 m elevation.</p></div>
    </div>
    <div class="step" data-center="13.0550,47.8095" data-zoom="13">
        <div class="step-inner"><h3>Salzburg</h3><p>Birthplace of Mozart and UNESCO World Heritage city.</p></div>
    </div>
    <div class="step" data-center="16.3738,48.2082" data-zoom="13">
        <div class="step-inner"><h3>Vienna</h3><p>Austria's capital and cultural heart on the Danube.</p></div>
    </div>
</div>
<script>
    const API_KEY = 'toursprung';

    const map = new maptoolkit.Map({
        container: 'map',
        style: `https://static.maptoolkit.net/styles/toursprung/terrain.json?api_key=${API_KEY}`,
        center: [11.39085, 47.27574],
        zoom: 12,
        interactive: false,
        attributionControl: { compact: false }
    });

    const steps = document.querySelectorAll('.step');

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const el = entry.target;
                const [lng, lat] = el.dataset.center.split(',').map(Number);
                const zoom = Number(el.dataset.zoom);
                map.flyTo({ center: [lng, lat], zoom, essential: true });
            }
        });
    }, { threshold: 0.5 });

    steps.forEach(step => observer.observe(step));
</script>
</body>
</html>

Fly to a Location Get Coordinates of the Mouse Pointer