Building a Climate Data Dashboard with Next.js and MapLibre

Most climate data is geospatial and time-based, and most of the people who need it aren't GIS experts. That makes the dashboard the product. I've built map-heavy interfaces for air quality (Vayu) and for EUDR plot validation. These are the patterns that hold up.

Setup: MapLibre in Next.js

MapLibre needs the browser, so load it client-side:

"use client";

import { useEffect, useRef } from "react";
import maplibregl from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";

export function ClimateMap() {
  const container = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!container.current) return;
    const map = new maplibregl.Map({
      container: container.current,
      style: "https://demotiles.maplibre.org/style.json",
      center: [10, 50],
      zoom: 3,
    });

    map.on("load", () => {
      map.addSource("stations", {
        type: "geojson",
        data: "/api/stations",
      });
      map.addLayer({
        id: "stations",
        type: "circle",
        source: "stations",
        paint: {
          "circle-radius": 6,
          "circle-color": [
            "step", ["get", "pm25"],
            "#22c55e", 12, "#eab308", 35, "#f97316", 55, "#ef4444",
          ],
        },
      });
    });

    return () => map.remove();
  }, []);

  return <div ref={container} className="h-[480px] w-full rounded-lg" />;
}

Use a production basemap style from a tile provider or self-hosted tiles. The demo style is for development.

Layers you'll need

• Points (stations, sensors): GeoJSON circles, clustered when dense.
• Polygons (plots, districts): GeoJSON fills, or vector tiles when there are many.
• Rasters (forecasts, satellite products): raster tiles served by a tile server (e.g. TiTiler for cloud-optimised GeoTIFFs).

Time is a first-class control

Climate data changes over time. Add:

• A time slider that updates layer data or filters.
• Prefetching of adjacent time steps so scrubbing is smooth.
• A visible "data as of" timestamp.

Performance

• Don't ship giant GeoJSON. Over a few MB, switch to vector tiles (PMTiles works well for static data).
• Simplify geometry for low zoom levels.
• Use deck.gl for very large point clouds or heatmaps. More in Rendering Large Geospatial Datasets in React.
• Lazy-load the map so the rest of the page is interactive fast.

Design for decisions

The people using climate dashboards are making decisions: officials, farmers, compliance teams. Design for that:

1. Lead with the answer. "3 districts at high flood risk tomorrow" above the map.
2. Use categories with colour and text. Colour alone fails for colour-blind users.
3. Show uncertainty. Ranges, confidence levels, or "low confidence" badges.
4. Make it work on a cheap phone with a slow connection.
5. Offer a download. Analysts will want the data.

Accessibility

Maps are hard for screen readers. Provide a table view of the same data, keyboard-accessible controls, and text summaries of key findings.

Related

• How AI Flood Early Warning Systems Work
• Forecasting Air Quality with Machine Learning
• WCAG 2.2 Checklist for React Apps