Video overlay

Play a video on the map, pinned to four corners like an image. This loop is MapMap's own render of the light moving round Kynance Cove over Environment Agency LiDAR, and the controls are plain pause and play calls on the source.

import { createMap } from "@mapmap/maps";
import type { VideoSource } from "maplibre-gl";

const map = createMap({
  container: "map",
  apiKey: "snk_...",
  attributionPosition: "bottom-left",
  center: [-5.2275, 49.9752],
  zoom: 14.2,
  mapOptions: {
    attributionControl: {
      customAttribution:
        "Contains Environment Agency information, OGL v3.0",
    },
  },
});
await map.whenReady();

map.map.addSource("light", {
  type: "video",
  // Several encodings; the browser plays the first it supports.
  urls: [
    "https://mapmap.ai/data/examples/kynance-cove-light.mp4",
    "https://mapmap.ai/data/examples/kynance-cove-light.webm",
  ],
  coordinates: [
    [-5.243262, 49.983953],   // top left
    [-5.213107, 49.984793],   // top right
    [-5.211856, 49.966020],   // bottom right
    [-5.242000, 49.965180],   // bottom left
  ],
});

// Slots arrive in the SDK 0.17: map.slot("middle") replaces "road-labels".
map.map.addLayer({
  id: "light",
  type: "raster",
  source: "light",
  paint: { "raster-opacity": 0.9 },
}, "road-labels");

// Pause and resume, for a button of your own.
const video = map.map.getSource<VideoSource>("light");
document.querySelector("#pause")?.addEventListener("click", () => video?.pause());
document.querySelector("#play")?.addEventListener("click", () => video?.play());

Worth knowing

MapLibre creates the video element muted and looping, which is what lets it autoplay. getSource("light").getVideo() hands you the element for anything else, such as playbackRate.
Like an image, the video must be served with CORS headers, and the file is downloaded in full: keep overlay loops short and small (the MP4 here is about 130 KB).
Video sources are a MapLibre GL JS feature. MapLibre Native on iOS and Android has no video source, so plan a still image fallback for the apps.

Raster, image and video sources Next: Your own XYZ raster tiles