Skip to main content

Animate the camera around a point with 3D terrain

Additional Developer Resources

Use the FreeCamera API to create a fly-over animation focused on a point.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animate the camera around a point with 3D terrain</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>

<script>
	// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
	mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    const map = new mapboxgl.Map({
        container: 'map',
        zoom: 11.53,
        center: [138.7189, 35.1691],
        pitch: 76,
        bearing: -177.2,
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        style: 'mapbox://styles/mapbox/satellite-v9',
        interactive: false
    });

    map.on('style.load', () => {
        map.setFog({}); // Set the default atmosphere style

        // Add terrain
        map.addSource('mapbox-dem', {
            'type': 'raster-dem',
            'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
            'tileSize': 512,
            'maxzoom': 14
        });
        map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });
    });

    function updateCameraPosition(position, altitude, target) {
        const camera = map.getFreeCameraOptions();

        camera.position = mapboxgl.MercatorCoordinate.fromLngLat(
            position,
            altitude
        );
        camera.lookAtPoint(target);

        map.setFreeCameraOptions(camera);
    }

    let animationIndex = 0;
    let animationTime = 0.0;

    // wait for the terrain to load before starting animations
    map.once('idle', () => {
        // linearly interpolate between two altitudes/positions based on time
        const lerp = (a, b, t) => {
            if (Array.isArray(a) && Array.isArray(b)) {
                const result = [];
                for (let i = 0; i < Math.min(a.length, b.length); i++)
                    result[i] = a[i] * (1.0 - t) + b[i] * t;
                return result;
            } else {
                return a * (1.0 - t) + b * t;
            }
        };

        const animations = [
            {
                duration: 20000.0,
                animate: (phase) => {
                    const start = [138.73375, 35.41914];
                    const end = [138.72649, 35.33974];
                    const alt = [7000.0, 6000.0];

                    // interpolate camera position while keeping focus on a target lat/lng
                    const position = lerp(start, end, phase);
                    const altitude = lerp(alt[0], alt[1], phase);
                    const target = [138.73036, 35.36197];

                    updateCameraPosition(position, altitude, target);
                }
            },
            {
                duration: 15000.0,
                animate: (phase) => {
                    const start = [138.72649, 35.33974];
                    const end = [138.72623, 35.31977];
                    const alt = [6000.0, 6000.0];
                    const target1 = [138.73036, 35.36197];
                    const target2 = [138.74831, 35.34784];

                    // interpolate both the camera position and target
                    const position = lerp(start, end, phase);
                    const altitude = lerp(alt[0], alt[1], phase);
                    const target = lerp(target1, target2, phase);

                    updateCameraPosition(position, altitude, target);
                }
            },
            {
                duration: 15000.0,
                animate: (phase) => {
                    // create easing function for the animation
                    const easeInOutQuad = (t) => {
                        return t < 0.5
                            ? 2.0 * t * t
                            : (4.0 - 2.0 * t) * t - 1.0;
                    };
                    const start = [138.72623, 35.31977];
                    const end = [138.73375, 35.41914];
                    const alt = [6000.0, 7000.0];
                    const target1 = [138.74831, 35.34784];
                    const target2 = [138.73036, 35.36197];

                    // interpolate both the camera position and target
                    const position = lerp(start, end, easeInOutQuad(phase));
                    const altitude = lerp(alt[0], alt[1], phase);
                    const target = lerp(target1, target2, phase);

                    updateCameraPosition(position, altitude, target);
                }
            }
        ];

        let lastTime = 0.0;
        function frame(time) {
            animationIndex %= animations.length;
            const current = animations[animationIndex];

            if (animationTime < current.duration) {
                // Normalize the duration between 0 and 1 to interpolate the animation
                const phase = animationTime / current.duration;
                current.animate(phase);
            }

            // Elasped time since last frame, in milliseconds
            const elapsed = time - lastTime;
            animationTime += elapsed;
            lastTime = time;

            if (animationTime > current.duration) {
                animationIndex++;
                animationTime = 0.0;
            }

            window.requestAnimationFrame(frame);
        }

        window.requestAnimationFrame(frame);
    });
</script>

</body>
</html>
This code snippet will not work as expected until you replace YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.
Additional Developer Resources
Was this example helpful?