maplibre-gl-video-export

Record map animations to video

Maintained by Brice Person

A MapLibre GL JS control that records camera animations of the map (orbits, flights between waypoints, custom paths) to WebM or MP4 video in the browser, frame by frame.

Live demo

maplibre-gl-video-export running on MapLibre GL JS in your browser

Loading the map…

Demo code

import VideoExportControl from "maplibre-gl-video-export";
import type { PluginDemo } from "../types";

export default {
  center: [2.2945, 48.8584], // the Eiffel Tower
  zoom: 15,
  pitch: 50,
  run({ map, maplibregl, container }) {
    // The plugin drives MapLibre's frame clock through a global maplibregl, as with a script tag.
    Object.assign(window, { maplibregl });

    // Records a camera animation of the map to WebM or MP4, right in the browser.
    map.addControl(
      new VideoExportControl({ animation: "orbit", duration: 10000, resolution: "hd" }),
      "top-left",
    );

    // Open its settings panel; "Start recording" there runs the orbit and saves the video.
    container.querySelector<HTMLButtonElement>(".maplibregl-ctrl-top-left button")?.click();
  },
} satisfies PluginDemo;