Add live realtime data

Replicates the MapLibre example Add live realtime data: a layer that re-fetches its remote feed on an interval — here the USGS live earthquake feed (upstream’s wanderdrone endpoint no longer serves CORS headers). The upstream version hand-rolls setInterval + fetch + setData; here polling is two lines of source config.

The layer re-polls the USGS feed every 15 seconds

The complete document

add-live-realtime-data.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/add-live-realtime-data/
# The upstream version hand-rolls window.setInterval + fetch + setData;
# here polling is two lines of source config. (Upstream polls
# wanderdrone.appspot.com, which no longer serves CORS headers — this
# page polls the USGS live earthquake feed instead.)
type: map
id: add-live-realtime-data
config:
  center: [-40, 30]
  zoom: 1
  mapStyle: "https://demotiles.maplibre.org/style.json"
layers:
  - id: drone
    type: circle
    source:
      type: geojson
      url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson"
      refresh:
        refreshInterval: 15000
        updateStrategy: replace
    paint:
      circle-radius: 10
      circle-color: "#e63946"
      circle-stroke-width: 2
      circle-stroke-color: "#ffffff"

What to notice

• refresh.refreshInterval + updateStrategy cover the poll loop; merge and append-window strategies (with updateKey/windowSize) handle feeds that accumulate rather than replace.
• For push instead of poll, the same source takes a stream: block (SSE or WebSocket) — see the live-data guide.