Video on a Map
Display a video on top of a satellite raster baselayer.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Video on a Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.3.css" />
<script src="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.3.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
html,
body,
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
const videoStyle = {
version: 8,
sources: {
video: {
type: 'video',
urls: [
'https://developer.trimblemaps.com/maps-sdk/assets/drone.mp4',
],
coordinates: [
[-122.51596391201019, 37.56238816766053],
[-122.51467645168304, 37.56410183312965],
[-122.51309394836426, 37.563391708549425],
[-122.51423120498657, 37.56161849366671],
],
},
},
layers: [
{
id: 'video',
type: 'raster',
source: 'video',
},
],
};
TrimbleMaps.setAPIKey('68B06901AF7DA34884CE5FB7A202A743');
const map = new TrimbleMaps.Map({
container: 'map',
minZoom: 14,
zoom: 17,
center: [-122.514426, 37.562984],
bearing: -96,
style: TrimbleMaps.Common.Style.SATELLITE,
});
map.on('load', () => {
map.addSource('video', videoStyle.sources.video);
map.addLayer(videoStyle.layers[0]);
});
let playingVideo = true;
map.on('click', () => {
playingVideo = !playingVideo;
if (playingVideo) map.getSource('video').play();
else map.getSource('video').pause();
});
</script>
</body>
</html>
Video on a Map
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Video on a Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.3.css" />
<script src="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.3.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
html,
body,
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
const videoStyle = {
version: 8,
sources: {
video: {
type: 'video',
urls: [
'https://developer.trimblemaps.com/maps-sdk/assets/drone.mp4',
],
coordinates: [
[-122.51596391201019, 37.56238816766053],
[-122.51467645168304, 37.56410183312965],
[-122.51309394836426, 37.563391708549425],
[-122.51423120498657, 37.56161849366671],
],
},
},
layers: [
{
id: 'video',
type: 'raster',
source: 'video',
},
],
};
TrimbleMaps.setAPIKey('68B06901AF7DA34884CE5FB7A202A743');
const map = new TrimbleMaps.Map({
container: 'map',
minZoom: 14,
zoom: 17,
center: [-122.514426, 37.562984],
bearing: -96,
style: TrimbleMaps.Common.Style.SATELLITE,
});
map.on('load', () => {
map.addSource('video', videoStyle.sources.video);
map.addLayer(videoStyle.layers[0]);
});
let playingVideo = true;
map.on('click', () => {
playingVideo = !playingVideo;
if (playingVideo) map.getSource('video').play();
else map.getSource('video').pause();
});
</script>
</body>
</html>