maplibre-gl-legend

Legend control generated from the style

Maintained by Water GIS

A MapLibre GL JS control that builds a legend from the map's own style, with a symbol per layer and checkboxes to show or hide layers.

Live demo

maplibre-gl-legend running on MapLibre GL JS in your browser

Loading the map…

Demo code

import { MaplibreLegendControl } from "@watergis/maplibre-gl-legend";
import "@watergis/maplibre-gl-legend/dist/maplibre-gl-legend.css";
import type { PluginDemo } from "../types";

export default {
  center: [-0.1, 51.505], // London
  zoom: 13,
  run({ map }) {
    // A legend drawn from the style itself, with a checkbox per layer to hide or show it.
    const layers = {
      water: "Water",
      park: "Parks",
      landcover_wood: "Woods",
      building: "Buildings",
      road_motorway: "Motorways",
      road_trunk_primary: "Main roads",
      road_major_rail: "Railways",
    };
    map.addControl(
      new MaplibreLegendControl(layers, {
        showDefault: true,
        showCheckbox: true,
        onlyRendered: false,
        reverseOrder: false,
        title: "Legend",
      }),
      "top-right",
    );
  },
} satisfies PluginDemo;