Add a Legend
Add a LegendControl to list what the map shows in the current view: roads, water, places and more, each drawn the way the map draws it. The Maptoolkit styles carry the legend’s metadata, so the control needs no setup. Click Legend at the bottom left to open it. For other button placements, your own styles and all options, see Map Legend.
import * as maplibregl from 'https://cdn.jsdelivr.net/npm/maplibre-gl@6.9.0/dist/maplibre-gl.mjs';
import { LogoControl } from 'https://cdn.jsdelivr.net/npm/@maptoolkit/maplibre-logo-control@1.0.0/+esm';
import { LegendControl } from 'https://cdn.jsdelivr.net/npm/@maptoolkit/maplibre-legend-control@1.0.2/+esm';
const map = new maplibregl.Map({ container: 'map', attributionControl: { customAttribution: '', compact: false }, style: 'https://styles.maptoolkit.org/summer.json', center: [11.39, 47.27], zoom: 12.5 }); // Innsbruck
map.addControl(new LogoControl());
// Added after the logo, the legend's button sits above it.
map.addControl(new LegendControl({ language: 'en' }));<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@6.9.0/dist/maplibre-gl.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@maptoolkit/maplibre-logo-control@1.0.0/dist/maplibre-logo-control.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@maptoolkit/maplibre-legend-control@1.0.2/dist/maplibre-legend-control.css" />
<style>
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
#map { width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script type="module">
import * as maplibregl from 'https://cdn.jsdelivr.net/npm/maplibre-gl@6.9.0/dist/maplibre-gl.mjs';
import { LogoControl } from 'https://cdn.jsdelivr.net/npm/@maptoolkit/maplibre-logo-control@1.0.0/+esm';
import { LegendControl } from 'https://cdn.jsdelivr.net/npm/@maptoolkit/maplibre-legend-control@1.0.2/+esm';
const map = new maplibregl.Map({ container: 'map', attributionControl: { customAttribution: '', compact: false }, style: 'https://styles.maptoolkit.org/summer.json', center: [11.39, 47.27], zoom: 12.5 }); // Innsbruck
map.addControl(new LogoControl());
// Added after the logo, the legend's button sits above it.
map.addControl(new LegendControl({ language: 'en' }));
</script>
</body>
</html>