Jump to a series of locations

Replicates the MapLibre example Jump to a series of locations. The cities are a layer, so they are YAML. The tour is a sequence of events over time, so it is a few lines of page JS: a timer per stop calling jumpTo on the map mapReady() hands over. The progress readout rides a corner slot of <ml-map>.

Starting the tour…

Every two seconds the camera jumps to the next city

The YAML half

jump-to-a-series-of-locations.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/jump-to-a-series-of-locations/
# The YAML half: the map and the cities as a layer. The tour itself — a
# timer calling jumpTo — is an event sequence, so it lives in
# jump-to-a-series-of-locations.js.
type: map
id: jump-to-a-series-of-locations
config:
  center: [100.507, 13.745]
  zoom: 9
  mapStyle: "https://tiles.openfreemap.org/styles/bright"
layers:
  - id: cities
    type: circle
    source:
      type: geojson
      locations:
        - { coordinates: [100.507, 13.745], name: Bangkok }
        - { coordinates: [98.993, 18.793], name: Chiang Mai }
        - { coordinates: [99.838, 19.924], name: Chiang Rai }
        - { coordinates: [102.812, 17.408], name: Udon Thani }
        - { coordinates: [100.458, 7.001], name: Hat Yai }
        - { coordinates: [100.905, 12.935], name: Pattaya }
    paint:
      circle-radius: 8
      circle-color: "#e76f51"
      circle-stroke-width: 2
      circle-stroke-color: "#ffffff"

The page half

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

jump-to-a-series-of-locations.html

<div slot="bottom-left" class="gallery-panel"><strong data-city>Starting the tour…</strong></div>

The JavaScript half

jump-to-a-series-of-locations.js

// The JavaScript half: a timer sequence calling jumpTo. A tour is a series
// of events, not map state, so YAML declares the cities and the page
// steps through them. mapReady() hands over the live map once loaded.
const mapEl = document.querySelector("ml-map");
const readout = document.querySelector("[data-city]");

const tour = [
  { name: "Bangkok", center: [100.507, 13.745] },
  { name: "Chiang Mai", center: [98.993, 18.793] },
  { name: "Chiang Rai", center: [99.838, 19.924] },
  { name: "Udon Thani", center: [102.812, 17.408] },
  { name: "Hat Yai", center: [100.458, 7.001] },
  { name: "Pattaya", center: [100.905, 12.935] },
];

mapEl.mapReady().then((map) => {
  tour.forEach((city, index) => {
    setTimeout(() => {
      map.jumpTo({ center: city.center });
      readout.textContent = `${index + 1}/${tour.length} · ${city.name}`;
    }, 2000 * index);
  });
});

What to notice

• jumpTo changes the camera instantly; swap in easeTo or flyTo (see Fly to a location) for animated moves with the same arguments.
• The readout is ordinary HTML with slot="bottom-left": <ml-map> moves it into that corner on load and stacks it with any built-in chrome.
• A tour that only needs to frame data on load is declarative: config.fitTo or config.bounds.