maplibre-gl-compareOfficial

Swipe comparison between maps

Maintained by MapLibre

A MapLibre GL JS plugin for comparing two maps side-by-side with a swipeable divider. Perfect for before/after or multi-style comparisons.

Live demo

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

Loading the map…

Demo code

import Compare from "@maplibre/maplibre-gl-compare";
import "@maplibre/maplibre-gl-compare/dist/maplibre-gl-compare.css";
import type { PluginDemo } from "../types";

export default {
  center: [13.405, 52.52], // Berlin
  zoom: 12,
  run({ map, maplibregl, container }) {
    // A second map in a dark style, stacked over the first one.
    const after = document.createElement("div");
    after.style.cssText = "position: absolute; inset: 0";
    container.appendChild(after);
    const afterMap = new maplibregl.Map({
      container: after,
      style: "https://tiles.openfreemap.org/styles/dark",
      center: map.getCenter(),
      zoom: map.getZoom(),
      cooperativeGestures: true,
      attributionControl: { compact: true },
    });

    // Drag the handle to swipe between the two styles; the maps move together.
    new Compare(map, afterMap, container);
  },
} satisfies PluginDemo;