Animate a point

Replicates the MapLibre example Animate a point. The upstream version reaches into map.getSource(...).setData(); here the loop feeds <ml-map>’s own updateLayerData() — no source-id bookkeeping.

The point orbits at ~16fps

The YAML half

animate-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-a-point/
# The YAML half: the layer and its starting position. The animation loop
# feeds new data through <ml-map>'s updateLayerData() — see animate-a-point.js.
type: map
id: animate-a-point
config:
  center: [0, 0]
  zoom: 2
  mapStyle: "https://demotiles.maplibre.org/style.json"
layers:
  - id: orbiter
    type: circle
    source:
      type: geojson
      location:
        name: Orbiter
        coordinates: [20, 0]
    paint:
      circle-radius: 10
      circle-color: "#e63946"
      circle-stroke-width: 2
      circle-stroke-color: "#ffffff"

The JavaScript half

animate-a-point.js

// The JavaScript half: <ml-map>'s imperative data API. updateLayerData()
// replaces a layer's GeoJSON — no getMap(), no source-id bookkeeping; the
// element resolves the layer's source itself. The upstream version does
// this dance with map.getSource(...).setData().
const mapEl = document.querySelector("ml-map");
let angle = 0;

setInterval(() => {
  angle += 2;
  const rad = (angle * Math.PI) / 180;
  mapEl.updateLayerData?.("orbiter", {
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        geometry: { type: "Point", coordinates: [20 * Math.cos(rad), 20 * Math.sin(rad)] },
        properties: { name: "Orbiter" },
      },
    ],
  });
}, 60);

What to notice

• updateLayerData(layerId, geojson) is the element’s imperative data API — it resolves the layer’s source itself, and feature-state survives the same way refresh: updates do.
• For data that changes on the server, prefer the declarative refresh:/stream: source config; this page JavaScript is for client-computed motion.