Slowly fly to a location

Replicates the MapLibre example Slowly fly to a location. A flight’s shape — how slowly it moves, how far it zooms out before panning, its easing curve — is a set of flyTo options. Those are runtime choreography, not map state, so the YAML holds the map and the page JS holds the flight. The button sits in <ml-map>’s top-left slot.

Fly

Press Fly — the camera zooms right out, crosses the globe, and lands

The YAML half

slowly-fly-to-a-location.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/slowly-fly-to-a-location/
# The YAML half: the map. The flight's curve, speed and easing are flyTo
# options — runtime camera choreography — so they live in
# slowly-fly-to-a-location.js, and the button rides a corner slot.
type: map
id: slowly-fly-to-a-location
config:
  center: [-74.5, 40]
  zoom: 9
  mapStyle: "https://tiles.openfreemap.org/styles/bright"

The page half

This markup goes inside <ml-map>; children with a slot ride its corner system.

slowly-fly-to-a-location.html

<div slot="top-left" class="gallery-panel">
  <button type="button" data-fly-toggle>Fly</button>
</div>

The JavaScript half

slowly-fly-to-a-location.js

// The JavaScript half: flyTo with tuned flight options. speed and curve
// shape the arc (zoom far out, pan, zoom back in); easing is any
// t -> t function. Each click aims at whichever end the camera isn't at.
const mapEl = document.querySelector("ml-map");
const start = [-74.5, 40];
const end = [74.5, 40];
let isAtStart = true;

document.querySelector("[data-fly-toggle]").addEventListener("click", async () => {
  const map = await mapEl.mapReady();
  const target = isAtStart ? end : start;
  isAtStart = !isAtStart;

  map.flyTo({
    center: target,
    zoom: 9,
    bearing: 0,
    speed: 0.2, // make the flight slow
    curve: 1, // how far it zooms out before panning
    easing: (t) => t, // linear
    essential: true, // runs even under prefers-reduced-motion
  });
});

What to notice

• speed: 0.2 slows the whole flight; curve: 1 controls how far it zooms out on the way. easing takes any function of t in 0…1.
• essential: true keeps the animation for readers with prefers-reduced-motion — use it only when motion carries meaning.