Animate map camera around a point

Replicates the MapLibre example Animate map camera around a point. The pitched camera over Chicago is YAML. The orbit is a requestAnimationFrame loop calling rotateTo with duration: 0, so the bearing tracks the clock. Upstream also strips the basemap’s text labels for a cleaner orbit; the basemap belongs to the style, not the document, so that step is page JS too.

The camera circles the point at about ten degrees a second

The YAML half

animate-map-camera-around-a-point.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-map-camera-around-a-point/
# The YAML half: the pitched camera over Chicago. The orbit is a
# requestAnimationFrame loop calling rotateTo — see
# animate-map-camera-around-a-point.js.
type: map
id: animate-map-camera-around-a-point
config:
  center: [-87.62712, 41.89033]
  zoom: 15.5
  pitch: 45
  mapStyle: "https://tiles.openfreemap.org/styles/liberty"

The JavaScript half

animate-map-camera-around-a-point.js

// The JavaScript half: a requestAnimationFrame loop calling rotateTo with
// duration 0, so the bearing tracks the clock (~10 degrees a second).
// Upstream also strips the basemap's text labels for a cleaner orbit —
// the basemap is the style's, not the document's, so that is JS too.
const mapEl = document.querySelector("ml-map");

mapEl.mapReady().then((map) => {
  for (const layer of map.getStyle().layers) {
    if (layer.type === "symbol" && layer.layout?.["text-field"]) {
      map.removeLayer(layer.id);
    }
  }

  function rotateCamera(timestamp) {
    map.rotateTo((timestamp / 100) % 360, { duration: 0 });
    requestAnimationFrame(rotateCamera);
  }
  requestAnimationFrame(rotateCamera);
});

What to notice

• rotateTo(bearing, { duration: 0 }) sets the bearing without starting an animation of its own, so the loop stays in control.
• Removing basemap layers is a runtime edit to a style the document only references. To hide labels in layers the document authors, set visible: false in YAML instead.