Skip to content

Display on a Map

How to render an ADAM collection on an interactive web map. The API exposes ready-made TileJSON and StyleJSON descriptors — the same ones the Live Map consumes — so you do not need to hand-roll vector source wiring.

Two paths, from simplest to most flexible:

  1. Load the server's style.json as the entire map style — one line
  2. Wire up the collection as a vector source via tilejson.json — full control

Path 1 — Server-provided style (one line)

Paste this into an HTML file, open it in a browser:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ADAM — earthquakes</title>
  <link href="https://unpkg.com/maplibre-gl@4/dist/maplibre-gl.css" rel="stylesheet">
  <script src="https://unpkg.com/maplibre-gl@4/dist/maplibre-gl.js"></script>
  <style>body, html, #map { margin: 0; height: 100vh; }</style>
</head>
<body>
  <div id="map"></div>
  <script>
    new maplibregl.Map({
      container: "map",
      style: "https://api.adam.geospatial.wfp.org/api/collections/adam.adam_eq_events/tiles/WebMercatorQuad/style.json",
      center: [30, 20],
      zoom: 2,
    });
  </script>
</body>
</html>

That is the whole integration. The server picks sensible defaults (basemap + collection rendering).

Swap adam.adam_eq_events for any other collection id.

Path 2 — Custom style with TileJSON

Use this when you want to combine ADAM tiles with your own basemap, layer together multiple collections, or fully control styling.

const COLLECTION = "adam.adam_eq_events";
const BASE = "https://api.adam.geospatial.wfp.org/api";
const tilejsonUrl =
  `${BASE}/collections/${COLLECTION}/tiles/WebMercatorQuad/tilejson.json`;

const map = new maplibregl.Map({
  container: "map",
  style: "https://demotiles.maplibre.org/style.json",  // your basemap
  center: [30, 20],
  zoom: 2,
});

map.on("load", () => {
  // Add ADAM as a vector source
  map.addSource("adam", { type: "vector", url: tilejsonUrl });

  // Render it — pick the source-layer from the TileJSON
  map.addLayer({
    id: "adam-events",
    type: "circle",
    source: "adam",
    "source-layer": COLLECTION,  // the collection id is the source-layer name
    paint: {
      "circle-radius": [
        "interpolate", ["linear"], ["get", "mag"],
        4, 2,
        8, 12
      ],
      "circle-color": "#e63946",
      "circle-opacity": 0.8,
    },
  });
});

A few details:

  • source-layer name: usually matches the collection id, but confirm by fetching tilejson.json and reading the vector_layers array.
  • Zoom range: the TileJSON declares minzoom / maxzoom; honour them to avoid fetching tiles that do not exist.
  • Attribution: keep the attribution string from the TileJSON — MapLibre picks it up automatically.

Layering multiple collections

For a cyclone view you often want the track, its buffers, and the event point together. Add each as a separate source and style them as distinct MapLibre layers:

const layers = [
  "adam.adam_ts_buffers",
  "adam.adam_ts_tracks",
  "adam.adam_ts_events",
];

map.on("load", () => {
  for (const id of layers) {
    map.addSource(id, {
      type: "vector",
      url: `${BASE}/collections/${id}/tiles/WebMercatorQuad/tilejson.json`,
    });
    map.addLayer({
      id,
      type: id.endsWith("_buffers") ? "fill" : id.endsWith("_tracks") ? "line" : "circle",
      source: id,
      "source-layer": id,
      paint: { /* per-layer styling */ },
    });
  }
});

Alternative tile matrix sets

WebMercatorQuad is the right choice 95% of the time — every web map library expects it. Use a different tileMatrixSetId only if the rest of your stack is in a non-Web-Mercator projection:

GET /tileMatrixSets

ADAM ships 13 matrix sets; notable alternatives are WorldCRS84Quad (EPSG:4326 global) and UTM variants.

No-code preview

For sanity checks, every collection exposes an interactive HTML viewer:

/api/collections/{collectionId}/tiles/WebMercatorQuad/map.html

No setup, no code. Useful for sharing a link to a colleague or dropping into a Jira ticket.

Next steps

Live references