Fly to a location

Replicates the MapLibre example Fly to a location. Runtime camera moves have no declarative surface (by design — they’re events, not state), so this page pairs a YAML map with a few lines of page JavaScript through the documented getMap() method.

Fly to London Fly to Paris Fly to Dublin

The YAML half

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/fly-to-a-location/
# The YAML half: the map itself. Runtime camera moves live in the page's
# JS via getMap() — see fly-to-a-location.js next to this file's page.
type: map
id: fly-to-a-location
config:
  center: [-2.2, 53.5]
  zoom: 4
  mapStyle: "https://demotiles.maplibre.org/style.json"

The page half

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

fly-to-a-location.html

<div slot="top-left" class="gallery-panel">
  <button type="button" data-fly="[-0.1276,51.5072]">Fly to London</button>
  <button type="button" data-fly="[2.3522,48.8566]">Fly to Paris</button>
  <button type="button" data-fly="[-6.2603,53.3498]">Fly to Dublin</button>
</div>

The JavaScript half

fly-to-a-location.js

// The JavaScript half: `mapReady()` resolves with the live maplibregl.Map once
// the document has loaded — no load-event listener, no null-guard (the
// boilerplate this idiom replaced in 0.7). Buttons carry their target in a
// data attribute; the YAML stays purely declarative.
const mapEl = document.querySelector("ml-map");

for (const btn of document.querySelectorAll("[data-fly]")) {
  btn.addEventListener("click", async () => {
    const map = await mapEl.mapReady();
    map.flyTo({ center: JSON.parse(btn.dataset.fly), zoom: 9, duration: 2500 });
  });
}

What to notice

• await mapEl.mapReady() resolves with the live maplibregl.Map — the whole imperative API is available without leaving YAML, and the promise replaces the old load-listener + getMap() null-guard boilerplate.
• The division of labor is deliberate: the map is declarative state (YAML); a camera flight is an event, so it lives in event-handling code.
• The same page pattern covers easeTo, jumpTo, and fitBounds.
• The buttons are <ml-map> slot children (slot="top-left"): the element moves them into the map corner on load, so the controls sit on the map without any absolute positioning in the page.