Earthquake tracker

A map that keeps itself current: it reads the past week of earthquakes from the USGS feed, fetches the feed again every minute, and redraws. Use this pattern for any feed that returns its whole current state each time you ask.

USGS earthquakes of the past week, fetched again every minute

Edit this map in the playground

# yaml-language-server: $schema=https://docs.maplibre-yaml.org/schema/latest/map.schema.json
type: map
id: earthquake-tracker
config:
  center: [-120, 40]
  zoom: 4
  mapStyle: "https://tiles.openfreemap.org/styles/liberty"
layers:
  - id: earthquakes
    type: circle
    source:
      type: geojson
      url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson"
      refresh:
        refreshInterval: 60000     # fetch again every 60 seconds
        updateStrategy: replace    # each response is the full list
    paint:
      circle-color:
        - interpolate
        - ["linear"]
        - ["get", "mag"]
        - 0
        - "#22c55e"   # magnitude 0: green
        - 2
        - "#eab308"   # 2: yellow
        - 4
        - "#f97316"   # 4: orange
        - 6
        - "#dc2626"   # 6 and above: red
      circle-radius:
        - interpolate
        - ["linear"]
        - ["get", "mag"]
        - 0
        - 3
        - 2
        - 6
        - 4
        - 12
        - 6
        - 24
      circle-opacity: 0.75
      circle-stroke-width: 1
      circle-stroke-color: "#ffffff"
    interactive:
      hover:
        cursor: pointer
      click:
        popup:
          - h3:
              - property: title
          - p:
              - str: "Magnitude: "
              - property: mag
                format: { max-fraction-digits: 1 }
controls:
  navigation: true
  scale: true

How it works

refresh: polls the feed. refreshInterval is in milliseconds. updateStrategy: replace swaps the whole layer for each response, which fits a feed that always returns the full list. Each poll asks the server again, never the data cache, so the map shows the feed’s latest answer.

source:
  type: geojson
  url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson"
  refresh:
    refreshInterval: 60000     # fetch again every 60 seconds
    updateStrategy: replace    # each response is the full list

Polling pauses while the browser tab is hidden. The USGS feed allows cross-origin requests, which a feed on another site must do for the browser to read it (Loading data explains CORS).

Color and size by magnitude. Two interpolate expressions read mag: the color runs from green at 0 to red at 6 and above, and the radius from 3 px to 24 px.

circle-color:
  - interpolate
  - ["linear"]
  - ["get", "mag"]
  - 0
  - "#22c55e"   # magnitude 0: green
  - 2
  - "#eab308"   # 2: yellow
  - 4
  - "#f97316"   # 4: orange
  - 6
  - "#dc2626"   # 6 and above: red

The popup shows the feed’s title and the magnitude, written with one decimal place by format:.

Live data & streaming: the other update strategies (merge for things with an id that move, such as vehicles), push streams (SSE and WebSocket), and events for each update.
Reference: refresh: and cache:.

Earthquake tracker

How it works

Next