maplibre-gl-mask-plugin

Fade out everything outside an area

Maintained by mguihal

A MapLibre GL JS plugin that masks the map around a polygon: everything outside it is faded, with an optional soft edge and labels limited to the area.

Live demo

maplibre-gl-mask-plugin running on MapLibre GL JS in your browser

Loading the map…

Demo code

import { createMask } from "maplibre-gl-mask-plugin";
import type { PluginDemo } from "../types";

export default {
  center: [2.345, 48.857], // Paris
  zoom: 11.3,
  async run({ map }) {
    // The plugin draws once every tile has loaded (or on the next style change), so wait for that.
    if (!map.loaded()) await map.once("idle");

    // Fade out everything outside one area. Here: a rough outline of Paris inside its ring road.
    createMask(
      map,
      "paris",
      {
        type: "Feature",
        properties: {},
        geometry: {
          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],
            ],
          ],
        },
      },
      { backgroundColor: "#ffffff", backgroundOpacity: 0.75 },
    );
  },
} satisfies PluginDemo;