Live updates with updateData

import { createMap } from "@mapmap/maps";
import type { GeoJSONSource } from "maplibre-gl";

const map = createMap({
  container: "map",
  apiKey: "snk_...",
  attributionPosition: "bottom-left",
  center: [-0.12, 51.51],
  zoom: 11.5,
});
await map.whenReady();

// updateData finds features by id: promoteId names the property holding it.
const vans = Array.from({ length: 40 }, (_, i) => ({
  id: "van-" + i,
  lng: -0.12 + Math.cos(i) * 0.06,
  lat: 51.51 + Math.sin(i * 1.7) * 0.03,
}));

map.map.addSource("vans", {
  type: "geojson",
  data: {
    type: "FeatureCollection",
    features: vans.map((v) => ({
      type: "Feature",
      properties: { id: v.id },
      geometry: { type: "Point", coordinates: [v.lng, v.lat] },
    })),
  },
  promoteId: "id",
});

// Slots arrive in the SDK 0.17: map.slot("middle") replaces "road-labels".
map.map.addLayer({
  id: "vans",
  type: "circle",
  source: "vans",
  paint: {
    "circle-radius": 6,
    "circle-color": "#1a6bff",
    "circle-stroke-color": "#ffffff",
    "circle-stroke-width": 2,
  },
}, "road-labels");

// Stand-in for your feed: nudge every van, then patch only the geometry.
setInterval(async () => {
  for (const v of vans) {
    v.lng += (Math.random() - 0.5) * 0.002;
    v.lat += (Math.random() - 0.5) * 0.0012;
  }
  await map.map.getSource<GeoJSONSource>("vans")?.updateData({
    update: vans.map((v) => ({
      id: v.id,
      newGeometry: { type: "Point", coordinates: [v.lng, v.lat] },
    })),
  });
}, 2000);