const bounds = map.getBounds(); // Navvo Maps
const bbox = [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()].join(",");

const cover = await (await fetch(
  "https://navvo.io/api/v1/traffic/lines/tile-cover?" + new URLSearchParams({ bbox, zoom: "14" }),
  { headers: { "x-api-key": KEY } }
)).json();
// cover.tiles -> [{ z, x, y, url }]

const features = [];
for (const t of cover.tiles) {
  const fc = await (await fetch(`https://navvo.io${t.url}`, { headers: { "x-api-key": KEY } })).json();
  if (fc.hasData) features.push(...fc.features);
}
const geojson = { type: "FeatureCollection", features };

map.addSource("traffic", { type: "geojson", data: geojson });
map.addLayer({
  id: "traffic",
  type: "line",
  source: "traffic",
  paint: {
    "line-color": ["get", "color"],
    "line-width": ["interpolate", ["linear"], ["zoom"], 10, 1.5, 16, 5],
  },
});

map.addSource("traffic", {
  type: "vector",
  tiles: ["https://navvo.io/api/v1/telemetry/traffic-overlay/vector/{z}/{x}/{y}.pbf?mode=current"],
  minzoom: 8,
  maxzoom: 16,
});
map.addLayer({
  id: "traffic",
  type: "line",
  source: "traffic",
  "source-layer": "navvo_traffic",
  paint: {
    "line-width": 3,
    "line-color": [
      "match", ["get", "congestion"],
      "light", "#188038",
      "moderate", "#D9A441",
      "heavy", "#D94B4B",
      "blocked", "#8B1A1A",
      "#188038",
    ],
  },
});

const s = await (await fetch(
  "https://navvo.io/api/v1/traffic/summary?bbox=" + bbox, { headers: { "x-api-key": KEY } }
)).json();
// s.conditions.summary -> "Slow moving"