Plot lightning strikes on a Leaflet map.

Do not put your API key in browser code. Anything in a script tag is public. Proxy the request through your own backend and keep the key there.

app/api/flashes/route.ts

export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const qs = new URLSearchParams({
    since_minutes: searchParams.get("since_minutes") ?? "15",
    min_lat: searchParams.get("min_lat") ?? "",
    max_lat: searchParams.get("max_lat") ?? "",
    min_lon: searchParams.get("min_lon") ?? "",
    max_lon: searchParams.get("max_lon") ?? "",
  });

  const res = await fetch(`https://api.lightningapi.dev/v1/flashes?${qs}`, {
    headers: { "X-API-Key": process.env.LIGHTNING_API_KEY! },
    next: { revalidate: 20 },
  });

  return new Response(await res.text(), {
    status: res.status,
    headers: { "content-type": "application/json" },
  });
}

The twenty second revalidate window matches how often the underlying data changes, so several users sharing a map do not each spend a call.

Lightning layer

const lightning = L.layerGroup().addTo(map);

async function refresh() {
  const b = map.getBounds();
  const qs = new URLSearchParams({
    since_minutes: "15",
    min_lat: b.getSouth().toFixed(3),
    max_lat: b.getNorth().toFixed(3),
    min_lon: b.getWest().toFixed(3),
    max_lon: b.getEast().toFixed(3),
  });

  const res = await fetch("/api/flashes?" + qs);
  if (!res.ok) return;
  const { flashes = [] } = await res.json();

  lightning.clearLayers();
  for (const f of flashes) {
    L.circleMarker([f.lat, f.lon], {
      radius: 4,
      weight: 0,
      fillColor: "#ffd166",
      fillOpacity: 0.85,
    }).addTo(lightning);
  }
}

refresh();
setInterval(refresh, 20000);
map.on("moveend", refresh);