Add a video
This example adds a georeferenced video on top of a map layer with satellite imagery.
It adds a raster
source for the satellite imagery and a video
source for the video, then adds raster
layers for each of those sources.
Then it adds user interactivity by using the click
event to enable pause and play video controls.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add a video</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.7.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.7.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 videoStyle = {
'version': 8,
'sources': {
'satellite': {
'type': 'raster',
'url': 'mapbox://mapbox.satellite',
'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': 'satellite',
'type': 'raster',
'source': 'satellite'
},
{
'id': 'video',
'type': 'raster',
'source': 'video'
}
]
};
const map = new mapboxgl.Map({
container: 'map',
minZoom: 14,
zoom: 17,
center: [-122.514426, 37.562984],
bearing: -96,
style: videoStyle
});
let playingVideo = true;
map.on('click', () => {
playingVideo = !playingVideo;
if (playingVideo) {
map.getSource('video').play();
} else {
map.getSource('video').pause();
}
});
</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.import React, { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
const MapboxExample = () => {
const mapContainerRef = useRef();
const mapRef = useRef();
useEffect(() => {
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
const videoStyle = {
version: 8,
sources: {
satellite: {
type: 'raster',
url: 'mapbox://mapbox.satellite',
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: 'satellite',
type: 'raster',
source: 'satellite'
},
{
id: 'video',
type: 'raster',
source: 'video'
}
]
};
mapRef.current = new mapboxgl.Map({
container: mapContainerRef.current,
minZoom: 14,
zoom: 17,
center: [-122.514426, 37.562984],
bearing: -96,
style: videoStyle
});
let playingVideo = true;
mapRef.current.on('click', () => {
playingVideo = !playingVideo;
if (playingVideo) {
mapRef.current.getSource('video').play();
} else {
mapRef.current.getSource('video').pause();
}
});
return () => mapRef.current.remove();
}, []);
return <div id="map" style={{ height: '100%' }} ref={mapContainerRef}></div>;
};
export default MapboxExample;
This code snippet will not work as expected until you replace
YOUR_MAPBOX_ACCESS_TOKEN
with an access token from your Mapbox account.Was this example helpful?