maplibre-gl-layer-control

Layer panel with opacity and styling

Maintained by Open Geospatial Solutions

A MapLibre GL JS layer control with visibility toggles, opacity sliders, drag-to-reorder, and a per-layer style editor. Basemap layers are grouped as one background entry.

Live demo

maplibre-gl-layer-control running on MapLibre GL JS in your browser

Loading the map…

Demo code

import { LayerControl } from "maplibre-gl-layer-control";
import "maplibre-gl-layer-control/style.css";
import type { PluginDemo } from "../types";

export default {
  center: [2.3522, 48.8566], // Paris
  zoom: 12,
  run({ map }) {
    // One layer of our own: the Paris ring road area, as a translucent fill.
    map.addSource("inner-paris", {
      type: "geojson",
      data: {
        type: "Polygon",
        coordinates: [
          [
            [2.2795, 48.8785],
            [2.3303, 48.9005],
            [2.3995, 48.8987],
            [2.4127, 48.8488],
            [2.3653, 48.8158],
            [2.3016, 48.8263],
            [2.2551, 48.8471],
            [2.2795, 48.8785],
          ],
        ],
      },
    });
    map.addLayer({
      id: "inner-paris",
      type: "fill",
      source: "inner-paris",
      paint: { "fill-color": "#e4572e", "fill-opacity": 0.35 },
    });

    // Toggle and fade layers; the basemap's own layers are grouped as "Background".
    map.addControl(
      new LayerControl({
        collapsed: false,
        layers: ["inner-paris", "building", "water", "park"],
        panelWidth: 300,
      }),
      "top-right",
    );
  },
} satisfies PluginDemo;