Legend

A legend rendered from the same ramp object that colours the map.

Usage

Define the ramp once and hand it to both components. The legend on the Choropleth page is this component.

const ramp: ChoroplethRamp = {
  kind: "step",
  breaks: [7, 12, 17],
  colors: ["#eef2f6", "#ccd6e0", "#9fb1c2", "#6d859c"],
};

<Choropleth id="zips" data={zips} value="area" ramp={ramp} featureId="zip" />
<Legend ramp={ramp} title="ZIP area · km²" />

All three ramp kinds render: step as labelled bands, linear as a gradient bar with its bounds, and categorical as a swatch list.

Pass activeValue - typically the value of the hovered feature - and the matching band is emphasised, so the legend doubles as a readout.

Why Share the Ramp

The usual way to build a legend is to write the colours a second time, as a CSS gradient or a list of swatches. Then someone tunes the map palette, forgets the legend, and the two quietly disagree - the map says one thing, the key says another.

This is not hypothetical. In the production codebase this library was drawn from, one brand ramp was encoded five different ways across the same repo, and legends had drifted from the layers they described.

Because Legend reads the ramp object rather than a copy of its colours, and Choropleth compiles the same object into its paint expression, the two cannot disagree. Change a colour in one place and both follow.

Props

PropTypeDefaultDescription
rampChoroplethRamp—The same object passed to Choropleth. step, linear or categorical.
titlestring—Optional caption above the swatches.
activeValuenumber | null—Emphasise the band this value falls into. Step ramps only.
format(value: number) => stringStringFormat numeric bounds in the labels.
classNamestring—Classes for the container, e.g. absolute placement.
Choropleth3D