Animate a series of images

Replicates the MapLibre example Animate a series of images. The image source — URL plus four corner coordinates — is YAML, declared inline on its raster layer. Stepping through the radar frames is a timer calling the source’s updateImage(). Because the YAML never named the source, the page asks the layer which source it draws from.

Five radar frames loop over the north-eastern United States

The YAML half

animate-a-series-of-images.yaml

# yaml-language-server: $schema=https://docs.maplibre-yaml.org/schema/latest/map.schema.json
# Gallery twin of https://maplibre.org/maplibre-gl-js/docs/examples/animate-a-series-of-images/
# The YAML half: an `image` source pinned to four corners, drawn by a
# raster layer, showing the first radar frame. Stepping through the other
# frames is a timer calling the source's updateImage() — see
# animate-a-series-of-images.js.
type: map
id: animate-a-series-of-images
config:
  center: [-75.789, 41.874]
  zoom: 5
  minZoom: 4
  maxZoom: 5.99
  mapStyle: "https://demotiles.maplibre.org/style.json"
layers:
  - id: radar-layer
    type: raster
    source:
      type: image
      url: "/gallery-assets/radar0.gif"
      coordinates:
        - [-80.425, 46.437]
        - [-71.516, 46.437]
        - [-71.516, 37.936]
        - [-80.425, 37.936]
    paint:
      raster-fade-duration: 0

The JavaScript half

animate-a-series-of-images.js

// The JavaScript half: an image source's updateImage(). The YAML declared
// the source inline on the layer, so the page asks the layer which source
// it draws from, then swaps that source's frame every 200 ms.
const mapEl = document.querySelector("ml-map");
const frameCount = 5;
let currentImage = 0;

mapEl.mapReady().then((map) => {
  const source = map.getSource(map.getLayer("radar-layer").source);
  setInterval(() => {
    currentImage = (currentImage + 1) % frameCount;
    source.updateImage({ url: `/gallery-assets/radar${currentImage}.gif` });
  }, 200);
});

What to notice

• map.getLayer(id).source is the bridge from a YAML layer id to the source MapLibre created for it.
• raster-fade-duration: 0 stops each frame cross-fading into the next.
• Radar frames: the upstream example’s assets, served locally.