What Is a Map Legend? Parts of a Map Key, Examples, and How to Make One

Every map uses symbols, and none of them explain themselves. A blue line can be a river, a tram route, or a motorway, depending on who drew the map. The map legend is where the mapmaker writes that down.

This guide covers what a map legend is, the parts a legend needs, how legends change across map types, and how to build one for an interactive web map, with code.

What a map legend is

A map legend, also called a map key, is the panel that pairs every symbol on a map with a label that says what the symbol means.

The word comes from the Latin legenda, "things to be read". The name fits: the legend is the text a reader needs before the rest of the map makes sense.

Some cartography textbooks separate the two terms. Key is the list of symbols, and legend is the whole panel with the title, units, and notes. In schools, in GIS software, and in everyday use, the words mean the same thing, and this article uses them that way.

The parts of a map legend

A map only needs the parts it uses. Every symbol that appears on the map needs an entry.

Two map elements often sit next to the legend without being part of it. The scale bar relates distance on the map to distance on the ground. The north arrow shows orientation, which matters on rotated maps and on maps drawn in an unusual projection.

Map legend examples by map type

The legend follows the data. A road atlas and a census map both need a legend, but each legend solves a different problem.

Topographic maps carry long legends. National mapping agencies such as the USGS, Ordnance Survey, and IGN publish full symbol sheets for contour lines, vegetation, buildings, and landmarks. Contour lines get one entry plus a note on the interval, for example "contour interval 10 m". The isoline map guide explains how to read those lines.

Road maps encode road class with colour and line width. The legend lists the classes from motorway down to minor road, plus symbols for junctions, toll points, and ferries.

Choropleth maps shade regions by a value, so the legend is a colour scale with a range for each shade. The ranges carry as much meaning as the colours, because the same data can look calm or alarming depending on where the class breaks fall. The choropleth map guide covers how to choose them.

Heat maps and weather maps show a continuous surface. Their legend is a gradient bar with labelled ticks, without separate boxes.

Proportional symbol maps scale a circle or square by value. The legend shows three or four reference sizes so the reader can estimate the values in between.

Transit maps give each line its own colour and name. The legend doubles as a line index, and interchange stations get their own symbol.

For more map types and when each one fits, see types of maps and the thematic map guide.

How to read a map legend

Four checks catch most misreadings.

1. Read the title and the unit. "Cases" and "cases per 100,000 people" produce very different maps from the same data.
2. Check the class breaks. Ranges of unequal width, such as 0 to 5 next to 5 to 500, are a valid choice, but they change what each colour means. Read the numbers before the colours.
3. Check how sizes scale. A circle twice as wide covers four times the area. Well-made proportional symbol maps scale by area and show reference circles.
4. Find the date and the source. Without a date, you cannot tell whether the map still describes the world.

How to design a legend that works

A legend is part of the map's interface. These rules come from cartography practice and hold for print and screen.

• List only what is on the map. On a web map, hide entries for layers that are switched off or not visible at the current zoom level.
• Draw each symbol exactly as it appears on the map. Use the same colour, size, stroke, and opacity. A swatch at full opacity next to a fill at 80% opacity will not match.
• Order entries by value or importance. Put quantitative classes in order from low to high. Put the most important categories first.
• Label ranges without gaps or overlaps. "Under 50, 50 to 199, 200 and more" gives every value exactly one class.
• Pair colour with a second cue. Around 1 in 12 men and 1 in 200 women have some form of colour vision deficiency. Add labels, patterns, or distinct icon shapes, and pick palettes tested for colour blindness, such as the ColorBrewer sets.
• Keep it quieter than the data. Use small type, a plain background, and no heavy borders.
• Keep labels as text. HTML text can be translated, searched, and read by screen readers. A legend baked into an image can do none of those.

How to add a legend to a web map

MapLibre GL JS and most other web map libraries style layers from a JSON style and do not draw legends. You build the legend yourself as a small HTML panel over the map.

The main risk is drift: someone changes a colour or a class break in the style and forgets the legend. Define the classes once, and generate both the layer style and the legend from that list.

const classes = [
  { min: 0, color: '#edf8e9', label: 'Under 50' },
  { min: 50, color: '#bae4b3', label: '50 to 199' },
  { min: 200, color: '#74c476', label: '200 to 999' },
  { min: 1000, color: '#238b45', label: '1,000 and more' },
];

// 1. Build the layer style from the classes.
const fillColor = ['step', ['get', 'density'], classes[0].color];
for (const c of classes.slice(1)) fillColor.push(c.min, c.color);

map.on('load', () => {
  map.addSource('regions', { type: 'geojson', data: '/data/regions.geojson' });
  map.addLayer({
    id: 'density',
    type: 'fill',
    source: 'regions',
    paint: { 'fill-color': fillColor, 'fill-opacity': 0.8 },
  });
});

// 2. Build the legend from the same classes.
const legend = document.createElement('div');
legend.className = 'map-legend';

const title = document.createElement('h3');
title.textContent = 'People per km², 2024';
legend.append(title);

for (const c of classes) {
  const row = document.createElement('div');
  const swatch = document.createElement('span');
  swatch.style.background = c.color;
  swatch.style.opacity = '0.8'; // match the layer's fill-opacity
  row.append(swatch, c.label);
  legend.append(row);
}

map.getContainer().append(legend);

.map-legend {
  position: absolute;
  bottom: 32px;
  left: 12px;
  padding: 10px 12px;
  background: rgb(255 255 255 / 0.92);
  border-radius: 8px;
  font: 13px/1.5 system-ui, sans-serif;
}
.map-legend h3 { margin: 0 0 6px; font-size: 13px; }
.map-legend span {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border-radius: 2px;
}

The step expression gives every region below 50 the first colour, then switches colour at each min value. The legend loops over the same classes array, so adding a fifth class or changing a colour updates the map and the legend together. The palette is the four-class ColorBrewer Greens scale. Labels are set with textContent, which keeps the legend safe when labels come from an API or user input.

Once the basic legend works, three extensions are worth adding:

• Make rows toggle classes. Turn each row into a button that calls map.setFilter on the layer, so the legend doubles as a control.
• Follow the zoom level. Listen for the zoomend event and hide rows for layers outside their minzoom and maxzoom.
• Collapse on small screens. Wrap the legend in a details element with a summary heading to get an accessible open and close toggle without extra JavaScript.

Where MapAtlas fits

A legend can only be as consistent as the style behind it. MapAtlas Map Visualization & Styling gives you custom map styles in your own colours, fonts, and icons, with data layers coloured by value. Pair it with the legend pattern above, and the map and its key stay in agreement as the data changes.