Skip to content
Make with
m

maplibre-gl-opacity

Layer opacity control

Maintained by MUG-JP

Source ↗

A MapLibre GL JS plugin for toggling layer visibility and adjusting opacity with a compact UI control.

Live demo

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

Loading the map…

Demo code
import OpacityControl from "maplibre-gl-opacity";
import type { PluginDemo } from "../types";

export default {
  center: [139.767, 35.681], // Tokyo Station
  zoom: 13,
  run({ map, container }) {
    // Two free raster overlays from the Geospatial Information Authority of Japan (GSI).
    const attribution = '<a href="https://maps.gsi.go.jp/development/ichiran.html">GSI Japan</a>';
    map.addSource("gsi-pale", {
      type: "raster",
      tiles: ["https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png"],
      tileSize: 256,
      attribution,
    });
    map.addLayer({ id: "gsi-pale", type: "raster", source: "gsi-pale" });
    map.addSource("gsi-photo", {
      type: "raster",
      tiles: ["https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg"],
      tileSize: 256,
      attribution,
    });
    map.addLayer({ id: "gsi-photo", type: "raster", source: "gsi-photo" });

    // Checkboxes toggle each overlay, sliders set its opacity.
    map.addControl(
      new OpacityControl({
        overLayers: { "gsi-pale": "GSI Pale", "gsi-photo": "GSI Photo" },
        opacityControl: true,
      }),
      "top-right",
    );

    // The overlays start hidden: switch on "GSI Photo" and slide it to 60 %.
    const [, photoBox] = container.querySelectorAll<HTMLInputElement>(
      ".maplibregl-ctrl input[type=checkbox]",
    );
    const [, photoSlider] = container.querySelectorAll<HTMLInputElement>(
      ".maplibregl-ctrl input[type=range]",
    );
    photoBox.click();
    photoSlider.value = "60";
    photoSlider.dispatchEvent(new Event("input"));
  },
} satisfies PluginDemo;