Add a Video

Display a video overlay on top of a raster map. Click the map to pause or resume the video.

const API_KEY = 'toursprung';

    const videoStyle = {
        version: 8,
        sources: {
            'raster-map': {
                type: 'raster',
                tiles: [`https://rtc-cdn.maptoolkit.net/rtc/toursprung-terrain/{z}/{x}/{y}.png?api_key=${API_KEY}`],
                tileSize: 256
            },
            video: {
                type: 'video',
                urls: [
                    'https://static-assets.mapbox.com/mapbox-gl-js/drone.mp4',
                    'https://static-assets.mapbox.com/mapbox-gl-js/drone.webm'
                ],
                coordinates: [
                    [-122.51596391201019, 37.56238816766053],
                    [-122.51467645168304, 37.56410183312965],
                    [-122.51309394836426, 37.563391708549425],
                    [-122.51423120498657, 37.56161849366671]
                ]
            }
        },
        layers: [
            { id: 'background', type: 'background', paint: { 'background-color': 'rgb(4,7,14)' } },
            { id: 'raster-map', type: 'raster', source: 'raster-map' },
            { id: 'video', type: 'raster', source: 'video' }
        ]
    };

    const map = new maptoolkit.Map({
        container: 'map',
        minZoom: 14,
        zoom: 17,
        center: [-122.514426, 37.562984],
        bearing: -96,
        style: videoStyle,
        attributionControl: { compact: false }
    });

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

    let playingVideo = true;

    map.on('click', () => {
        playingVideo = !playingVideo;
        if (playingVideo) map.getSource('video').play();
        else map.getSource('video').pause();
    });

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Add a Video – Maptoolkit Maps JS</title>
    <meta property="og:description" content="Display a video overlay on top of a raster map." />
    <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>
        html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
        #map { width: 100%; height: 100%; }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    const API_KEY = 'toursprung';

    const videoStyle = {
        version: 8,
        sources: {
            'raster-map': {
                type: 'raster',
                tiles: [`https://rtc-cdn.maptoolkit.net/rtc/toursprung-terrain/{z}/{x}/{y}.png?api_key=${API_KEY}`],
                tileSize: 256
            },
            video: {
                type: 'video',
                urls: [
                    'https://static-assets.mapbox.com/mapbox-gl-js/drone.mp4',
                    'https://static-assets.mapbox.com/mapbox-gl-js/drone.webm'
                ],
                coordinates: [
                    [-122.51596391201019, 37.56238816766053],
                    [-122.51467645168304, 37.56410183312965],
                    [-122.51309394836426, 37.563391708549425],
                    [-122.51423120498657, 37.56161849366671]
                ]
            }
        },
        layers: [
            { id: 'background', type: 'background', paint: { 'background-color': 'rgb(4,7,14)' } },
            { id: 'raster-map', type: 'raster', source: 'raster-map' },
            { id: 'video', type: 'raster', source: 'video' }
        ]
    };

    const map = new maptoolkit.Map({
        container: 'map',
        minZoom: 14,
        zoom: 17,
        center: [-122.514426, 37.562984],
        bearing: -96,
        style: videoStyle,
        attributionControl: { compact: false }
    });

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

    let playingVideo = true;

    map.on('click', () => {
        playingVideo = !playingVideo;
        if (playingVideo) map.getSource('video').play();
        else map.getSource('video').pause();
    });
</script>
</body>
</html>

Add a Vector Tile Source Add a WMS Source