Tile API

Integration

Integration

Whichever renderer you run, the pattern is the same: fetch the overlay specification with your publishable key, add the sources it returns, then add its layers. The GL-based renderers (MapLibre, Mapbox, MapTiler) share an addSource / addLayer surface, so the code is nearly identical. deck.gl is layer-oriented and consumes the tile templates directly.

Each tab below renders the hillshade overlay. Swap the slug in the specification URL for any overlay in the catalog, and add a ?timestamp= parameter to tile requests for the time-varying weather and snow overlays. The Tile API reference documents the specification and tile endpoints in full.

With maplibre-gl, add each source by id, then add each layer with the paint and layout from the specification.

import maplibregl from "maplibre-gl";

async function addOverlay(map, overlay) {
  const response = await fetch(
    `https://tiles.mountaya.com/v1/overlays/${overlay}/specification`,
    { headers: { "X-API-Key": "pk_your_publishable_key" } },
  );
  const { data } = await response.json();

  for (const source of data.sources) {
    map.addSource(source.id, {
      type: source.type,
      tiles: source.tiles,
      minzoom: source.zoom_min,
      maxzoom: source.zoom_max,
      attribution: source.attribution,
      ...(source.type === "raster" ? { tileSize: source.size } : {}),
    });

    for (const layer of source.layers) {
      map.addLayer({
        id: layer.id,
        type: layer.type,
        source: source.id,
        "source-layer": layer["source-layer"],
        paint: layer.paint,
        layout: layer.layout,
      });
    }
  }
}

map.on("load", () => addOverlay(map, "hillshade"));

Next steps